HTML <label> Tag
Exemple
Trois boutons radio avec des étiquettes :
<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> Définition et Utilisation
La balise <label> définit une étiquette pour plusieurs éléments :
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="month">
- <input type="number">
- <input type="password">
- <input type="radio">
- <input type="range">
- <input type="search">
- <input type="tel">
- <input type="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <meter>
- <progress>
- <select>
- <textarea>
L'utilisation appropriée des étiquettes avec les éléments ci-dessus bénéficiera :
- Aux utilisateurs de lecteurs d'écran (l'étiquette sera lue à haute voix lorsque l'utilisateur est concentré sur l'élément)
- Aux utilisateurs ayant des difficultés à cliquer sur des zones très petites (comme les cases à cocher) - car lorsque l'utilisateur clique sur le texte à l'intérieur de l'élément
<label>, cela active l'entrée (ce qui augmente la zone cliquable).
Conseils et Remarques
Conseil : L'attribut for de <label> doit être égal à l'attribut id de l'élément associé pour les lier ensemble. Une étiquette peut également être liée à un élément en plaçant l'élément à l'intérieur de la balise <label> .
Support des Navigateurs
| Élément | |||||
|---|---|---|---|---|---|
| <label> | Oui | Oui | Oui | Oui | Oui |
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| for | element_id | Spécifie l'id de l'élément de formulaire auquel l'étiquette doit être liée |
| form | form_id | Spécifie à quel formulaire l'étiquette appartient |
Attributs Globaux
La balise <label> prend également en charge les Attributs Globaux en HTML .
Attributs d'Événement
La balise <label> prend également en charge les Attributs d'Événement en HTML .
Pages Associées
Référence HTML DOM : Objet Label
Paramètres CSS par Défaut
La plupart des navigateurs afficheront l'élément <label> avec les valeurs par défaut suivantes :
Exemple
label {
cursor: default;
}