Balise HTML <label>
La balise <label> définit un libellé textuel pour la balise <input>. Cliquer sur le libellé permet de mettre le focus ou d'activer l'élément de formulaire associé. Cela améliore l'utilisabilité des formulaires, car il n'est pas toujours pratique de cibler précisément de petits contrôles de formulaire avec un curseur.
La balise <label> est également utilisée pour définir des raccourcis clavier permettant de mettre le focus sur l'élément associé.
Un champ de saisie peut être associé à plusieurs libellés. Si vous cliquez ou touchez un <label> associé à un contrôle de formulaire, l'événement de clic résultant sera déclenché pour ce contrôle associé.
Associer un <label> à un élément <input> présente plusieurs avantages :
- Le texte du libellé est associé visuellement et programmatiquement au champ de saisie.
- Vous pouvez cliquer sur le libellé associé pour mettre le focus ou activer le champ de saisie, tout comme sur le champ lui-même.
Syntaxe
La balise <label> s'utilise par paires. Le contenu est écrit entre la balise d'ouverture (<label>) et la balise de fermeture (<​/label>).
Il existe deux façons d'associer un libellé textuel au contrôle de formulaire auquel il appartient :
- Définir l'identifiant (
id) à l'intérieur de l'élément<input>et spécifier son nom en tant qu'attributforpour la balise<label>.
Exemple de la balise HTML <label> :
Exemple de balise HTML <label>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="lfname">First name:</label>
<input id="lfname" name="fname" type="text" />
</form>
</body>
</html>Résultat
- Insérer l'élément
<input>dans la balise<label>. Remarque : Il est généralement préférable de placer l'input à l'intérieur du label pour des raisons d'accessibilité et de simplicité du code.
Exemple de la balise HTML <label> avec un élément <input> à l'intérieur :
Exemple de balise HTML <label> incluant une balise HTML <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label>Name
<input id="User" name="Name" type="text" />
</label>
</form>
</body>
</html>Exemple de HTML <form> avec une balise <label> utilisée avec le type radio d'une balise <input> :
Exemple de balise HTML <label> avec le type radio de la balise HTML <input>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label for="barca">Barcelona</label>
<input type="radio" name="team" id="barca" value="Barcelona" />
<br />
<label for="real">Real Madrid</label>
<input type="radio" name="team" id="real" value="Real Madrid" />
<br />
</form>
</body>
</html>Exemple de la balise HTML <label> avec les propriétés CSS font :
Exemple de balise HTML <label> avec les propriétés CSS font
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
padding: 20px;
}
label {
font-size: 20px;
font-weight: 700;
color: #1c87c9;
}
input {
width: 50%;
height: 28px;
padding: 4px 10px;
border: 1px solid #666;
background: #cce6ff;
color: #1c87c9;
font-size: 16px;
}
</style>
</head>
<body>
<form>
<label>Your Name:</label>
<input id="User" name="Name" type="text"/>
</form>
</body>
</html>Attributs
| Attribut | Valeur | Description |
|---|---|---|
accesskey | accesskey | Définit un raccourci clavier pour mettre le focus sur l'élément de formulaire associé (ne navigue pas vers celui-ci). |
for | element\_id | Définit l'ID de l'élément auquel le libellé doit être lié. |
form | form\_id | Spécifie le(s) formulaire(s) auquel(le) le libellé sera associé. Cet attribut permet de placer les balises à n'importe quel endroit du document, et pas seulement en tant qu'enfant de l'élément <form>. |
L'élément <label> prend également en charge les Attributs globaux et les Attributs d'événement.
Exemple de l'attribut form :
<form id="myForm">
<input type="text" name="username" />
</form>
<label for="username" form="myForm">Username:</label>Comment styliser une balise HTML <label>
{
"tag_name": "label"
}Pratique
Quelle est l'utilité de la balise HTML <label> ?