Balise HTML <étiquette>
Exemple
Trois boutons radio avec libellés :
<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="Submit">
</form>
Définition et utilisation
La <label>balise définit un libellé pour plusieurs éléments :
- <type d'entrée="case à cocher">
- <type d'entrée="couleur">
- <type d'entrée="date">
- <input type="datetime-local">
- <type d'entrée="e-mail">
- <type d'entrée="fichier">
- <type d'entrée="mois">
- <type d'entrée="nombre">
- <type d'entrée="mot de passe">
- <type d'entrée="radio">
- <type d'entrée="plage">
- <type d'entrée="recherche">
- <type d'entrée="tel">
- <type d'entrée="texte">
- <type d'entrée="heure">
- <type d'entrée="url">
- <type d'entrée="semaine">
- <mètre>
- <progrès>
- <sélectionner>
- <zone de texte>
Une bonne utilisation des étiquettes avec les éléments ci-dessus bénéficiera :
- Utilisateurs de lecteurs d'écran (liront à haute voix l'étiquette, lorsque l'utilisateur se concentrera sur l'élément)
- Les utilisateurs qui ont des difficultés à cliquer sur de très petites régions (telles que des cases à cocher) - car lorsqu'un utilisateur clique sur le texte dans l'
<label>élément, il bascule l'entrée (cela augmente la zone d'accès).
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 l' <label>élément.
Prise en charge du navigateur
| Element | |||||
|---|---|---|---|---|---|
| <label> | Yes | Yes | Yes | Yes | Yes |
Les attributs
| Attribute | Value | Description |
|---|---|---|
| for | element_id | Specifies the id of the form element the label should be bound to |
| form | form_id | Specifies which form the label belongs to |
Attributs globaux
La <label>balise prend également en charge les attributs globaux en HTML .
Attributs d'événement
La <label>balise prend également en charge les attributs d'événement en HTML .
Pages connexes
Référence HTML DOM : Objet d'étiquette
Paramètres CSS par défaut
La plupart des navigateurs afficheront l' <label>élément avec les valeurs par défaut suivantes :
Exemple
label {
cursor: default;
}