L’élément label permet de donner un intitulé à un champ de formulaire comme par exemple un input de type text, un textarea ou encore les champs de type radio ou checkbox, parmi les plus utilisés.
Son utilisation permet aux navigateurs d’associer cet intitulé au champ de formulaire. Ainsi, un clic sur l’intitulé donnera le focus au champs de formulaire, ce qui est très pratique par exemple pour les boutons radio ou cases à cocher parfois trop petites pour certains utilisateurs.
Ce mécanisme est important également pour les lecteurs d’écran, qui ont besoin d'étiquettes explicites pour associer chaque champ de formulaire à un texte.
Les labels explicites
La syntaxe à utiliser est la suivante :
<label for="mon_id">Chercher:</label>
<input id="mon_id" type="text" />
L’élément label peut être séparé du champ de formulaire (ici un élément input de type text), ou bien il peut l’encadrer de la manière suivante:
<label for="mon_id">
Chercher:
<input id="mon_id" type="text" />
</label>
Dans tous les cas, pour que le label soit explicite, il faut utiliser les attributs for (sur l’élément label) et id (sur le champ de formulaire) avec la même valeur.
Les label peuvent aussi être utilisés sur les éléments select mais ne doivent pas être utilisés pour les éléments input de type submit, reset ou image, ou encore pour les éléments button. Ces derniers ont déjà une étiquette grâce aux attributs value ou alt. La valeur de ces derniers doit alors clairement indiquer la fonction du contrôle. Éviter les «OK» et autres «Pouët!».
Attention, l’attribut name des champs de formulaire possède un rôle différent, il permettra de recueillir la valeur du champ après validation du formulaire, par exemple en PHP. On peut tout à fait utiliser la même valeur pour les attributs id et name d’un élément input, select ou textarea. On peut aussi utiliser des valeurs différentes, comme dans l’exemple suivant:
<label for="form-message">Message:</label>
<textarea id="form-message" name="message"></textarea>
Les labels implicites (déconseillé!)
On parle de label implicite pour la syntaxe suivante:
<label>
Chercher:
<input type="text" />
</label>
Cette syntaxe est présentée dans la spécification HTML, mais elle présente un défaut majeur: comme elle n’utilise pas les attributs for et id, les navigateurs n’associent pas bien l’intitulé au champ de formulaire. Cela posera problème aux lecteurs d’écran notamment.