<label> : l'élément de libellé

Exemple interactif

<div class="preference">
  <label for="cheese">Aimez-vous le fromage&nbsp;?</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

<div class="preference">
  <label for="peas">Aimez-vous les petits pois&nbsp;?</label>
  <input type="checkbox" name="peas" id="peas" />
</div>

.preference {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin: 0.5rem;
}

Attributs

Cet élément inclut les attributs universels.

for

La valeur correspond à l'identifiant du contrôle de formulaire étiquetable dans le même document, associant le <label> à ce contrôle de formulaire. Notez que sa propriété de réflexion JavaScript est htmlFor.

Notes d'utilisation

Associer un libellé à un contrôle de formulaire

Le premier élément du document avec un attribut id correspondant à la valeur de l'attribut for est le contrôle étiqueté pour cet élément label — si l'élément avec cet id est effectivement un élément étiquetable. S'il ne s'agit pas d'un élément étiquetable, alors l'attribut for n'a aucun effet. Si d'autres éléments correspondent aussi à la valeur de l'id plus loin dans le document, ils ne sont pas pris en compte.

Plusieurs éléments <label> peuvent être associés au même contrôle de formulaire en ayant plusieurs éléments <label> avec la même valeur d'attribut for, ce qui donne au contrôle de formulaire plusieurs étiquettes.

Associer un <label> à un contrôle de formulaire, comme <input> ou <textarea>, présente des avantages majeurs :

• Le texte du libellé n'est pas seulement associé visuellement à son champ de saisie correspondant ; il est aussi associé de façon programmatique. Cela signifie, par exemple, qu'un lecteur d'écran lira le libellé quand l'utilisateur·ice sélectionne le champ de saisie, ce qui facilite la compréhension des données à saisir pour une personne utilisant une technologie d'assistance.
• Lorsqu'un·e utilisateur·ice clique ou touche un libellé, le navigateur passe la sélection à son champ associé (l'évènement résultant est aussi déclenché pour le champ). Cette zone de sélection élargie offre un avantage à toute personne souhaitant l'activer, y compris celles utilisant un appareil à écran tactile.

Il existe deux façons d'associer un <label> à un contrôle de formulaire, appelées association explicite et implicite.

Pour associer explicitement un élément <label> à un élément <input>, il faut d'abord ajouter l'attribut id à l'élément <input>. Ensuite, il faut ajouter l'attribut for à l'élément <label>, où la valeur de for est la même que celle de l'attribut id de l'élément <input>.

<label for="peas">J'aime les petits pois.</label>
<input type="checkbox" name="peas" id="peas" />

On peut aussi imbriquer directement l'élément <input> dans l'élément <label>, auquel cas les attributs for et id ne sont pas nécessaires car l'association est implicite :

<label>
  J'aime les petits pois.
  <input type="checkbox" name="peas" />
</label>

Ces deux méthodes sont équivalentes, mais il existe quelques points à considérer :

• Bien que les combinaisons courantes de navigateurs et de lecteur d'écran prennent en charge l'association implicite, toutes les technologies d'assistance ne le font pas.
• Selon votre conception, le type d'association peut avoir un impact sur la mise en forme. Faire des éléments <label> et du contrôle de formulaire des éléments placés côte à côte plutôt que parent-enfant signifie qu'ils sont séparés, ce qui permet une mise en page plus personnalisable, par exemple en les alignant avec des méthodes de grille ou de flex.
• L'association explicite exige que le contrôle de formulaire ait un attribut id, qui doit être unique dans tout le document. Cela peut être difficile, surtout dans une application composée de composants. Les frameworks proposent souvent leurs propres solutions, comme useId() de React, mais cela nécessite tout de même une orchestration supplémentaire pour bien fonctionner.

En général, il est recommandé d'utiliser l'association explicite avec l'attribut for afin d'assurer la compatibilité avec les outils externes et les technologies d'assistance. En fait, il est possible d'imbriquer et de fournir id/for simultanément pour une compatibilité maximale.

Le contrôle de formulaire auquel un libellé est associé est appelé le contrôle étiqueté de l'élément libellé. Plusieurs libellés peuvent être associés au même contrôle de formulaire :

<label for="username">Saisissez votre nom d'utilisateur·ice&nbsp;:</label>
<input id="username" name="username" type="text" />
<label for="username">Nom d'utilisateur·ice oublié&nbsp;?</label>

Les éléments pouvant être associés à un élément <label> incluent <button>, <input> (sauf pour type="hidden"), <meter>, <output>, <progress>, <select> et <textarea>.

Accessibilité

Contenu interactif

À l'exception du contrôle de formulaire associé implicitement, il ne faut pas placer d'autres éléments interactifs comme les ancres ou boutons à l'intérieur d'un <label>. Cela rend difficile l'activation du champ de formulaire associé au libellé.

À ne pas faire :

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  J'accepte <a href="terms-and-conditions.html">les conditions d'utilisation</a>
</label>

À privilégier :

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  J'accepte les conditions d'utilisation
</label>
<p>
  <a href="terms-and-conditions.html">Lire les conditions d'utilisation</a>
</p>

Titres

Placer des éléments de titres à l'intérieur d'un élément label causera des interférences avec de nombreux outils d'assistance car les titres sont généralement utilisés comme une aide à la navigation. Si le texte du libellé doit être ajusté visuellement, utilisez des classes CSS appliquées à l'élément <label>.

Si un formulaire, ou une section de formulaire, a besoin d'un titre, utilisez l'élément <legend> placé dans un <fieldset>.

À ne pas faire :

<label for="votre-nom">
  <h3>Votre nom</h3>
  <input id="votre-nom" name="votre-nom" type="text" />
</label>

À privilégier :

<label class="label-grand" for="votre-nom">
  Votre nom
  <input id="votre-nom" name="votre-nom" type="text" />
</label>

Boutons

Un élément <input> avec type="button" et un attribut value valide ne nécessite pas l'ajout d'un libellé. Rajouter un libellé inutile pourra créer des interférences avec les outils d'assistance. Il en va de même pour l'élément <button>.

Exemples

Définir un libellé implicite

<label>Cliquez ici <input type="text" /></label>

Définir un libellé explicite avec l'attribut for

<label for="nom-utilisateur">Cliquez ici</label>
<input type="text" id="nom-utilisateur" />

Résumé technique

Spécifications

Compatibilité des navigateurs