<label>
L’étiquette d’un champ de formulaire. Cliquer sur l’étiquette déplace le curseur vers le champ.
- Affichage
- inline
- Balise fermante
- Obligatoire
- Contenu autorisé
- Contenu phrasant sans autres étiquettes et sans champs autres que celui décrit
Exemple
#<p>
<label for="nick">Pseudo dans le classement</label>
<input type="text" id="nick" name="nick">
</p>
<p>
<label>
<input type="checkbox" name="terms">
J’accepte les conditions du cours
</label>
</p>Définition et utilisation
#L’élément <label> décrit un champ de formulaire : il indique ce que vous attendez de l’utilisateur (« E-mail », « Mot de passe », « J’accepte les conditions »). Vous reliez une étiquette à un champ de deux façons : en enveloppant le champ avec elle, ou en donnant l’identifiant du champ dans l’attribut for.
Cette association apporte de vrais avantages. Un lecteur d’écran lit l’étiquette quand l’utilisateur entre dans le champ, et cliquer sur le texte de l’étiquette place le curseur dans le champ ou coche la case. Sur un téléphone, où il est difficile de viser une petite case à cocher, cela fait une grande différence.
Vous pouvez relier une étiquette aux éléments <input> (sauf type="hidden"), <select>, <textarea>, <button>, <meter>, <output> et <progress>. Un champ peut avoir plusieurs étiquettes, mais une étiquette ne décrit qu’un seul champ.
Syntaxe
#<label for="id-du-champ">Texte de l’étiquette</label>Attributs
#id d’un champ
L’identifiant du champ que décrit l’étiquette. Grâce à lui, l’étiquette et le champ n’ont pas besoin d’être côte à côte dans le code, ce qui est utile par exemple lorsqu’ils se trouvent dans des cellules de tableau séparées.
L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.
Attributs en pratique
#for
id d’un champL’identifiant du champ que décrit l’étiquette. Grâce à lui, l’étiquette et le champ n’ont pas besoin d’être côte à côte dans le code, ce qui est utile par exemple lorsqu’ils se trouvent dans des cellules de tableau séparées.
<label for="course">Choisissez un cours</label>
<select id="course" name="course">
<option>HTML et CSS</option>
<option>JavaScript</option>
</select>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
#placeholderne remplace pas une étiquette. Il disparaît pendant la saisie, et il est facile d’oublier ce qu’il fallait écrire.- La valeur de
fordoit correspondre exactement à l’iddu champ, en respectant la casse. - Si la maquette exige de masquer l’étiquette, masquez-la seulement visuellement (par exemple avec une classe du style
.sr-only), plutôt que de la supprimer. Les lecteurs d’écran continueront à la lire.
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.
- <form>Un formulaire qui collecte des données auprès de l’utilisateur et les envoie à une adresse donnée.
- <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.
- <fieldset>Un groupe de champs de formulaire liés, avec un cadre et une légende `<legend>`.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.