Balise HTML <form>
La balise <form> crée un formulaire web. Elle regroupe des champs et les soumet via les attributs action et method.
La balise <form> est utilisée pour ajouter des formulaires HTML à une page web afin de recueillir les saisies de l'utilisateur. Les formulaires servent à transmettre les données soumises par l'utilisateur au serveur. Les données sont envoyées en appuyant sur le bouton « Envoyer ». S'il n'y a pas de tel bouton, les informations sont envoyées lorsque la touche « Entrée » est pressée.
Syntaxe
La balise <form> fonctionne par paires. Le contenu est écrit entre les balises ouvrante (<form>) et fermante (</form>).
L'élément <form> contient d'autres balises HTML qui définissent la méthode de saisie des données :
- La balise
<input>définit un champ de saisie utilisateur. - La balise
<textarea>définit un champ de formulaire pour créer une zone de saisie multiligne. - La balise
<button>est utilisée pour placer un bouton dans un formulaire. - La balise
<select>crée un contrôle pour une liste déroulante. - La balise
<option>définit les éléments de la liste déroulante créée par la balise<select>. - La balise
<optgroup>regroupe les données associées dans la liste déroulante créée par la balise<select>. - La balise
<fieldset>regroupe visuellement les éléments à l'intérieur du formulaire défini par la balise<form>. - La balise
<label>définit le texte d'étiquette pour l'élément<input>. - La balise
<legend>définit l'en-tête de l'élément<fieldset>.
Exemple de la balise HTML <form> :
Exemple de la balise HTML <form>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
<label for="lname">Surname</label>
<input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Résultat
Exemple de la balise HTML <form> avec les balises <input> et <label> :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="Name" id="fname" value="Mary"/><br /><br />
<label for="number">Phone</label>
<input type="number" name="Phone" id="number"/><br /><br />
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" name="email" required /> <br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Exemple de la balise HTML <form> avec la balise <textarea> :
L'attribut for de la balise <label> est lié à l'id de l'élément <textarea> afin qu'un clic sur l'étiquette mette le focus sur le champ et que les lecteurs d'écran l'annoncent correctement.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Form example</h1>
<form action="/form/submit" method="POST" >
<label for="message">Message</label><br />
<textarea id="message" name="message" rows="3" cols="30" placeholder="Type some text here"></textarea><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>GET vs POST : quelle méthode utiliser
L'attribut method contrôle la façon dont le navigateur envoie les données du formulaire. Les deux valeurs se comportent très différemment :
method="get" ajoute les données du formulaire à l'URL action sous forme de chaîne de requête (?name=value&name=value). Utilisez-la lorsque :
- La soumission ne fait que lire ou filtrer des données (formulaires de recherche, filtres).
- Vous souhaitez que le résultat soit mis en favori ou partageable — les données sont visibles dans l'URL.
Parce que les données se trouvent dans l'URL, GET a de vraies limitations : la longueur de l'URL est limitée par les navigateurs et les serveurs, les valeurs sont visibles dans la barre d'adresse et les journaux du serveur, et elle ne doit jamais transporter des mots de passe ou d'autres données sensibles.
method="post" envoie les données du formulaire dans le corps de la requête HTTP, et non dans l'URL. Utilisez-la lorsque :
- La soumission modifie quelque chose sur le serveur (création d'un compte, publication d'un commentaire, paiement).
- Vous envoyez de grandes quantités de données ou des fichiers (POST n'a pas de limite de taille pratique et est nécessaire pour les téléchargements de fichiers).
- Les données sont sensibles et ne doivent pas apparaître dans l'URL.
Les soumissions POST ne sont pas mémorisables comme favoris, et le rechargement de la page de résultat déclenche généralement à nouveau la requête. En savoir plus dans les méthodes HTTP.
Téléchargement de fichiers
Pour permettre aux utilisateurs de télécharger des fichiers, le formulaire doit utiliser method="post" avec enctype="multipart/form-data" et inclure un <input type="file">. L'encodage par défaut application/x-www-form-urlencoded ne peut pas transporter des données binaires, donc le téléchargement ne fonctionnera pas sans lui.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="avatar">Choose a profile picture:</label><br />
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" /><br /><br />
<input type="submit" value="Upload" />
</form>
</body>
</html>Notez que l'attribut accept (la liste des types de fichiers autorisés) appartient à l'élément <input type="file">, et non à la balise <form>.
Ignorer la validation avec novalidate
Par défaut, les navigateurs valident les contraintes telles que required, type="email" ou pattern avant de soumettre le formulaire. L'ajout de l'attribut boolean novalidate sur le <form> indique au navigateur d'ignorer cette validation intégrée et de soumettre quand même — utile, par exemple, lorsque vous gérez la validation vous-même avec JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post" novalidate>
<label for="email">Email</label>
<input type="email" id="email" name="email" required /><br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
| accept-charset | character_set | Spécifie les encodages de caractères que le serveur accepte pour les données du formulaire soumis. |
| action | URL | L'URL vers laquelle les données du formulaire sont envoyées pour traitement — généralement un point de terminaison API ou une route serveur. Omettez-le (ou définissez-le sur une chaîne vide) pour soumettre à la même page que le formulaire. |
| autocomplete | on / off | Active ou désactive la complétion automatique du navigateur pour les champs du formulaire. La valeur par défaut est on. |
| enctype | application/x-www-form-urlencoded / multipart/form-data / text/plain | Détermine comment les données du formulaire sont encodées avant d'être envoyées. La valeur par défaut est application/x-www-form-urlencoded. Utilisez multipart/form-data lorsque le formulaire contient un téléchargement de fichier. S'applique uniquement lorsque method est post. |
| method | get / post | Spécifie la méthode HTTP utilisée pour soumettre le formulaire. La valeur par défaut est get. Voir GET vs POST ci-dessous. |
| name | text | Définit le nom du formulaire, utilisé pour référencer le formulaire dans les scripts. |
| novalidate | novalidate | Lorsqu'il est présent, le navigateur ne valide pas les champs du formulaire avant la soumission. |
| target | _blank / _self / _parent / _top / framename | Détermine où afficher la réponse reçue après la soumission du formulaire. |
La balise <form> prend également en charge les attributs globaux et les attributs d'événement.