Résumé
L'élément HTML <form>
représente une section d'un document qui contient des contrôles interactifs permettant à un utilisateur de soumettre des données à un serveur web.
Il est possible d'utiliser les pseudo-classes CSS :valid
et :invalid
pour styler un élément <form>
.
- Catégories de contenu Contenu de flux, contenu palpable.
- Contenu autorisé Contenu de flux, mais sans contenir d'élément
<form>
. - Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
- Éléments parents autorisés Tout élément acceptant du contenu de flux.
- Interface DOM
HTMLFormElement
Attributs
Cet élément supporte les attributs globaux.
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
: Dpéré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 Notes sur Google Chrome. 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<button>
. 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.
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
<!-- Formulaire simple qui enverra une requête GET --> <form action=""> <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>
Spécifications
Spécification | Statut | Commentaires |
---|---|---|
WHATWG 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 |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Support de base | 1.0 | 1.0 (1.7 ou moins) | (Oui) | (Oui) | (Oui) |
Attribut novalidate |
1.0 | 4.0 (2.0) | 10 | ? | ? |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support de base | (Oui) | 1.0 (1.0) | (Oui) | (Oui) | (Oui) |
Attribut novalidate |
? | 4.0 (2.0) | ? | ? | ? |
Notes sur Google Chrome
- L'interface utilisateur de Google Chrome pour l'auto-complétion varie selon que
autocomplete
est àoff
sur les éléments<input>
et en même temps sur le formulaire. - Quand un formulaire a
autocomplete
àoff
, et que l'autocomplete
de son élément<input>
n'est pas défini, si l'utilisateur demande les suggestions de remplissage automatique sur le champ, Chrome affichera un message disant "L'auto-complétion a été désactivée pour ce formulaire." Par contre, si aussi bien le formulaire et l'élément<input>
ontautocomplete
àoff
, le navigateur n'affichera aucun message. Pour cette raison, vous devriez mettreautocomplete
àoff
pour chaque<input>
qui a une auto-complétion particulière.
Voir aussi
- Le guide sur les formulaires HTML
- Les autres éléments utilisés pour les formulaires
<button>
,<datalist>
,<fieldset>
,<input>
,<keygen>
,<label>
,<legend>
,<meter>
,<optgroup>
,<option>
,<output>
,<progress>
,<select>
,<textarea>
.
Étiquettes et contributeurs liés au document
Étiquettes :
Contributeurs à cette page :
SphinxKnight,
Jack_Duthen,
msherefel,
Goofy,
wakooka,
tregagnon,
teoli,
jswisher
Dernière mise à jour par :
SphinxKnight,