<label>

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.

Steckbrief <label>

Kategorie: Formulare
Art: Inline
Attribute: 1
Beispiele: 3
Browser: 5 von 5
E-Mail: 0 von 5
Stand: 03.02.2026

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

index.html

Label mit Input-Feld

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

Attribute

1 Attribut

Attribut und Beispiel	Beschreibung
`for` String for="email-input"	Verweist auf die id des zugehörigen Formularelementes. Der Wert muss exakt mit der id des Eingabefelds übereinstimmen.

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

Beispiele

3 Beispiele

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

index.html

Formular mit expliziten Labels

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

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

index.html

Verschachtelte Labels

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

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

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:

index.html

Klickbare Checkbox-Labels

<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

4 Fehler

01 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.

02 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.

03 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.

04 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

5 von 5

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.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

0 von 5

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

Apple Mail

Keine

Entfernt Formularelemente aus Sicherheitsgründen.
Gmail

Keine

Gmail entfernt label- und input-Elemente komplett.
Outlook

Keine

Outlook entfernt Formularelemente vollständig.
Thunderbird

Keine

Formularelemente werden nicht unterstützt.
Yahoo Mail

Keine

Yahoo Mail entfernt Formular-Elemente aus dem HTML.

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da