7.1.1. Utiliser la balise <label> ainsi que les attributs for et id pour associer les champs à leurs intitulés

Chaque champ de formulaire doit être associé à un intitulé.

Pour cela, procéder de la sorte :

Utiliser <label> pour baliser chaque intitulé.
Ajouter un attribut for sur chaque balise <label> ainsi qu’un attribut id sur chaque champ.
Renseigner avec une valeur identique les attributs id et for de chaque couple intitulé/champ.

<label for="nom">Votre nom</label>
<input type="text" id="nom" name="nom" />
 
[…]
 
<label for="annee-naissance">Votre année de naissance</label>
<select id="annee-naissance" name="annee-naissance">
    <option value="2012">2012</option>
    <option value="2011">2011</option>
    <option value="2010">2010</option>
    <option value="2009">2009</option>
    […]
</select>

Remarque

Parfois, certains champs n’ont pas d’intitulé visible. Dans cette situation, utiliser l’attribut title pour associer tout de même un intitulé au champ.

<input type="text" title="Votre recherche" name="recherche" />

À noter que l’attribut title ne doit jamais être utilisé si le couple d’attributs for et id est déjà en place pour associer un intitulé à un champ.

Attention

Il est important de prévoir des intitulés identiques pour les champs dont la fonction est identique.

Par exemple, si plusieurs formulaires d’identification sont présents dans le site, ne pas utiliser l’intitulé “Identifiant” pour l’un et “Login” pour l’autre.

Recommandations associées

Recommandation précédente : 6.3.1. Signaler l'ouverture des nouvelles fenêtres
Recommandation suivante : 7.1.2. Intégrer les informations utiles à la saisie directement dans les balises <label>