Ausführbare HTML-Docs: HTML Label

Q: Was ist das for-Attribut bei einem Label?

for enthält die id des Feldes, zu dem das Label gehört: Email . Es muss exakt zur id passen, nicht zum name.

Q: Wie verstecke ich ein Label, behalte es aber für Screenreader?

Behalte das und versteck es optisch mit einer Klasse, die es auf 1 Pixel verkleinert und abschneidet, statt mit display: none, das es auch vor Screenreadern versteckt. Für ein Feld ohne Platz für ein Label ist aria-label am Feld die Alternative.

Was das label-Element macht

<label> gibt einem Formularfeld seinen Namen. Verbinde es über for mit der id des Feldes, und zwei Dinge passieren: Screenreader sagen das Label an, wenn das Feld fokussiert wird, und ein Klick auf den Labeltext fokussiert das Feld. Klick beide Texte unten an:

<!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>

Ein Klick auf „City“ setzt den Cursor in sein Feld. Ein Klick auf „Country“ bewirkt nichts, und ein Screenreader, der das zweite Feld fokussiert, sagt nur „Eingabefeld“ an, ohne Namen. Die beiden sehen identisch aus; nur eines ist beschriftet.

Zwei Wege, ein Label zu verbinden

Nimm for und id oder setz das Feld in das 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` und `id`	Umschließen
Braucht eine `id`	Ja, eindeutig auf der Seite	Nein
Label und Feld können getrennt stehen	Ja (eine Tabellenzelle, ein Grid)	Nein, das Feld steht darin
Leicht kaputt zu machen	Durch einen Tippfehler oder eine doppelte `id`	Durch zwei Felder in einem Label

for muss zur id des Feldes passen, nicht zu seinem name. Oft sind beide dasselbe Wort, was den Fehler verbirgt, bis jemand eines davon ändert. Beides zu machen (umschließen und for) ist in Ordnung und verbreitet.

Ein Label kann mit <input> (außer type="hidden"), <select>, <textarea>, <button>, <meter>, <output> und <progress> verbunden werden. Ein Label benennt ein Feld. Ein Feld kann mehr als ein Label haben, aber ein einziges klares Label ist für alle einfacher.

Eine größere Klickfläche für Checkboxen und Radio Buttons

Bei kleinen Bedienelementen zählt das Label am meisten: Ein Klick irgendwo darauf schaltet das Kästchen um, die Klickfläche ist also die ganze Textzeile und kein 13 Pixel großes Quadrat. Mit Styling am Label wird die Fläche noch größer:

<!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>

Klick in den Innenabstand jeder Zeile, abseits des Kästchens. Die erste Zeile schaltet um; die zweite bewirkt nichts, solange du nicht das Kästchen selbst triffst. Mehr zu Checkboxen unter HTML Checkbox.

Hinweise und Fehlermeldungen

Ein Label sollte kurz sein: der Name des Feldes. Zusätzliche Anweisungen und Fehlermeldungen kommen in eigene Elemente, verbunden über aria-describedby, damit Screenreader zuerst das Label und danach die Beschreibung vorlesen:

<!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>

Drück auf Create mit leerem Feld, dann mit AB, dann mit ada99. Mit aria-describedby sagt ein Screenreader etwa „Username, erforderlich, Eingabefeld, 3 to 16 lowercase letters or digits, Enter a username.“ an. Das Sternchen ist aria-hidden, weil das Attribut required schon „erforderlich“ sagt; „Stern“ zu hören bringt nichts.

Versteckte Labels

Manche Felder haben einen anderen sichtbaren Hinweis als ein Textlabel, etwa ein Suchfeld neben einem Search-Button. Das Label wird trotzdem gebraucht; versteck es optisch, aber lass es für Screenreader auf der Seite:

<!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>

Versteck es nicht mit display: none oder visibility: hidden: Die verstecken es auch vor Screenreadern, und nicht jeder Browser und Screenreader verwendet ein verstecktes Label noch als Namen. Die andere Möglichkeit ist aria-label="Search courses" am Input, das es ganz ohne label-Element benennt. Ein sichtbares Label bleibt die beste Wahl, wo immer Platz ist: Allen hilft es, zu sehen, wofür ein Feld da ist.

Häufige Fehler

for zeigt auf den name statt auf die id. Nichts wird verbunden.
Doppelte ids. for verbindet sich mit dem ersten Element mit dieser id, und das kann ein Feld in einem anderen Formular auf der Seite sein.
Platzhalter statt Label. Er verschwindet beim Tippen und ist kein zuverlässiger Name.
Zwei Felder in einem Label. Ein Label benennt ein Feld; das zweite bleibt unbeschriftet.
Ein Link im Label einer Checkbox, etwa „I accept the terms“ mit „terms“ als Link. Ein Teil der Zeile schaltet das Kästchen um, ein anderer öffnet eine Seite, und man trifft leicht das Falsche. Setz den Link außerhalb des Labels.
Das Label mit display: none verstecken. Nimm eine Klasse, die es nur optisch versteckt.
Text neben einem Feld, der kein <label> ist. Er sieht gleich aus und bewirkt nichts. Das Formular um deine Felder erklärt die Seite zum HTML Formular.

Häufig gestellte Fragen

Was macht das label-Tag in HTML?

Es gibt einem Formularfeld einen Namen. Screenreader lesen das Label vor, wenn das Feld fokussiert wird, und ein Klick auf das Label fokussiert das Feld oder schaltet es bei einer Checkbox oder einem Radio Button um.

Was ist das for-Attribut bei einem Label?

for enthält die id des Feldes, zu dem das Label gehört: <label for="email">Email</label> <input id="email">. Es muss exakt zur id passen, nicht zum name.

Soll ich das Input ins Label setzen oder for verwenden?

Beides funktioniert in aktuellen Browsern und Screenreadern. Umschließen braucht keine ids; mit for und id können Label und Feld an verschiedenen Stellen im Markup stehen, etwa in getrennten Tabellenzellen. Viele Teams umschließen und setzen zusätzlich for.

Kann ein Platzhalter ein Label ersetzen?

Nein. Der Platzhalter verschwindet, sobald der Leser tippt, hat oft wenig Kontrast und wird nicht zuverlässig als Name des Feldes angesagt. Nimm ein sichtbares <label> und den Platzhalter, wenn überhaupt, für einen Beispielwert.

Wie verstecke ich ein Label, behalte es aber für Screenreader?

Behalte das <label> und versteck es optisch mit einer Klasse, die es auf 1 Pixel verkleinert und abschneidet, statt mit display: none, das es auch vor Screenreadern versteckt. Für ein Feld ohne Platz für ein Label ist aria-label am Feld die Alternative.

Verwandte Konzepte