L'élément HTML <form>
représente une section d'un document qui contient des contrôles interactifs permettant à un utilisateur d'envoyer des données à un serveur web.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
Il est possible d'utiliser les pseudo-classes CSS :valid
et :invalid
pour mettre en forme un élément <form>
.
Attributs
Cet élément prend en charge les attributs universels.
accept
HTML 4- Cet attribut indique quels types de contenus sont acceptés par le serveur. Il peut y en avoir plusieurs, séparés par des virgules.
accept-charset
- Une liste des ensembles de caractères que le serveur accepte. Cette liste est délimitée par des espaces ou des virgules. Le navigateur les utilise dans l'ordre dans lequel ils ont été définis. La valeur par défaut est la chaîne de caractères réservée "UNKNOWN" ; dans ce cas, l'ensemble de caractères utilisé correspond à celui du document contenant l'élément
<form>
.
Dans les versions précédentes de HTML, les différents ensembles de caractères pouvaient être délimités par des espaces ou des virgules. Ce n'est plus le cas en HTML5 où seuls les espaces sont autorisés. action
- L'URI du programme qui traitera les informations soumises par le formulaire. Cette valeur peut être surchargée par un attribut
formaction
sur un élément<button>
ou<input>
. autocapitalize
- Cet attribut est un attribut non-standard utilisé sur iOS par Safari Mobile qui contrôle la façon dont la valeur du texte est automatiquement transcrite en majuscules lors de la saisie par l'utilisateur. Si l'attribut
autocapitalize
est défini sur un des descendants du formulaire, il surchargera la valeur deautocapitalize
utilisée pour le formulaire. Les valeurs non-dépréciées sont disponibles pour iOS 5 et supérieurs. La valeur par défaut estsentences
. Les valeurs possibles sont:none
: La mise en majuscules est totalement désactivéesentences
: Les premières lettres des phrases sont automatiquement passées en majuscules.words
: La première lettre de chaque mot est automatiquement passée en majuscule.characters
: Tous les caractères sont automatiquement passés en majuscules.on
: Déprécié depuis iOS 5.off
: Déprécié depuis iOS 5.
autocomplete
HTML5- Cet attribut énuméré est utilisé pour définir le comportement du navigateur quant à l'autocomplétion des champs. Cet attribut peut être surchargé par chacun des éléments du formulaire. Il peut prendre deux valeurs :
on
: Le navigateur peut remplir automatiquement les valeurs d'après les précédentes informations qu'a entrées l'utilisateur lors d'usages antérieurs du formulaire.off
: L'utilisateur doit remplir lui-même la valeur de chaque champ, à chaque utilisation du formulaire, ou le formulaire utilise son propre système d'auto-complétion ; le navigateur ne doit pas remplir automatiquement les valeurs.
En son absence, sa valeur par défaut est
on
. Les éléments du formulaire peuvent bien sûr outrepasser cette valeur via leur propre attributautocomplete
.Note : Si autocomplete vautoff
dans un formulaire parce que le document fournit son propre système d'auto-complétion, il faut aussi définirautocomplete
àoff
pour chaque élément<input>
du formulaire. Pour plus d'informations, voir le tableau de compatibilité. enctype
- Lorsque la valeur de l'attribut
method
estpost
, cet attribut définit le type MIME qui sera utilisé pour encoder les données envoyées au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :application/x-www-form-urlencoded
: la valeur par défaut si l'attribut n'est pas définimultipart/form-data
: la valeur utilisée par un élément<input>
dont l'attributtype
vaut "file".text/plain
HTML5, correspondant au type MIME éponyme.
formenctype
des éléments<button>
ou<input>
. method
- Cet attribut définit la méthode HTTP qui sera utilisée pour envoyer les données au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
get
: correspondant à la méthode GET du protocole HTTP. Les données du formulaires sont ajoutées à l'URI de l'attributaction
avec '?' comme séparateur. L'URI ainsi composée est ensuite enovyée vers le serveur. On utilisera cette méthode lorsque le formulaire n'a pas d'effet de bord et qu'il ne contient que des caractères ASCII.post
: correspondant à la méthode POST du protocole HTTP, les données du formulaires sont incluses dans le corps du formulaire et envoyées vers le server.dialog
: à utiliser lorsque le formulaire est placé dans un élément<dialog>
afin de fermer la boîte de dialogue à l'envoi du formulaire.
Si cet attribut n'est pas défini, la valeur par défaut utilisée est
get
. Cette valeur peut-être surchargée par l'attributformmethod
des éléments<button>
ou<input>
. name
- Le nom du formulaire. Dans HTML 4, cet attribut est déprécié. (
id
doit être utilisé à la place). Il doit être unique parmi tous les formulaires d'un document, et ne doit pas être une chaîne de caractères vide en HTML5. novalidate
HTML5- Cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas défini, le formulaire sera validé lors de sa soumission. Il peut être surchargé par l'attribut
formnovalidate
des éléments<button>
ou<input>
appartenant au formulaire. target
- Un nom ou un mot-clé indiquant où afficher la réponse après avoir envoyé le formulaire. Dans HTML 4, c'est le nom, ou le mot-clé, d'une frame. Dans HTML5, c'est le nom, ou le mot-clé, d'un contexte de navigation (onglet, fenêtre, frame). Les mots-clés suivants ont un sens particulier :
_self
: charge la réponse dans la même frame HTML 4 (ou le même contexte de navigation HTML5) que l'actuelle. Il s'agit de la valeur par défaut quand cet attribut n'est pas défini ;_parent
: charge la réponse dans le frameset parent HTML 4 de la frame actuelle, ou dans le contexte de navigation parent HTML5 de l'actuelle ;_top
: HTML 4 : charge la réponse dans la fenêtre complête originale, annulant toutes les autres frames. HTML5 : charge la réponse dans le contexte de navigation le plus haut (c'est-à-dire le contexte de navigation qui est l'ancêtre de l'actuel, et qui n'a aucun parent). S'il n'y a pas de parent, l'option se comporte comme_self
;_blank
: charge la réponse dans une fenêtre HTML 4 non nommée ou dans un contexte de navigation HTML5.
HTML5 : Cette valeur peut être surchargée par l'attribut
formtarget
des éléments<button>
ou<input>
.
Exemples
HTML
<!-- Formulaire simple qui enverra une requête GET -->
<form action="" method="get">
<label for="GET-name">Nom :</label>
<input id="GET-name" type="text" name="name">
<input type="submit" value="Enregistrer">
</form>
<!-- Formulaire simple qui enverra une requête POST -->
<form action="" method="post">
<label for="POST-name">Nom :</label>
<input id="POST-name" type="text" name="name">
<input type="submit" value="Enregistrer">
</form>
<!-- Formulaire avec un fieldset, un legend, et un label -->
<form action="" method="post">
<fieldset>
<legend>Titre</legend>
<input type="radio" name="radio" id="radio"> <label for="radio">Cliquez moi</label>
</fieldset>
</form>
Résultat
Résumé technique
Catégories de contenu | Contenu de flux, contenu tangible. |
---|---|
Contenu autorisé | Contenu de flux qui ne contient pas d'élément <form> . |
Omission de balises | Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires |
Parents autorisés | Tout élément qui accepte du contenu de flux. |
Rôles ARIA autorisés | group , presentation |
Interface DOM | HTMLFormElement |
Spécifications
Spécification | État | Commentaires |
---|---|---|
HTML Living Standard La définition de '<form>' dans cette spécification. |
Standard évolutif | |
HTML5 La définition de '<form>' dans cette spécification. |
Recommendation | |
HTML 4.01 Specification La définition de '<form>' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Le guide sur les formulaires HTML
- Les autres éléments utilisés pour les formulaires
- La méthode du DOM
HTMLFormElement.elements
qui permet de récupérer une liste des éléments du formulaire. - ARIA : le rôle
form
- ARIA : le rôle
search