HTML-Element <label>

Probieren Sie es aus

<div class="preference">
  <label for="cheese">I like cheese.</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

<div class="preference">
  <label for="peas">I like peas.</label>
  <input type="checkbox" name="peas" id="peas" />
</div>

.preference {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin: 0.5rem;
}

Attribute

Dieses Element unterstützt die globalen Attribute.

for

Der Wert ist die id des beschriftbaren Formularsteuerelements im selben Dokument. Dadurch wird das <label> mit diesem Formularsteuerelement verknüpft. Beachten Sie, dass die entsprechende JavaScript-Eigenschaft htmlFor heißt.

Hinweise zur Verwendung

Verknüpfen einer Beschriftung mit einem Formularsteuerelement

Das erste Element im Dokument, dessen id-Attribut mit dem Wert des for-Attributs übereinstimmt, ist das beschriftete Steuerelement dieses label-Elements – sofern es sich bei dem Element mit dieser id tatsächlich um ein beschriftbares Element handelt. Ist es kein beschriftbares Element, hat das for-Attribut keine Wirkung. Weitere Elemente mit demselben id-Wert, die später im Dokument stehen, werden nicht berücksichtigt.

Mehrere <label>-Elemente können mit demselben Formularsteuerelement verknüpft werden, indem sie denselben Wert für das for-Attribut verwenden. Das Formularsteuerelement hat dann mehrere Beschriftungen.

Die Verknüpfung eines <label> mit einem Formularsteuerelement wie <input> oder <textarea> bietet wesentliche Vorteile:

• Der Beschriftungstext ist dem zugehörigen Eingabefeld nicht nur visuell, sondern auch programmatisch zugeordnet. So liest beispielsweise ein Screenreader die Beschriftung vor, wenn der Fokus auf dem Formularsteuerelement liegt. Das erleichtert Menschen, die assistive Technologien verwenden, zu erkennen, welche Daten einzugeben sind.
• Wenn jemand auf eine Beschriftung klickt oder sie berührt, überträgt der Browser den Fokus auf das zugehörige Eingabefeld (das entsprechende Ereignis wird auch für das Eingabefeld ausgelöst). Die dadurch vergrößerte anklickbare Fläche erleichtert es allen, das Eingabefeld zu aktivieren – auch auf Geräten mit Touchscreen.

Es gibt zwei Möglichkeiten, ein <label> mit einem Formularsteuerelement zu verknüpfen: eine explizite und eine implizite Verknüpfung.

Um ein <label>-Element explizit mit einem <input>-Element zu verknüpfen, fügen Sie zunächst dem <input>-Element ein id-Attribut hinzu. Fügen Sie anschließend dem <label>-Element ein for-Attribut hinzu, dessen Wert mit der id des <input>-Elements übereinstimmt.

<label for="peas">I like peas.</label>
<input type="checkbox" name="peas" id="peas" />

Alternativ können Sie das <input>-Element direkt in das <label>-Element einbetten. In diesem Fall sind die Attribute for und id nicht erforderlich, da die Verknüpfung implizit ist:

<label>
  I like peas.
  <input type="checkbox" name="peas" />
</label>

Die beiden Methoden sind gleichwertig, allerdings gibt es einige Punkte zu beachten:

• Gängige Kombinationen aus Browsern und Screenreadern unterstützen die implizite Verknüpfung, aber nicht alle assistiven Technologien tun dies.
• Je nach Gestaltung kann sich die Art der Verknüpfung auf die Gestaltungsmöglichkeiten auswirken. Wenn <label> und Formularsteuerelement gleichgeordnete statt ineinander verschachtelte Elemente sind, bilden sie getrennte, nebeneinanderliegende Boxen. Das ermöglicht flexiblere Layouts, etwa eine Ausrichtung mit Grid oder Flexbox.
• Für eine explizite Verknüpfung benötigt das Formularsteuerelement eine id, die im gesamten Dokument eindeutig sein muss. Besonders in komponentenbasierten Anwendungen kann das schwierig sein. Frameworks bieten dafür häufig eigene Lösungen wie useId() in React. Dennoch ist zusätzlicher Abstimmungsaufwand nötig, um die korrekte Zuordnung sicherzustellen.

Im Allgemeinen empfehlen wir die explizite Verknüpfung mit dem for-Attribut, um die Kompatibilität mit externen Werkzeugen und assistiven Technologien sicherzustellen. Für maximale Kompatibilität können Sie das Steuerelement zugleich einbetten und id/for angeben.

Das Formularsteuerelement, das ein Label beschriftet, wird als beschriftetes Steuerelement des Label-Elements bezeichnet. Mehrere Labels können mit demselben Formularsteuerelement verknüpft sein:

<label for="username">Enter your username:</label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?</label>

Zu den Elementen, die mit einem <label>-Element verknüpft werden können, gehören <button>, <input> (außer bei type="hidden"), <meter>, <output>, <progress>, <select> und <textarea>.

Barrierefreiheit

Interaktive Inhalte

Platzieren Sie außer dem implizit verknüpften Formularsteuerelement keine weiteren interaktiven Elemente wie anchors oder buttons innerhalb eines <label>. Andernfalls wird es schwieriger, das mit dem label verknüpfte Formularsteuerelement zu aktivieren.

Vermeiden Sie Folgendes:

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

Bevorzugen Sie Folgendes:

<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
</label>

Überschriften

Überschriftenelemente innerhalb eines <label> beeinträchtigen viele Arten assistiver Technologien, da Überschriften häufig als Navigationshilfe dienen. Wenn der Beschriftungstext optisch angepasst werden soll, verwenden Sie stattdessen CSS-Klassen für das <label>-Element.

Wenn ein Formular oder ein Formularabschnitt einen Titel benötigt, verwenden Sie ein <legend>-Element innerhalb eines <fieldset>.

Vermeiden Sie Folgendes:

<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text" />
</label>

Bevorzugen Sie Folgendes:

<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text" />
</label>

Buttons

Ein <input>-Element mit type="button" und einem gültigen value-Attribut benötigt kein zugeordnetes Label. Eine solche Zuordnung kann sogar beeinträchtigen, wie assistive Technologien das Eingabeelement als Button interpretieren. Dasselbe gilt für das <button>-Element.

Beispiele

Eine implizite Beschriftung definieren

<label>Click me <input type="text" /></label>

Eine explizite Beschriftung mit dem Attribut „for“ definieren

<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität