<label>: Das Label-Element

Das Verknüpfen eines <label> mit einem Formularelement, wie <input> oder <textarea>, bietet einige wesentliche Vorteile:

• Der Beschriftungstext ist nicht nur visuell mit seinem entsprechenden Texteingabefeld verknüpft, sondern auch programmatisch. Dies bedeutet zum Beispiel, dass ein Screenreader die Beschriftung vorliest, wenn der Benutzer sich auf das Formulareingabefeld fokussiert, was es Benutzern von Unterstützungstechnologien erleichtert, zu verstehen, welche Daten eingegeben werden sollen.
• Wenn ein Benutzer auf eine Beschriftung klickt oder tippt, überträgt der Browser den Fokus auf das zugehörige Eingabefeld (das resultierende Ereignis wird auch für das Eingabefeld ausgelöst). Diese vergrößerte Trefferfläche, um den Fokus auf das Eingabefeld zu setzen, bietet jedem, der versucht, es zu aktivieren, einen Vorteil - einschließlich derjenigen, die ein Touchscreen-Gerät verwenden.

Um ein <label>-Element explizit mit einem <input>-Element zu verknüpfen, müssen Sie zuerst dem <input>-Element das id-Attribut hinzufügen. Danach fügen Sie dem <label>-Element das for-Attribut hinzu, wobei der Wert von for derselbe wie das id im <input>-Element ist.

Alternativ können Sie das <input> direkt innerhalb des <label> verschachteln. In diesem Fall sind die Attribute for und id nicht erforderlich, da die Beziehung implizit ist:

<label>
  Do you like peas?
  <input type="checkbox" name="peas" />
</label>

Das Formularelement, das von einem Label beschrieben wird, wird als labeled control des Label-Elements bezeichnet. Mehrere Labels können mit demselben Formularelement verknüpft werden:

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

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

Dieses Element umfasst die globalen Attribute.

for

Der Wert des for-Attributs muss ein einzelnes id für ein beschriftbares formularbezogenes Element im selben Dokument wie das <label>-Element sein. So kann jedes label-Element nur mit einem Formularelement verknüpft werden.

Hinweis: Um das for-Attribut programmatisch zu setzen, verwenden Sie htmlFor.

Das erste Element im Dokument mit einem id-Attribut, das dem Wert des for-Attributs entspricht, ist das labeled control für dieses label-Element – wenn das Element mit diesem id tatsächlich ein labelable element ist. Wenn es sich nicht um ein beschriftbares Element handelt, hat das for-Attribut keine Auswirkung. Wenn es andere Elemente gibt, die ebenfalls dem id-Wert entsprechen, werden sie später im Dokument nicht berücksichtigt.

Mehrere label-Elemente können denselben Wert für ihr for-Attribut erhalten; dadurch wird das zugeordnete Formularelement (das Formularelement, auf das sich der for-Wert bezieht) mehreren Beschriftungen zugeordnet.

Hinweis: Ein <label>-Element kann sowohl ein for-Attribut als auch ein enthaltenes Steuerelement haben, solange das for-Attribut auf das enthaltene Steuerelement verweist.

Es gibt keine speziellen stilistischen Überlegungen für <label>-Elemente — strukturell sind sie einfache Inline-Elemente und können daher auf ähnliche Weise wie ein <span> oder <a>-Element gestaltet werden. Sie können sie stylen, wie Sie möchten, solange der Text nicht schwer lesbar wird.

Platzieren Sie keine interaktiven Elemente wie Anker oder Schaltflächen in einem label. Dies erschwert es Benutzern, das mit dem label verknüpfte Formulareingabefeld zu aktivieren.

Nicht so machen:

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

Besser so:

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

Das Platzieren von Überschriftselementen innerhalb eines <label> stört viele Arten von Unterstützungstechnologien, da Überschriften häufig als Navigationshilfe verwendet werden. Wenn der Text der Beschriftung visuell angepasst werden muss, verwenden Sie stattdessen CSS-Klassen, die auf das <label>-Element angewendet werden.

Wenn ein Formular oder ein Abschnitt eines Formulars einen Titel benötigt, verwenden Sie das <legend>-Element, das innerhalb eines <fieldset> platziert wird.

Nicht so machen:

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

Besser so:

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

Ein <input>-Element mit einer type="button"-Deklaration und einem gültigen value-Attribut benötigt keine Beschriftung. Dies kann tatsächlich stören, wie Unterstützungstechnologien die Schaltflächeneingabe parsen. Dasselbe gilt für das <button>-Element.