Cours HTML / Associer correctement label et input

Un input reçoit la valeur d'un utilisateur ; un label indique à l'utilisateur à quoi sert le champ. Une association explicite fiable donne au champ un id et donne à l'étiquette une valeur for correspondante.

Connectez une étiquette à un champ de saisie

<form method="get">
  <label for="visitor-name">Nom</label>
  <input id="visitor-name" name="name" type="text">
  <button type="submit">Vérifier</button>
</form>

Placez ce code dans le body d'un fichier HTML et ouvrez-le dans un navigateur. Cliquer sur « Nom » devrait mettre le focus sur le champ. Le fait de placer simplement le texte à côté d’un champ ne les relie pas automatiquement. Un id doit être unique dans le document ; des ID en double peuvent faire en sorte qu’une étiquette cible le mauvais champ.

Appuyez également sur Tab pour accéder au champ et vérifier que l’élément focalisé est visible. L’étiquette est le nom du contrôle, pas seulement un texte décoratif. La technologie d’assistance doit pouvoir identifier quel champ est focalisé.

Les id et name font-ils le même travail ?

L’attribut id identifie un élément dans le document et peut le relier à une étiquette, un fragment ou un script. name est la clé utilisée lorsque le formulaire soumet la valeur. Ici, visitor-name est la cible de l'étiquette, tandis que name est la clé de soumission. Inspectez les noms soumis et les méthodes de requête avec l'exercice de liste de données dans Structure du formulaire et GET vs. POST.

Si cliquer sur l'étiquette ne fait rien, comparez for avec id. Si la saisie fonctionne mais que l'URL soumise ne contient pas la valeur, vérifiez name. Vous pouvez changer id="visitor-name" en id="person-name" tant que vous mettez à jour le for de l'étiquette ; name="name" peut rester le même si le serveur attend toujours cette clé.

Réparer une étiquette déconnectée

<!-- Incorrect : for correspond à name au lieu de id -->
<label for="full_name">Nom</label>
<input id="person-name" name="full_name">

<!-- Correct : for correspond à l’identifiant du champ -->
<label for="person-name">Nom</label>
<input id="person-name" name="full_name">

Testez les fragments dans des fichiers séparés. Dans la version corrigée, cliquer sur Nom doit mettre le focus sur person-name, tandis que la clé soumise reste full_name. Ne combinez pas les deux exemples dans un seul document : le faire duplique l’ID et invalide la comparaison.

Un texte indicatif ne remplace pas un libellé

Un placeholder offre un indice ou un exemple court et disparaît lorsque l’utilisateur tape. Il ne peut pas remplacer un nom de champ persistant. Gardez une étiquette visible et ajoutez l’exemple séparément. Pour les instructions persistantes associées à un champ, voir Ajouter un texte indicatif aux champs de formulaire.

<label for="email">Adresse e-mail</label>
<input id="email" name="email" type="email"
       placeholder="nom@example.com">

Même si un design masque visuellement une étiquette, le champ doit toujours avoir un nom accessible. Les cases à cocher et les boutons radio peuvent également être imbriqués dans une étiquette, comme dans <label><input type="checkbox" name="agree"> J’accepte</label>. Cliquez sur le texte de l'étiquette pour vérifier que la case à cocher change d'état. Choisissez des formulations claires avant d'ajuster l'apparence. Voir la référence MDN sur les étiquettes pour les méthodes d'association.