<label>

Zuletzt aktualisiert am 3. Februar 2026

Das <label> Element erstellt eine Beschriftung für ein Formularelement und ist ein zentraler Baustein für zugängliche und benutzerfreundliche Formulare. Es verknüpft Text mit Eingabefeldern und vergrößert die klickbare Fläche, was besonders auf mobilen Geräten wichtig ist. Screenreader nutzen Labels, um Nutzern zu erklären, wofür ein Eingabefeld gedacht ist.

Grundlagen

Labels können auf zwei Arten mit Formularelementen verknüpft werden:

Explizite Verknüpfung: Das for-Attribut des Labels verweist auf die id des zugehörigen Eingabefelds. Diese Methode ist flexibler, weil Label und Input nicht direkt nebeneinander stehen müssen.

Implizite Verknüpfung: Das Eingabefeld wird direkt innerhalb des Label-Elements platziert. Diese Variante ist kompakter, aber weniger flexibel beim Styling.

In beiden Fällen kannst du auf das Label klicken, um das zugehörige Eingabefeld zu fokussieren. Bei Checkboxen und Radio-Buttons wird durch Klick auf das Label der Zustand geändert.

Syntax

<label for="username">Benutzername:</label>
<input type="text" id="username">

Attribute

Zusätzlich unterstützt <label> alle globalen HTML-Attribute wie class, id oder style.

Beispiele

Explizite Verknüpfung mit for und id

Die gängigste Methode, bei der Label und Input getrennt sind:

<label for="email">E-Mail-Adresse:</label>
<input type="email" id="email" placeholder="deine@email.de">

<label for="password">Passwort:</label>
<input type="password" id="password">

Implizite Verknüpfung mit verschachteltem Input

Hier umschließt das Label das Eingabefeld direkt. Kein for-Attribut nötig:

<label>
  Dein Name:
  <input type="text" placeholder="Max Mustermann">
</label>

<label>
  Nachricht:
  <textarea rows="4" placeholder="Deine Nachricht hier..."></textarea>
</label>

Label mit Checkbox: Vergrößerte Klickfläche

Bei Checkboxen und Radio-Buttons ist das Label besonders wichtig, weil die Eingabeelemente selbst sehr klein sind. Mit einem Label wird die gesamte Textfläche klickbar:

<label for="terms">
  <input type="checkbox" id="terms">
  Ich akzeptiere die Nutzungsbedingungen
</label>

<label for="newsletter">
  <input type="checkbox" id="newsletter">
  Newsletter abonnieren
</label>

Barrierefreiheit

Das <label> Element ist eines der wichtigsten Werkzeuge für barrierefreie Formulare:

Screenreader-Unterstützung: Screenreader lesen den Label-Text vor, wenn das zugehörige Eingabefeld fokussiert wird. Ohne Label wissen Nutzer nicht, was in ein Feld eingegeben werden soll.

Vergrößerte Klickfläche: Besonders auf Touch-Geräten ist es schwierig, kleine Checkboxen oder Radio-Buttons zu treffen. Mit einem Label wird die gesamte Textfläche klickbar, was die Bedienung deutlich einfacher macht.

Programmatische Verknüpfung: Assistive Technologien können durch die Verknüpfung zwischen Label und Input den Kontext besser verstehen und Nutzer effizienter durch Formulare führen.

Best Practice: Jedes sichtbare Eingabefeld sollte ein zugeordnetes Label haben. Versteckte Felder (z.B. für Honeypot-Spam-Schutz) sind die einzige Ausnahme.

Häufige Fehler

placeholder statt label verwenden: Ein häufiger Fehler ist es, nur ein placeholder-Attribut zu nutzen und kein Label einzusetzen. Placeholder verschwinden beim Tippen und sind für Screenreader nicht als Beschriftung erkennbar. Sie sind als Beispieltext gedacht, nicht als Ersatz für Labels.

label ohne for-Attribut: Bei expliziter Verknüpfung muss das for-Attribut des Labels exakt mit der id des Eingabefelds übereinstimmen. Tippfehler oder fehlende IDs führen dazu, dass die Verknüpfung nicht funktioniert und du nicht auf das Label klicken kannst.

Ein Label für mehrere Inputs: Jedes Label sollte genau einem Formularelement zugeordnet sein. Ein Label, das mehrere Inputs umschließt oder auf mehrere IDs verweist, verwirrt Screenreader und funktioniert nicht korrekt. Nutze stattdessen ein <fieldset> mit <legend> für Gruppen.

Unsichtbare Labels: Manchmal werden Labels per CSS versteckt (display: none oder visibility: hidden), um ein “cleanes” Design zu erreichen. Das schadet der Barrierefreiheit massiv. Wenn du Labels visuell verstecken musst, nutze die Screenreader-Only-Technik mit position: absolute und entsprechenden Offsets.

Browser-Kompatibilität

Das label-Element wird von allen Browsern seit den Anfängen des Webs vollständig unterstützt. Sowohl die explizite Verknüpfung mit for/id als auch die implizite Verschachtelung funktionieren überall.

Email-Kompatibilität

Formularelemente inklusive label funktionieren in HTML-E-Mails nicht. Die meisten Clients entfernen interaktive Elemente aus Sicherheitsgründen.

Verwandte Elemente