Labels (éléments de formulaire)

C’est quoi l’élément <label> ?

Dans un formulaire HTML chaque champ de saisie destiné à l'utilisateur doit être accompagné d'une étiquette informant l'objet de la saisie.

L’élément HTML <label> est un élément spécifique aux formulaires. Il va permettre de formuler un intitulé à un champ de formulaire, de créer des espaces de saisie de texte, de proposer des zones d’options aux utilisateurs, etc.

Ainsi, un formulaire HTML sera constitué :

• d’un contenu
• d’un balisage d’éléments appelé commandes (cases à cocher, bouton radio, les saisies de texte, les commandes d’objets, etc.)
• d’un label sur ces commandes

Pourquoi c’est important ?

Les labels sont nécessaires :

• pour l'utilisateur du fait de leur utilisation par les assistants de lecture
• pour les lecteurs d’écran, qui ont besoin d’étiquettes définies pour associer chaque champ de formulaire à un texte

Comment structurer l’élément <label> ?

L’élément label peut être associé à un contrôle via l’attribut "for". Il s’agit d’un contrôle étiqueté par l’élément label. L'attribut "for" fait référence à l'attribut "id" de l'élément du formulaire. En d'autres termes, il faut fournir un identifiant (l'attribut "id") à un élément <input> pour pouvoir associer l'input à élément <label>. On renseigne ensuite l'attribut "for"avec la valeur de l'identifiant.

Enfin, il est possible d’inclure directement un élément <input> dans un élément <label>.
Par exemple :

<div>
    <label for="user_email">Email</label>
    <input type="email" name="email" id="user_email">
</div>

Ce qui va permettre d’obtenir une meilleure ergonomie lorsqu’on clique sur le libellé pour activer le champ. Cette pratique est utilisée pour adapter le contenu aux petits écrans.