L’élément label permet de donner un intitulé à un champ de formulaire (par exemple un input de type text, ou un textarea).

Cela 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.

Ce mécanisme est important également pour les lecteurs d’écran, qui ont besoin de labels 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 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. (Mais celle-ci doit alors clairement indiquer la fonction du contrôle. Éviter les «OK» et autres «Pouët!».)

Une note sur l’attribut name des champs de formulaire: 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.

À éviter!