HTML label : relier for à id et agrandir la zone cliquable

HTML <label> associe le nom d’un contrôle de formulaire à son texte visible et aux technologies d’assistance. Connectez le for de l’étiquette à l’attribut id du contrôle, ou placez le contrôle à l’intérieur de l’étiquette. Cliquer sur le texte associé peut mettre le focus sur une entrée ou basculer une case à cocher.

Connecter les contrôles explicitement avec for et id

L'attribut for prend l’identifiant id du contrôle cible dans le même document, et non son name. Un id doit être unique dans le document, tandis que name identifie un champ dans les données soumises. Même si la mise en page sépare label et input, leur relation de nommage peut rester intacte lorsque for et id correspondent.

Enregistrez le document suivant sous labels.html et ouvrez-le dans un navigateur. L'entrée de texte utilise for ; la case à cocher utilise un label enveloppant. Il s'agit d'un exercice d'interface qui n'envoie pas de données à un serveur.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparer les associations de label</title>
</head>
<body>
  <h1>Noms des contrôles de formulaire</h1>
  <p>
    <label for="reader-name">Nom affiché</label>
    <input id="reader-name" name="reader" type="text"
           aria-describedby="name-help" placeholder="ex. : Ciel">
  </p>
  <p id="name-help">Saisissez le pseudonyme à afficher à l’écran.</p>
  <p>
    <label>
      <input type="checkbox" name="tips" value="yes">
      Recevoir des informations pour apprendre
    </label>
  </p>
</body>
</html>

1. Cliquez sur Nom affiché pour placer le curseur dans l'entrée. Après la saisie, le texte d'espace réservé disparaît, mais le label reste visible.
2. Cliquez sur le texte Recevoir des informations pour apprendre pour sélectionner la case à cocher, puis cliquez à nouveau pour la désélectionner. Il n'est pas nécessaire de viser précisément la petite case à cocher.
3. Utilisez Tab pour passer d'un contrôle à l'autre et Espace pour basculer la case à cocher, en vérifiant également l'interaction avec le clavier.

Les étiquettes englobantes et les descriptions complémentaires remplissent des rôles différents

Placer un input à l'intérieur d'un label crée une association implicite sans for. Incluez uniquement le contrôle associé dans un seul label et n’imbriquez pas un autre label à l'intérieur. Vous pouvez également utiliser id et for avec un label enveloppant, mais for doit faire référence au contrôle contenu. Une association explicite for/id mérite d'être envisagée pour la compatibilité avec les technologies d'assistance et les outils externes.

Le label est le nom qui indique aux lecteurs ce qu'il faut entrer. Mettez les instructions supplémentaires ou les messages d'erreur dans un paragraphe séparé et associez-les à aria-describedby. Dans l'exemple, Saisissez le pseudonyme à afficher à l’écran. complète le nom ; le placeholder n'est pas utilisé comme remplacement du label.

Lorsque l'association ou le clic ne fonctionne pas

Vérifiez les fautes de frappe et les différences de majuscules/minuscules dans for, les valeurs en double de id, et le type de l’élément cible. Pointer for vers un élément qui ne peut pas être étiqueté, comme un input hidden, ne le fera pas fonctionner comme un input normal. Les étiquettes fonctionnent également avec select et textarea ; nommez les groupes de choix liés avec fieldset et legend.

Mettre des liens ou des boutons séparés à l’intérieur d’une étiquette peut rendre flou le fait de savoir si cliquer doit naviguer ou sélectionner un contrôle. Placez les liens supplémentaires à l’extérieur et expliquez d’abord le contexte. Stylisez l’étiquette avec CSS plutôt que d’insérer un élément de titre simplement pour l’agrandir. Les règles et les contrôles pris en charge sont décrits dans la référence MDN de label.