frontend / html
Formulaires : les bases
Explication
Ce que vous allez apprendre
- Associer correctement un
<label>à son<input>viafor/id - Distinguer le rôle de
id(cible CSS/JS/label) de celui dename(clé envoyée au serveur) - Regrouper des champs liés avec
<fieldset>et<legend> - Choisir entre
method="get"etmethod="post"selon la sensibilité des données - Construire un formulaire d'inscription complet avec les champs de base (texte, email, mot de passe, nombre)
Dans quel contexte ?
Un développeur reprend le formulaire de contact contact.html d'un site existant et remarque que les champs sont de simples <input> sans <label>. Un test utilisateur révèle que sur mobile, personne n'arrive à taper dans le petit champ "Email" du premier coup, car la zone cliquable est minuscule. En ajoutant <label for="email">Email</label> relié à <input id="email">, cliquer n'importe où sur le mot "Email" donne directement le focus au champ — un gain d'ergonomie immédiat, gratuit et sans une ligne de JavaScript.
Étape 1 : afficher du contenu, puis en collecter
Jusqu'ici, HTML servait uniquement à afficher du contenu. Avec les formulaires, il devient capable de collecter de l'information auprès de l'utilisateur : une inscription, une recherche, un avis.
Étape 2 : la version la plus simple d'un champ
Au minimum, un champ de formulaire c'est juste un <input>. Mais utilisé seul, sans rien autour, il pose déjà un problème : rien n'indique clairement à quoi il sert, ni visuellement ni pour une machine.
Étape 3 : le duo label + input, souvent négligé
Voici comment on corrige ça : on associe un <label> à chaque champ via l'attribut for, relié à l'id du champ. Sans ce lien, deux choses cassent discrètement.
D'abord, cliquer sur le texte du label ne donne plus le focus au champ — une mauvaise expérience sur mobile, où les zones cliquables doivent être grandes. Ensuite, un lecteur d'écran ne peut plus annoncer "Prénom, champ de texte" quand l'utilisateur arrive dessus. Le lien label/input n'est donc pas un détail de style, c'est un lien fonctionnel.
Bonne pratique
Reliez systématiquement <label for="prenom">Prénom</label> à <input id="prenom" name="prenom">. L'attribut for du label doit être identique à l'id du champ, caractère pour caractère — une faute de frappe casse silencieusement ce lien.
Étape 4 : ne pas confondre id et name
Il reste un piège fréquent chez les débutants : confondre id et name. L'id sert uniquement de cible pour le CSS, le JavaScript, ou le <label for> — il reste propre à la page HTML.
Le name, lui, est complètement différent : c'est la clé qui sera effectivement envoyée au serveur lors de la soumission. Un champ sans name est invisible pour le serveur, même s'il a un id et s'affiche parfaitement à l'écran.
Étape 5 : GET ou POST, une vraie décision
Une fois le formulaire prêt à être envoyé, il faut choisir sa méthode. GET place les données dans l'URL : pratique pour une recherche qu'on veut partager ou mettre en favori, mais totalement inadapté pour un mot de passe, qui se retrouverait visible dans l'historique du navigateur.
POST, au contraire, envoie les données dans le corps de la requête, invisible dans l'URL — c'est le bon choix pour toute donnée sensible ou volumineuse.
| Attribut | Rôle | Exemple |
|---|---|---|
id | Cible pour CSS, JS, <label for> | id="email" |
name | Clé transmise au serveur | name="email" |
method="get" | Données dans l'URL, partageable | Formulaire de recherche |
method="post" | Données dans le corps, invisibles | Formulaire de connexion |
Piège fréquent
Ne jamais utiliser method="get" pour un formulaire contenant un mot de passe : les données finissent dans l'URL, visibles dans l'historique du navigateur, dans les logs du serveur et potentiellement partagées si l'URL est copiée-collée.
Et ensuite ?
Une fois ces bases posées, la prochaine étape consiste à explorer les types d'inputs spécialisés et la validation native, pour que le navigateur fasse une partie du travail à votre place.
Commandes & code
Formulaires : les bases
L'élément le plus riche du HTML, souvent sous-exploité au profit de JavaScript pur.
<form action="/inscription" method="post">
<!-- label + for/id : clic sur le label = focus sur le champ,
et c'est LU par les lecteurs d'écran -->
<label for="prenom">Prénom</label>
<input type="text" id="prenom" name="prenom" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="mdp">Mot de passe</label>
<input type="password" id="mdp" name="mdp" minlength="8" required>
<label for="age">Âge</label>
<input type="number" id="age" name="age" min="18" max="120">
<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="4" cols="40"></textarea>
<button type="submit">Envoyer</button>
<button type="reset">Réinitialiser</button>
</form><!-- Groupes de choix -->
<fieldset>
<legend>Genre préféré</legend>
<input type="radio" id="homme" name="genre" value="homme">
<label for="homme">Homme</label>
<input type="radio" id="femme" name="genre" value="femme">
<label for="femme">Femme</label>
</fieldset>
<fieldset>
<legend>Centres d'intérêt</legend>
<input type="checkbox" id="sport" name="interets" value="sport">
<label for="sport">Sport</label>
<input type="checkbox" id="lecture" name="interets" value="lecture">
<label for="lecture">Lecture</label>
</fieldset>
<label for="pays">Pays</label>
<select id="pays" name="pays">
<optgroup label="Europe">
<option value="fr">France</option>
<option value="be">Belgique</option>
</optgroup>
<optgroup label="Amérique">
<option value="ca">Canada</option>
</optgroup>
</select>| Attribut | Effet |
|---|---|
required | champ obligatoire (validation native) |
name | clé envoyée au serveur |
id | cible du <label for> |
method="post" | données envoyées dans le corps de la requête |
Résumé
- Chaque champ a un
<label>associé viafor/id(accessibilité + UX clic). fieldset/legendregroupent des champs liés sémantiquement.method="get"pour une recherche (URL partageable),postpour des données sensibles.namedéfinit la clé transmise au serveur, indépendamment deid.
Exercices pratiques
Mission : réparer le formulaire de contact cassé
Objectif : Corriger un formulaire de contact où les champs ne sont pas reliés à leurs labels et où un champ sensible utilise la mauvaise méthode d'envoi.
Contexte
Un test utilisateur révèle que sur mobile, personne n'arrive à cliquer directement dans le petit champ "Email" de contact.html : il faut viser précisément le champ, le mot "Email" à côté ne réagit pas au clic. En creusant le code, tu découvres <label>Email</label><input type="email">, sans aucun lien entre les deux. Le formulaire entier est aussi envoyé avec method="get", alors qu'il contient un champ mot de passe pour un espace membre.
Ta mission : corriger ces deux défauts.