<label>: Das Label-Element

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

• Der Label-Text ist nicht nur visuell mit seinem entsprechenden Texteingabefeld verbunden, sondern auch programmatisch. Das bedeutet, dass z.B. ein Screenreader das Label vorliest, wenn der Nutzer auf das Formulareingabefeld fokussiert ist, was es einem Benutzer mit unterstützender Technologie erleichtert zu verstehen, welche Daten eingegeben werden sollen.
• Wenn ein Benutzer auf ein Label klickt oder tippt, übergibt der Browser den Fokus an das zugehörige Eingabefeld. Das resultierende Ereignis wird auch für die Eingabe ausgelöst. Diese vergrößerte Trefffäche zum Fokussieren der Eingabe bietet einen Vorteil für jeden, der versucht, es zu aktivieren — einschließlich derjenigen, die ein Touchscreen-Gerät verwenden.

Um ein <label> Element explizit mit einem <input> Element zu verknüpfen, müssen Sie zunächst das Attribut id dem <input> Element hinzufügen. Anschließend fügen Sie das Attribut for dem <label> Element hinzu, wobei der Wert von for mit der id im <input> Element übereinstimmt.

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

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

Das Formularsteuerelement, das ein Label beschreibt, wird das beschriftete Steuerelement des Label-Elements genannt. Mehrere Labels können mit dem gleichen Formularsteuerelement verbunden 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 verbunden werden können, umfassen <button>, <input> (außer mit type="hidden"), <meter>, <output>, <progress>, <select> und <textarea>.

Dieses Element umfasst die globalen Attribute.

for

Der Wert des for Attributs muss eine einzelne id für ein beschriftbares formularbezogenes Element im selben Dokument wie das <label> Element sein. Ein gegebenes label Element kann daher nur mit einem einzigen Formularsteuerelement verbunden sein.

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

Das erste Element im Dokument mit einem id-Attribut, das mit dem Wert des for-Attributs übereinstimmt, ist das beschriftete Steuerelement für dieses label Element — falls das Element mit dieser id tatsächlich ein beschriftbares Element ist. Wenn es kein beschriftbares Element ist, dann hat das for Attribut keine Wirkung. Wenn es andere Elemente gibt, die ebenfalls mit dem id-Wert übereinstimmen, werden diese später im Dokument nicht berücksichtigt.

Mehrere label Elemente können denselben Wert für ihr for Attribut haben; dadurch erhält das zugehörige Formularsteuerelement (das Steuerelement, auf das for verweist) mehrere Labels.

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 besonderen Styling-Überlegungen für <label> Elemente — strukturell sind sie einfache Inline-Elemente und können ähnlich gestylt werden wie ein <span> oder <a> Element. Sie können sie auf jede Art und Weise gestalten, solange der Text nicht schwer lesbar wird.

Platzieren Sie keine interaktiven Elemente wie Anker oder Schaltflächen in einem label. Dies erschwert es Personen, die mit dem label verbundenen Formulareingabe zu aktivieren.

Tun Sie dies nicht:

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

<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ützender Technologie, da Überschriften häufig als Navigationshilfe verwendet werden. Wenn der Text des Labels 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.

Tun Sie dies nicht:

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

Bevorzugen Sie dies:

<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 kein zugeordnetes Label. Das Hinzufügen eines Labels kann tatsächlich die Art und Weise beeinträchtigen, wie unterstützende Technologien die Schaltflächeneingabe parsen. Dasselbe gilt für das <button> Element.