Balise HTML <label>

Définition et utilisation

<label> L'étiquette définit une annotation (marque) pour l'élément input.

L'élément label ne présente aucun effet spécial pour l'utilisateur. Cependant, il améliore l'accessibilité pour les utilisateurs de souris. Si vous cliquez sur le texte à l'intérieur de l'élément label, cela déclenche ce contrôle. Autrement dit, lorsque l'utilisateur sélectionne cette étiquette, le navigateur transfère automatiquement le focus vers le contrôle de formulaire lié à l'étiquette.

<label> L'étiquette Attribut for Doit être le même que l'attribut id de l'élément pertinent.

<label> L'étiquette peut définir des étiquettes (marques) pour plusieurs éléments :

L'utilisation correcte des éléments ci-dessus avec l'étiquette sera bénéfique pour les utilisateurs suivants :

  • Utilisateur de lecteur d'écran (lorsque l'utilisateur se concentre sur un élément, il lit l'étiquette)
  • Il est difficile pour les utilisateurs de cliquer sur des zones très petites (par exemple, les cases à cocher) - car lorsque l'utilisateur clique <label> Lorsque le texte est dans un élément, il bascule l'entrée (ce qui augmente la zone de clic)

Voir également :

Manuel de référence HTML DOM :Objet Label

Exemple

Trois boutons radio avec label :

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Soumettre">
</form>

Essayez-le vous-même

Avis et commentaires

Avis :<label> L'attribut for doit être égal à l'attribut id de l'élément pertinent pour les lier ensemble. Cela peut également être fait en plaçant l'élément dans <label> L'élément lie le label à l'élément interne.

Attribut

Attribut Valeur Description
for ID de l'élément Définit à quel élément de formulaire le label est lié.
form ID du formulaire Définit le champ du formulaire auquel appartient le champ label.

Attributs globaux

<label> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs d'événement

<label> Les balises prennent également en charge Attributs d'événement dans HTML.

Réglages CSS par défaut

La plupart des navigateurs utiliseront les valeurs suivantes par défaut pour afficher <label> Élément :

label {
  cursor: default;
}

Essayez-le vous-même

Support du navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support