<form>
Un formulaire qui collecte des données auprès de l’utilisateur et les envoie à une adresse donnée.
- Affichage
- block
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu de flux sans éléments
<form>imbriqués
Exemple
#<form action="/newsletter" method="post">
<p>
<label for="email">E-mail</label>
<input type="email" id="email" name="email" placeholder="lea@example.com" required>
</p>
<p>
<label>
<input type="checkbox" name="consent" required>
Je veux recevoir les nouvelles leçons par e-mail
</label>
</p>
<button type="submit">S’inscrire</button>
</form>Définition et utilisation
#L’élément <form> réunit des champs (<input>, <select>, <textarea>) et des boutons en un seul ensemble. Quand vous cliquez sur un bouton d’envoi ou appuyez sur Entrée dans un champ de texte, le navigateur récupère les valeurs de tous les champs ayant un attribut name et les envoie à l’adresse indiquée dans l’attribut action.
La méthode get ajoute les données à l’adresse de la page (/recherche?q=html), ce qui convient aux champs de recherche et aux filtres qu’il est utile de pouvoir mettre en favoris. La méthode post envoie les données dans le corps de la requête et convient à la connexion, à l’inscription, aux commandes et à tout ce qui modifie des données sur le serveur.
Avant l’envoi du formulaire, le navigateur vérifie les règles inscrites dans les champs, comme required, type="email" ou minlength, et affiche un message au niveau du premier champ invalide. Les formulaires ne peuvent pas être imbriqués, mais vous pouvez rattacher à un formulaire un champ situé en dehors de lui grâce à l’attribut form="id-du-formulaire".
Syntaxe
#<form action="/adresse" method="post">
…
</form>Attributs
#URL
L’adresse à laquelle les données seront envoyées. Sans cet attribut, le formulaire envoie les données à l’adresse de la page actuelle. Un bouton isolé peut remplacer cette adresse avec son propre attributformaction.get | post | dialog
La façon d’envoyer les données.get(par défaut) les ajoute à l’adresse comme paramètres, donc après l’envoi du formulaire de l’exemple, le navigateur irait à/recherche?q=….postenvoie les données dans le corps de la requête. La valeurdialogferme la boîte<dialog>dans laquelle se trouve le formulaire, sans rien envoyer au serveur.application/x-www-form-urlencoded | multipart/form-data | text/plain
Le format dans lequel les données arrivent au serveur avec la méthodepost. Le format par défaut suffit pour des champs ordinaires, mais un formulaire avec un champtype="file"doit avoirmultipart/form-data, sinon seul le nom du fichier sera envoyé au lieu du fichier lui-même.attribut booléen
Désactive la validation intégrée du navigateur lors de l’envoi. Utile quand vous vérifiez les champs avec votre propre code JavaScript et affichez vos propres messages. Dans l’exemple, le formulaire ne protestera pas malgré une adresse e-mail invalide.target
_self | _blank | _parent | _top | nom
Où ouvrir la réponse du serveur après l’envoi._blankl’ouvre dans un nouvel onglet. Les valeurs fonctionnent de la même façon que dans l’attributtargetd’un lien<a>.autocomplete
on | off
Le réglage par défaut de l’autocomplétion pour tous les champs du formulaire. Un champ isolé peut le remplacer avec son propre attributautocomplete. Pour les champs de connexion, les navigateurs ignorent souventoff, afin que les gestionnaires de mots de passe continuent de fonctionner.name
texte
Le nom du formulaire. Il permet de s’y référer en JavaScript viadocument.forms.nom.
L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.
Attributs en pratique
#action
URLL’adresse à laquelle les données seront envoyées. Sans cet attribut, le formulaire envoie les données à l’adresse de la page actuelle. Un bouton isolé peut remplacer cette adresse avec son propre attribut formaction.
<form action="/contact" method="post">
<label>Message <input type="text" name="message"></label>
<button>Envoyer</button>
</form>method
get | post | dialogLa façon d’envoyer les données. get (par défaut) les ajoute à l’adresse comme paramètres, donc après l’envoi du formulaire de l’exemple, le navigateur irait à /recherche?q=…. post envoie les données dans le corps de la requête. La valeur dialog ferme la boîte <dialog> dans laquelle se trouve le formulaire, sans rien envoyer au serveur.
<form action="/recherche" method="get">
<input type="search" name="q" placeholder="Rechercher dans la documentation" aria-label="Rechercher dans la documentation">
<button>Rechercher</button>
</form>enctype
application/x-www-form-urlencoded | multipart/form-data | text/plainLe format dans lequel les données arrivent au serveur avec la méthode post. Le format par défaut suffit pour des champs ordinaires, mais un formulaire avec un champ type="file" doit avoir multipart/form-data, sinon seul le nom du fichier sera envoyé au lieu du fichier lui-même.
<form action="/profil/avatar" method="post" enctype="multipart/form-data">
<label>Photo de profil <input type="file" name="avatar" accept="image/*"></label>
<button>Envoyer</button>
</form>novalidate
attribut booléenDésactive la validation intégrée du navigateur lors de l’envoi. Utile quand vous vérifiez les champs avec votre propre code JavaScript et affichez vos propres messages. Dans l’exemple, le formulaire ne protestera pas malgré une adresse e-mail invalide.
<form novalidate>
<input type="email" name="email" value="ceci-n-est-pas-un-email" aria-label="E-mail">
<button>Envoyer malgré l’erreur</button>
</form>CSS par défaut
#La plupart des navigateurs affichent cet élément avec ces styles par défaut :
form {
display: block;
}Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Chaque champ dont la valeur doit atteindre le serveur a besoin d’un attribut
name. Un champ sans nom ne sera pas envoyé. - La validation du navigateur est un confort pour l’utilisateur, pas une protection. Le serveur doit toujours revérifier les données.
- Un bouton sans attribut
typeà l’intérieur d’un formulaire l’envoie par défaut. Donneztype="button"aux boutons qui ne font qu’agir sur la page.
Entrées associées
#- <input>Un champ de formulaire : texte, e-mail, mot de passe, nombre, date, curseur, case à cocher, fichier et bien plus encore.
- <label>L’étiquette d’un champ de formulaire. Cliquer sur l’étiquette déplace le curseur vers le champ.
- <button>Un bouton cliquable : il envoie un formulaire, le réinitialise, ou lance une action sur la page.
- <fieldset>Un groupe de champs de formulaire liés, avec un cadre et une légende `<legend>`.
- <select>Une liste déroulante dans laquelle l’utilisateur choisit une ou plusieurs options.
- <textarea>Un champ de texte multiligne pour des saisies plus longues : messages, avis, descriptions.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.