<label>: Das Label-Element

<div class="preference">
  <label for="cheese">Do you like cheese?</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

<div class="preference">
  <label for="peas">Do you like peas?</label>
  <input type="checkbox" name="peas" id="peas" />
</div>

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

Die Zuordnung eines <label> zu einem Formular-Steuerelement, wie z.B. <input> oder <textarea>, bietet einige große Vorteile:

• Der Beschriftungstext ist nicht nur visuell mit dem entsprechenden Texteingabefeld verbunden, sondern auch programmatisch. Dies bedeutet beispielsweise, dass ein Screenreader die Beschriftung vorliest, wenn der Benutzer auf das Formulareingabefeld fokussiert ist. Dies erleichtert es Benutzern unterstützender Technologien, zu verstehen, welche Daten eingegeben werden sollten.
• Wenn ein Benutzer auf ein Label klickt oder es berührt, ü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 zum Fokussieren des Eingabefeldes bietet jedem, der versucht, es zu aktivieren, einen Vorteil — einschließlich solcher, die ein Touchscreen-Gerät verwenden.

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

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

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

Das Formular-Steuerelement, das ein Label beschriftet, wird als das beschriftete Steuerelement des Label-Elements bezeichnet. Mehrere Labels können mit demselben Formular-Steuerelement 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 enthält die globalen Attribute.

for

Der Wert des for-Attributs muss eine einzelne id eines labelbaren formularbezogenen Elements im selben Dokument wie das <label>-Element sein. Jedes label-Element kann daher nur mit einem Formular-Steuerelement verknüpft werden.

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 — wenn das Element mit dieser id tatsächlich ein labelbares Element ist. Wenn es kein labelbares Element ist, hat das for-Attribut keine Wirkung. Wenn es andere Elemente gibt, die ebenfalls mit dem id-Wert übereinstimmen, die später im Dokument erscheinen, werden diese nicht berücksichtigt.

Mehrere label-Elemente können denselben Wert für ihr for-Attribut besitzen; dadurch wird das zugehörige Formular-Steuerelement (das Formular-Steuerelement, auf das der for-Wert verweist) mit mehreren Labels versehen.

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

Es gibt keine besonderen Styling-Überlegungen für <label>-Elemente — strukturell sind sie Inline-Elemente und können daher ähnlich wie ein <span> oder <a>-Element gestaltet werden. Sie können das Styling auf jede gewünschte Weise anwenden, solange Sie nicht dazu führen, dass der Text schwer lesbar wird.

Platzieren Sie keine interaktiven Elemente wie Anker oder Schaltflächen innerhalb eines label. Dies erschwert es den Leuten, das Formular-Eingabefeld, das mit dem label verknüpft ist, zu aktivieren.

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

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

So nicht:

<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 kein zugeordnetes Label. Dies kann tatsächlich stören, wie unterstützende Technologie die Schaltflächeneingabe verarbeitet. Dasselbe gilt für das <button>-Element.