Formulaires HTML
Apprenez les formulaires HTML : l'élément form, action et method (GET vs POST), labels, inputs, textarea, select, boutons et validation HTML5.
Un formulaire HTML collecte les données saisies par l'utilisateur et les envoie à un serveur pour traitement. Un formulaire est un conteneur — l'élément <form> — qui contient un ou plusieurs contrôles tels que des champs texte, des cases à cocher, des boutons radio, des listes déroulantes et des boutons de soumission. Cette page couvre l'élément <form> lui-même, les contrôles que l'on y place, la façon dont les données sont envoyées (GET vs POST), ainsi que l'étiquetage et la validation des saisies.
L'élément <form>
Tout formulaire commence par la balise <form>. Les contrôles que l'utilisateur remplit se trouvent entre les balises d'ouverture <form> et de fermeture </form>. Deux attributs font l'essentiel du travail :
action— l'URL qui reçoit les données du formulaire lorsque l'utilisateur le soumet.method— la méthode HTTP utilisée pour envoyer les données, soitGET, soitPOST.
<form action="/subscribe" method="POST">
<!-- form controls go here -->
<button type="submit">Subscribe</button>
</form>Si vous omettez action, le formulaire est soumis à l'URL de la page courante. Si vous omettez method, le navigateur utilise GET par défaut.
Étiqueter les contrôles
Chaque champ de saisie devrait avoir un <label>. Reliez l'étiquette à son contrôle en donnant au contrôle un id et en faisant pointer l'attribut for de l'étiquette vers ce même id :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Text Input Example</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="surname">Surname:</label>
<input type="text" id="surname" name="surname" />
</form>
</body>
</html>Utilisez un vrai <label> plutôt que du texte brut comme Name:<br />. Un label connecté est lu à voix haute par les lecteurs d'écran et agrandit la zone cliquable, de sorte qu'appuyer sur l'étiquette donne le focus au champ. En savoir plus dans le chapitre balise HTML <label>.
L'élément HTML <input>
L'élément <input> est le contrôle de formulaire le plus courant. Son attribut type modifie son apparence et son comportement — text, email, password, number, checkbox, radio, file, submit, et bien d'autres.
Voyons quelques types de champs de saisie.
Champ texte
<input type="text"> crée un champ texte sur une seule ligne. L'attribut name est la clé envoyée au serveur avec la valeur du champ.
Exemple de champ texte :
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
</form>Bouton radio
<input type="radio"> permet à l'utilisateur de choisir exactement une option parmi un ensemble. Les boutons radio partagent le même name, de sorte que la sélection de l'un désélectionne les autres du groupe.
Exemple de bouton radio :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Radio Button Example</h2>
<form>
<input type="radio" id="football" name="game" value="football" checked />
<label for="football">Football</label>
<input type="radio" id="basketball" name="game" value="basketball" />
<label for="basketball">Basketball</label>
</form>
</body>
</html>Bouton de soumission
<input type="submit"> (ou un <button type="submit">) envoie les données du formulaire au gestionnaire de formulaire — l'URL du serveur indiquée dans l'attribut action du formulaire.
Exemple de bouton de soumission :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>HTML Form Example</h2>
<form action="/form/submit" method="POST">
<label for="firstname">Name:</label>
<input type="text" id="firstname" name="firstname" value="Tom" />
<label for="lastname">Surname:</label>
<input type="text" id="lastname" name="lastname" value="Brown" />
<label for="age">Age:</label>
<input type="number" id="age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
<p>Click the Submit button to send the form data to the action page.</p>
</body>
</html>Autres contrôles de formulaire
Les champs de saisie ne sont pas les seuls contrôles. Ces éléments permettent d'obtenir du texte multiligne, des listes déroulantes, des boutons personnalisés et un moyen de regrouper des champs connexes.
Texte multiligne avec <textarea>
Utilisez <textarea> pour du texte plus long comme des commentaires ou des messages. Contrairement à <input>, il possède des balises d'ouverture et de fermeture distinctes, et rows/cols définissent sa taille visible.
<form>
<label for="message">Your message:</label>
<textarea id="message" name="message" rows="4" cols="40"></textarea>
</form>Listes déroulantes avec <select>
Un élément <select> crée une liste déroulante. Chaque choix est une <option> ; la value est ce qui est soumis, et selected définit la valeur par défaut.
<form>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="uk" selected>United Kingdom</option>
<option value="ca">Canada</option>
</select>
</form>L'élément <button>
L'élément <button> est plus flexible que <input type="submit"> car il peut contenir du HTML (texte, icônes). Définissez toujours son type : submit soumet le formulaire, reset le réinitialise, et button ne fait rien en lui-même (utilisez-le avec JavaScript).
<form>
<button type="submit">Send</button>
<button type="reset">Clear</button>
</form>Regroupement avec <fieldset> et <legend>
Enveloppez les contrôles connexes dans un <fieldset> et décrivez le groupe avec une <legend>. Cela dessine une bordure étiquetée et aide les utilisateurs de lecteurs d'écran à comprendre la relation entre les champs — utile pour des blocs d'adresse ou des groupes de boutons radio.
<form>
<fieldset>
<legend>Contact details</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" />
</fieldset>
</form>L'attribut action
L'attribut action spécifie l'URL vers laquelle les données du formulaire sont envoyées lors de la soumission. Lorsque l'utilisateur clique sur le bouton de soumission, le navigateur regroupe les valeurs des contrôles et les envoie à cette URL.
<form action="/form/submit">L'attribut target
L'attribut target définit l'endroit où le résultat du formulaire s'ouvre — dans un nouvel onglet de navigateur, une frame ou la fenêtre courante.
_self(par défaut) ouvre le résultat dans la fenêtre courante._blankouvre le résultat dans un nouvel onglet de navigateur.
<form action="/form/submit" target="_blank">L'attribut method
L'attribut method définit la méthode HTTP — GET ou POST — utilisée pour envoyer les données du formulaire. Le choix affecte où vont les données et ce que signifie la requête.
Exemple de la méthode GET :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the GET Method</h2>
<form action="/form/submit" method="GET">
<label for="g-name">Name:</label>
<input type="text" id="g-name" name="name" value="Tom" />
<label for="g-surname">Surname:</label>
<input type="text" id="g-surname" name="surname" value="Brown" />
<label for="g-age">Age:</label>
<input type="number" id="g-age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Après soumission, les données apparaissent dans la chaîne de requête de l'URL, comme /form/submit?name=Tom&surname=Brown&age=21.
Exemple de la méthode POST :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the Post Method</h2>
<form action="/form/submit" method="POST">
<label for="p-name">Name:</label>
<input type="text" id="p-name" name="name" value="Tom" />
<label for="p-surname">Surname:</label>
<input type="text" id="p-surname" name="surname" value="Brown" />
<label for="p-age">Age:</label>
<input type="number" id="p-age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Avec POST, les données transitent dans le corps de la requête, donc elles n'apparaissent pas dans l'URL.
GET vs POST
Les deux méthodes envoient les données différemment et signalent des intentions différentes au serveur.
GET ajoute les données du formulaire à l'URL sous forme de chaîne de requête :
- Les données sont visibles dans la barre d'adresse et peuvent être mises en favoris ou partagées.
- Les URL ont une limite de longueur (généralement environ 2 048 caractères), donc GET ne convient pas pour de grandes quantités de données.
- GET est idempotent — répéter la même requête ne devrait rien modifier sur le serveur. Utilisez-le pour les recherches et les filtres qui ne font que lire des données.
N'utilisez pas GET pour envoyer des mots de passe ou d'autres données sensibles — elles se retrouvent visibles dans l'URL, l'historique du navigateur et les journaux du serveur.
POST envoie les données dans le corps de la requête :
- Les données ne sont pas affichées dans l'URL et il n'y a pas de limite de taille pratique, donc POST gère les charges utiles volumineuses et les téléchargements de fichiers.
- Les soumissions POST ne peuvent pas être mises en favoris.
- POST est destiné aux requêtes qui modifient l'état du serveur (créer un compte, publier un commentaire, passer une commande).
Règle générale : utilisez GET pour lire ou rechercher quelque chose, et POST pour créer ou modifier quelque chose.
Valider les saisies utilisateur
HTML5 peut vérifier les saisies dans le navigateur avant la soumission du formulaire — sans JavaScript. Ajoutez ces attributs à vos contrôles :
| Attribut | Ce qu'il fait |
|---|---|
required | Le champ doit être rempli avant que le formulaire puisse être soumis. |
minlength / maxlength | Nombre minimum / maximum de caractères pour les champs texte. |
min / max | Valeur minimale / maximale autorisée pour les nombres, plages et dates. |
pattern | Une expression régulière à laquelle la valeur doit correspondre. |
type | Certains types valident automatiquement le format : email, url, number, tel. |
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Form Validation Example</h2>
<form action="/form/submit" method="POST">
<label for="user">Username (3–12 letters):</label>
<input type="text" id="user" name="user"
required minlength="3" maxlength="12" pattern="[A-Za-z]+" />
<label for="mail">Email:</label>
<input type="email" id="mail" name="mail" required />
<label for="qty">Quantity (1–10):</label>
<input type="number" id="qty" name="qty" min="1" max="10" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Si une valeur ne respecte pas une règle, le navigateur bloque la soumission et affiche un message. Pour désactiver cette vérification intégrée, ajoutez l'attribut novalidate à l'élément <form>.
L'attribut enctype
L'attribut enctype définit comment les données du formulaire sont encodées lors de l'envoi avec POST :
application/x-www-form-urlencoded— la valeur par défaut ; les noms et valeurs des champs sont encodés en URL. Convient pour les formulaires texte ordinaires.multipart/form-data— requis lorsque le formulaire contient un téléchargement de fichier (<input type="file">), afin que les données binaires du fichier soient envoyées correctement.
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="photo">Profile photo:</label>
<input type="file" id="photo" name="photo" />
<button type="submit">Upload</button>
</form>Autres attributs
Voici d'autres attributs utiles de <form> :
| Attribut | Description |
|---|---|
accept-charset | Le jeu de caractères utilisé dans le formulaire soumis (par défaut : le jeu de caractères de la page). |
autocomplete | Indique si le navigateur peut compléter automatiquement le formulaire (par défaut : on). |
enctype | La façon dont les données soumises sont encodées (par défaut : application/x-www-form-urlencoded). |
name | Un nom permettant d'identifier le formulaire. |
novalidate | Indique au navigateur de ne pas valider le formulaire lors de la soumission. |
Chapitres connexes
- Balise HTML
<form> - Balise HTML
<input> - Balise HTML
<label> - Balise HTML
<textarea> - Balise HTML
<select> - Balise HTML
<button> - Balise HTML
<fieldset>