Docs HTML exécutables : Label HTML

Q: Qu'est-ce que l'attribut for d'un label ?

for contient l'id du champ auquel appartient le label : Email . Il doit correspondre exactement à l'id, pas au name.

Q: Comment masquer un label tout en le gardant pour les lecteurs d'écran ?

Gardez le et masquez-le visuellement avec une classe qui le réduit à 1 pixel et le rogne, plutôt qu'avec display: none, qui le cache aussi aux lecteurs d'écran. Pour un champ sans place pour aucun label, aria-label sur le champ est l'alternative.

Le rôle de l'élément label

<label> donne son nom à un champ de formulaire. Reliez-le avec for, qui prend l'id du champ, et deux choses se produisent : les lecteurs d'écran annoncent le label quand le champ reçoit le focus, et un clic sur le texte du label met le focus sur le champ. Cliquez sur les deux textes ci-dessous :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Label</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { margin: 0 0 12px; }
  </style>
</head>
<body>
  <p>
    <label for="city">City (a label)</label>
    <input id="city" name="city">
  </p>
  <p>
    <span>Country (plain text)</span>
    <input name="country">
  </p>
</body>
</html>

Cliquer sur « City » place le curseur dans son champ. Cliquer sur « Country » ne fait rien, et un lecteur d'écran qui arrive sur ce second champ n'entend que « zone de texte », sans nom. Les deux se ressemblent ; un seul a un label.

Deux façons de relier un label

Utilisez for et id, ou placez le champ dans le label :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>for vs wrapping</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { margin-bottom: 12px; }
    label { font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <!-- 1. for + id: label and field can be anywhere -->
    <div class="row">
      <label for="email">Email</label><br>
      <input type="email" id="email" name="email">
    </div>

    <!-- 2. wrapping: no id needed -->
    <div class="row">
      <label>Phone <input type="tel" name="phone"></label>
    </div>

    <button type="submit">Save</button>
  </form>
</body>
</html>

	`for` et `id`	Entourer
Demande un `id`	Oui, unique sur la page	Non
Label et champ peuvent être séparés	Oui (une cellule de tableau, une grille)	Non, le champ est à l'intérieur
Facile à casser	Par une faute de frappe ou un `id` en double	En mettant deux champs dans un label

for doit correspondre à l'id du champ, pas à son name. Les deux sont souvent le même mot, ce qui masque l'erreur jusqu'à ce que quelqu'un change l'un d'eux. Faire les deux (entourer et for) ne pose aucun problème et c'est courant.

Un label peut être relié à <input> (sauf type="hidden"), <select>, <textarea>, <button>, <meter>, <output> et <progress>. Un label nomme un seul champ. Un champ peut avoir plusieurs labels, mais un seul label clair est plus simple pour tout le monde.

Une zone de clic plus grande pour les cases à cocher et les radios

C'est pour les petits contrôles que le label compte le plus : cliquer n'importe où dessus fait basculer la case, donc la cible est toute la ligne de texte, pas un carré de 13 pixels. Styliser le label peut agrandir encore la cible :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click target</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .option {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 320px;
      padding: 12px;
      margin-bottom: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      cursor: pointer;
    }
    .option:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <form>
    <label class="option">
      <input type="checkbox" name="alerts" value="email"> Email me about new courses
    </label>
    <span class="option">
      <input type="checkbox" name="alerts" value="sms"> Not a label: only the box works
    </span>
    <button type="submit">Save</button>
  </form>
</body>
</html>

Cliquez dans le padding de chaque ligne, loin de la case. La première ligne bascule ; la seconde ne fait rien si vous ne touchez pas la case elle-même. Plus de détails dans case à cocher HTML.

Indications et messages d'erreur

Un label doit être court : le nom du champ. Les instructions supplémentaires et les messages d'erreur vont dans des éléments séparés, reliés avec aria-describedby, pour que les lecteurs d'écran lisent d'abord le label puis la description :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hints and errors</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; font-weight: 600; }
    .hint { display: block; color: #4b5563; font-size: 14px; margin: 2px 0 6px; }
    .error { color: #b91c1c; font-size: 14px; margin: 4px 0 0; }
    input { font: inherit; padding: 4px 8px; }
    .req { color: #b91c1c; }
  </style>
</head>
<body>
  <form novalidate>
    <label for="user">Username <span class="req" aria-hidden="true">*</span></label>
    <span class="hint" id="user-hint">3 to 16 lowercase letters or digits</span>
    <input id="user" name="username" required pattern="[a-z0-9]{3,16}"
      aria-describedby="user-hint user-error">
    <p class="error" id="user-error"></p>
    <button type="submit">Create</button>
  </form>

  <script>
    const form = document.querySelector('form');
    const user = document.querySelector('#user');
    form.addEventListener('submit', (event) => {
      const error = document.querySelector('#user-error');
      if (!user.checkValidity()) {
        event.preventDefault();
        error.textContent = user.value ? 'Use 3 to 16 lowercase letters or digits.' : 'Enter a username.';
        user.setAttribute('aria-invalid', 'true');
        user.focus();
      } else {
        error.textContent = '';
        user.removeAttribute('aria-invalid');
      }
    });
  </script>
</body>
</html>

Appuyez sur Create avec le champ vide, puis avec AB, puis avec ada99. Avec aria-describedby, un lecteur d'écran annonce quelque chose comme « Username, obligatoire, zone de texte, 3 to 16 lowercase letters or digits, Enter a username. » L'astérisque est en aria-hidden car l'attribut required dit déjà « obligatoire » ; entendre « astérisque » n'apporte rien.

Labels masqués

Certains champs ont un repère visible autre qu'un label texte, comme un champ de recherche à côté d'un bouton Search. Le label reste nécessaire ; masquez-le visuellement mais gardez-le dans la page pour les lecteurs d'écran :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden label</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    input, button { font: inherit; padding: 6px 10px; }
  </style>
</head>
<body>
  <form role="search">
    <label for="q" class="visually-hidden">Search courses</label>
    <input type="search" id="q" name="q" placeholder="e.g. Python">
    <button type="submit">Search</button>
  </form>
</body>
</html>

Ne le masquez pas avec display: none ni visibility: hidden : ils le cachent aussi aux lecteurs d'écran, et tous les navigateurs et lecteurs d'écran n'utilisent plus un label masqué comme nom. L'autre option est aria-label="Search courses" sur l'input, qui le nomme sans aucun élément label. Un label visible reste le meilleur choix dès qu'il y a de la place : tout le monde gagne à voir à quoi sert un champ.

Erreurs fréquentes

for qui pointe vers le name au lieu de l'id. Rien n'est relié.
Des id en double. for se relie au premier élément qui a cet id, qui peut être un champ d'un autre formulaire de la page.
Un placeholder au lieu d'un label. Il disparaît à la frappe et n'est pas un nom fiable.
Deux champs dans un seul label. Un label nomme un seul champ ; le second reste sans label.
Un lien dans le label d'une case à cocher, comme « J'accepte les conditions » avec « conditions » en lien. Une partie de la ligne fait basculer la case et une autre ouvre une page, ce qui provoque facilement des erreurs. Placez le lien hors du label.
Masquer le label avec display: none. Utilisez une classe de masquage visuel.
Un texte à côté d'un champ qui n'est pas un <label>. Il a la même apparence et ne fait rien. Pour le formulaire autour de vos champs, voir formulaire HTML.

Questions fréquentes

À quoi sert la balise label en HTML ?

Elle nomme un champ de formulaire. Les lecteurs d'écran lisent le label quand le champ reçoit le focus, et un clic sur le label met le focus sur le champ, ou le fait basculer pour une case à cocher ou un bouton radio.

Qu'est-ce que l'attribut for d'un label ?

for contient l'id du champ auquel appartient le label : <label for="email">Email</label> <input id="email">. Il doit correspondre exactement à l'id, pas au name.

Faut-il mettre l'input dans le label ou utiliser for ?

Les deux fonctionnent dans les navigateurs et lecteurs d'écran actuels. Entourer le champ ne demande aucun id ; for et id permettent au label et au champ d'être à des endroits différents du balisage, comme des cellules de tableau distinctes. Beaucoup d'équipes entourent le champ et ajoutent aussi for.

Un placeholder peut-il remplacer un label ?

Non. Le placeholder disparaît dès que le lecteur tape, a souvent un faible contraste et n'est pas annoncé de façon fiable comme nom du champ. Utilisez un <label> visible et réservez le placeholder à un exemple de valeur, si besoin.

Comment masquer un label tout en le gardant pour les lecteurs d'écran ?

Gardez le <label> et masquez-le visuellement avec une classe qui le réduit à 1 pixel et le rogne, plutôt qu'avec display: none, qui le cache aussi aux lecteurs d'écran. Pour un champ sans place pour aucun label, aria-label sur le champ est l'alternative.

Concepts liés