Startseite >Web >HTML-Referenz – Elemente und Attribute >label – Feldbeschriftung

label – Feldbeschriftung

<label for="feld-id">Beschriftung</label>

Die Beschriftung eines Formularfelds. Mit dem Feld wird sie über das Attribut for (derselbe Wert wie die id des Felds) oder durch Umschließen des Felds verbunden. Ein Klick auf die Beschriftung setzt dann den Fokus ins Feld und schaltet eine Checkbox oder ein Optionsfeld um – die Fläche zum Antippen wird größer.

  • Standarddarstellung: display: inline
  • End-Tag: erforderlich
  • Inhalt: Phrasierungsinhalt, höchstens ein Feld und kein weiteres label
  • Wo es stehen darf: überall, wo Phrasierungsinhalt erlaubt ist
  • DOM-Schnittstelle: HTMLLabelElement

Attribute

  • for – die id des Felds, zu dem die Beschriftung gehört.

Beispiele

Eine Beschriftung über for und eine Beschriftung, die das Feld umschließt:

<p><label for="tel">Telefon</label> <input type="tel" id="tel" name="tel" autocomplete="tel"></p>
<p><label><input type="checkbox" name="consent"> Ich stimme den AGB zu</label></p>
Ergebnis

Barrierefreiheit

Der Text der Beschriftung ist der zugängliche Name des Felds – der Screenreader liest ihn vor, wenn das Feld den Fokus bekommt. Ohne Beschriftung hört der Nutzer nur „Eingabefeld“. Die Beschriftung sollte sichtbar sein; lässt das Layout es nicht zu, hilft aria-label oder ein visuell verstecktes label.

Worauf Sie achten sollten

  • Der Wert von for muss genau der id des Felds entsprechen, die auf der Seite eindeutig sein muss. Bei zwei gleichen Formularen auf einer Seite (Kopf und Fuß) braucht jedes eigene ids.
  • Setzen Sie keine Links und Schaltflächen in eine Beschriftung – ein Klick darauf vermischt sich mit dem Klick auf die Beschriftung.
  • Ein placeholder ist keine Beschriftung: Er verschwindet, sobald der Besucher zu tippen beginnt.

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 1, Safari 4. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
input – Eingabefeld
select – Auswahlliste
textarea – mehrzeiliger Text
fieldset – Feldgruppe
legend – Beschriftung einer Feldgruppe
id – Bezeichner (Attribut)