La balise HTML <label>
Apprenez la balise HTML <label> : association explicite (for/id) et implicite, accessibilité, et exemples. Appris avec W3Docs.
La balise HTML <label> définit une légende pour un contrôle de formulaire tel qu'un <input>, un <select> ou un <textarea>. L'étiquette et le contrôle sont liés, ce qui permet au navigateur de savoir que le texte appartient à ce champ spécifique.
Cette page couvre les deux façons d'associer une étiquette à un contrôle, l'importance des étiquettes pour l'accessibilité et l'ergonomie, et comment <label> se compare aux attributs d'étiquetage ARIA et au placeholder.
Pourquoi les étiquettes sont importantes
Une étiquette n'est pas simplement du texte visible à côté d'un champ — elle est programmatiquement liée à un contrôle. Cette association offre trois avantages concrets :
- Accessibilité. Lorsque le contrôle reçoit le focus, un lecteur d'écran annonce son étiquette, permettant à l'utilisateur de savoir quoi saisir. Sans étiquette, le champ n'est annoncé que par son type (par exemple « zone de texte ») sans aucun contexte.
- Une zone de clic plus grande. Cliquer ou appuyer sur l'étiquette donne le focus (et pour les cases à cocher/boutons radio, bascule) au contrôle. Cela est particulièrement utile pour les petites cases à cocher et les boutons radio, dont la zone cliquable est difficile à atteindre précisément sur les écrans tactiles.
- Une meilleure ergonomie. Les utilisateurs comprennent instantanément quelle légende appartient à quel champ, ce qui réduit les erreurs de saisie.
Les deux façons d'associer une étiquette
Il existe deux façons de relier un <label> à son contrôle : l'association explicite avec l'attribut for, et l'association implicite en enveloppant le contrôle.
Association explicite (for + id)
Donnez au contrôle un id, puis définissez l'attribut for de l'étiquette avec cette même valeur. La valeur de for doit correspondre exactement à l'id du contrôle, et cet id doit exister dans le document.
<!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>L'étiquetage explicite est l'approche la plus flexible : l'étiquette et le contrôle peuvent se trouver n'importe où dans le balisage, ce qui est utile lorsque votre mise en page (par exemple un CSS Grid ou un tableau) sépare la légende du champ.
Association implicite (enveloppement du contrôle)
Placez le contrôle à l'intérieur de l'élément <label>. Aucune paire id/for n'est nécessaire — l'imbrication crée l'association automatiquement.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form>
<label>Name
<input name="Name" type="text" />
</label>
</form>
</body>
</html>Les deux méthodes produisent le même résultat. L'enveloppement est concis et garantit l'association même si vous oubliez un id ; le for explicite est le bon choix lorsque la structure du balisage sépare l'étiquette du contrôle.
Règles et pièges à éviter
- Un contrôle par étiquette. Un seul
<label>est associé à exactement un contrôle de formulaire. Si vous enveloppez deux champs dans une seule étiquette, seul le premier est associé. - Un contrôle peut avoir plusieurs étiquettes. Un même champ peut être référencé par plusieurs
<label for="...">; chacun donnera le focus ou basculera le contrôle au clic. fordoit pointer vers unidréel. Si la valeur deforne correspond pas à unidexistant, l'association échoue silencieusement — l'étiquette devient du texte ordinaire.- Seuls les contrôles de formulaire peuvent être étiquetés.
<label>peut légender<input>(sauftype="hidden"),<button>,<meter>,<output>,<progress>,<select>et<textarea>. Il ne labellise pas un<div>, un<span>ou un titre. - Évitez le contenu interactif à l'intérieur d'une étiquette. Ne placez pas un autre contrôle (un second champ, un bouton ou un lien) à l'intérieur d'un
<label>, car il entre en concurrence avec le contrôle étiqueté pour les clics.
Cases à cocher et boutons radio
Les étiquettes sont particulièrement importantes ici, car la zone cliquable est minuscule. Avec une étiquette appropriée, toute la légende fait partie de la zone de clic.
<!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>Étiqueter sans <label> visible : ARIA et placeholder
Parfois, une étiquette visible ne s'intègre pas dans la conception. Un <label> visible devrait rester votre choix par défaut — il bénéficie à tous les utilisateurs, pas seulement à ceux qui utilisent des lecteurs d'écran — mais les options suivantes existent pour les cas particuliers.
aria-label
Utilisez aria-label pour fournir un nom accessible directement sur le contrôle lorsqu'il n'y a pas de texte visible à référencer (par exemple, un champ de recherche avec uniquement une icône de loupe).
<input type="search" aria-label="Search the site" />aria-labelledby
Utilisez aria-labelledby lorsque le texte de dénomination existe déjà ailleurs sur la page. Il référence un ou plusieurs ids d'éléments et, contrairement à for, il vous permet de construire une étiquette à partir de plusieurs morceaux de texte.
<span id="billing">Billing</span>
<span id="name">Name</span>
<input type="text" aria-labelledby="billing name" />Lorsqu'un <label> et aria-labelledby sont tous deux présents, aria-labelledby a la priorité.
placeholder n'est pas une étiquette
Un placeholder est un exemple de texte, pas une étiquette. Il disparaît dès que l'utilisateur tape, offre un faible contraste de couleur dans la plupart des navigateurs, et n'est pas annoncé de manière fiable comme nom du champ par les technologies d'assistance. Associez toujours un champ à un vrai <label> — ne comptez jamais uniquement sur le placeholder.
<!-- Not accessible: no label, only a placeholder -->
<input type="email" placeholder="Email" />
<!-- Accessible: real label, placeholder is an optional hint -->
<label for="email">Email</label>
<input id="email" type="email" placeholder="[email protected]" />Exemple de la balise HTML <label> avec les propriétés de police CSS :
<!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 for="user">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 donner le focus à l'élément de formulaire associé (ne navigue pas vers lui). |
for | element\_id | Définit l'ID de l'élément auquel l'étiquette doit être liée. |
form | form\_id | Spécifie le ou les formulaires auxquels l'étiquette sera associée. Cet attribut vous permet de placer les balises à un emplacement arbitraire dans le document, et pas uniquement en tant que descendant de l'élément <form>. |
L'élément <label> prend également en charge les attributs globaux et les attributs d'événements.
Exemple de l'attribut form :
L'attribut form permet à l'étiquette de se trouver en dehors du <form> auquel elle appartient. Le contrôle utilise toujours l'association normale for/id.
<form id="myForm">
<input id="username" type="text" name="username" />
</form>
<label for="username" form="myForm">Username:</label>Sujets connexes
- La balise HTML
<input>— le contrôle le plus souvent étiqueté. - La balise HTML
<form>— le conteneur qui regroupe les étiquettes et les contrôles. - L'attribut HTML
id— comment le lienfor/idest construit.