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>.
<label>
for
Rattacher un libellé à un élément de saisie ({{HTMLElement("input")}}) offre différents avantages :
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.
<input>
id
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>
Cet élément inclut les attributs universels.
null
click
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 {{HTMLElement("span")}} et {{HTMLElement("a")}}.
<label>Cliquez ici<input type="text" id="Utilisateur" name="Nom" /></label>
{{EmbedLiveSample('Exemple_simple', '200', '50', '')}}
<label for="Utilisateur">Cliquez ici</label> <input type="text" id="Utilisateur" name="Nom" />
{{EmbedLiveSample("Utiliser_l’attribut_for", '200', '50', '')}}
Il ne faut pas placer d'éléments interactifs (tels que les ancres ({{HTMLElement("a")}}) ou les boutons ({{HTMLElement("button")}})) dans un élément label sinon il sera difficile d'activer le contrôle associé à ce libellé.
label
<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>
<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>
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 {{HTMLElement("legend")}} au sein d'un élément {{HTMLElement("fieldset")}}.
<label for="votre-nom"> <h3>Votre nom</h3> <input id="votre-nom" name="votre-nom" type="text"> </label>
<label class="label-grand" for="votre-nom"> Votre nom <input id="votre-nom" name="votre-nom" type="text"> </label>
Un élément {{HTMLElement("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 {{HTMLElement("button")}}.
type="button"
value
{{Compat("html.elements.label")}}