L'élément HTML <label> représente une légende pour un objet d'une interface utilisateur. Il peut être associé à un contrôle en utilisant l'attribut for ou en plaçant l'élément du contrôle à l'intérieur de l'élément <label>. Un tel contrôle est appelé contrôle étiqueté par l'élément <label>.

Dans les exemples précédents, on peut voir deux champs dans un formulaire. Le premier champ n'est pas rattaché à un élément <label> alors que le second possède un élément <label> associé. On voit avec ce deuxième éléments les différents avantages offerts :

  • Le texte du libellé n'est pas seulement associé visuellement au champ, il est techniquement associé avec le champ. Ainsi, lorsque l'utilisateur a le focus sur le champ, un lecteur d'écran pourra énoncer le contenu du libellé et permettre à l'utilisateur de disposer d'un meilleur contexte.
  • Il est possible de cliquer sur le libellé pour passer le focus voire activer le champ. De cette façon, on dispose d'une meilleure ergonomie car la surface d'utilisation du champ est agrandie.

Pour associer un élément <label> avec un élément <input>, il faut fournir un identifiant à l'élément <input> sous la forme d'un attribut id. Ensuite, on peut renseigner l'attribut for de l'élément <label> avec la valeur de cet identifiant.

On peut également créer un lien implicite en imbriquant l'élément <input> directement au sein d'un élément <label> . Dans ce cas, les attributs for et id ne sont plus nécessaires.

<label>Aimez-vous les petits pois ?
  <input type="checkbox" name="petits_pois">
</label>

Attributs

Cet élément inclut les attributs universels.

for
L'identifiant (la valeur de l'attribut id) de l'élément de formulaire associé, appartenant au même document que l'élément label. Le premier élément du document dont l'identifiant correspond est alors le contrôle étiqueté par l'élément.
Note : Un élément label peut simultanément avoir un attribut for et contenir un élément de contrôle tant que l'attribut for pointe vers l'élément contenu.
form
L'élément de formulaire auquel l'élément label est associé (son formulaire propriétaire). La valeur de cet attribut doit être l'identifiant d'un élément <form> contenu au sein du même document. Si l'attribut n'est pas renseigné, cet élément <label> doit être le descendant d'un élément <form>. Cet attribut permet de placer des éléments label dans le document sans qu'ils soient nécessairement imbriqués dans un formulaire.
Note : La spécification HTML a été mise à jour le 28 avril 2016 afin de déprécier l'attribut form. Celui-ci est toujours disponible dans les scripts mais sa définition a changé, il renvoie désormais le contrôle associé au formulaire ou null s'il n'y a pas de contrôle associé (autrement dit si HTMLLabelElement.control vaut null).

Notes d'utilisation

  • Un élément <label> peut être associé à un contrôle en plaçant l'élément du contrôle dans l'élément <label> ou en utilisant l'attribut for. Un tel contrôle sera appelé le contrôle étiqueté par l'élément <label>. Un contrôle peut être associé à plusieurs <label>.
  • Les étiquettes ne sont pas directement associées aux formulaires. Elles le sont indirectement via le contrôle auquel elles sont rattachées.
  • Lorsqu'on clique ou touche un élément <label> et que celui-ci est associé à un contrôle d'un formulaire, l'évènement click est également déclenché pour le contrôle.

Mise en forme avec CSS

Il n'existe pas de spécificité relative à la mise en forme des éléments <label>. Par défaut, ce sont des éléments inline et ils peuvent être mis en forme de la même façon que <span> et <a>.

Exemples

Exemple simple

HTML

<label>Cliquez ici<input type="text" id="Utilisateur" name="Nom" /></label>

Résultat

Utiliser l'attribut for

HTML

<label for="Utilisateur">Cliquez ici</label>
<input type="text" id="Utilisateur" name="Nom" />

Résultat

Accessibilité

Contenu interactif

Il ne faut pas placer d'éléments interactifs (tels que les ancres (<a>) ou les boutons (<button>)) dans un élément label sinon il sera difficile d'activer le contrôle associé à ce libellé.

Mauvaise pratique

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

Bonne pratique

<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, on utilisera une mise en forme via CSS.

S'il faut associer un titre à un formulaire ou à une section d'un formulaire, on utilisera l'élément <legend> au sein d'un élément <fieldset>.

Mauvaise pratique

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

Bonne pratique

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

Résumé technique

Catégories de contenu Contenu de flux, contenu phrasé, contenu associé aux formulaires (listed, submittable, resettable), contenu tangible, contenu interactif.
Contenu autorisé Contenu phrasé sans éléments label descendants. À l'exception du contrôle lié à la légende, pas d'autres éléments pouvant contenir un élément label.
Omission de balise Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément acceptant du contenu phrasé.
Rôles ARIA autorisés Aucun.
Interface DOM HTMLLabelElement

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<label>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<label>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<label>' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
forChrome Support complet OuiEdge Support complet OuiFirefox Support complet OuiIE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet OuiOpera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui
form
Obsolète
Chrome Support complet OuiEdge Support complet OuiFirefox Aucun support ? — 49IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Aucun support ? — 49Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Oui

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.
Obsolète. Les nouveaux sites web ne doivent pas utiliser cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : colindefais, SphinxKnight, marie-ototoi, tregagnon, teoli
Dernière mise à jour par : colindefais,