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

Ein <label> mit einem Formularsteuerungselement wie <input> oder <textarea> zu verknüpfen, bietet einige wesentliche Vorteile:

• Der Labeltext ist nicht nur visuell mit seinem entsprechenden Texteingabefeld verbunden; er ist auch programmatisch damit verknüpft. Das bedeutet zum Beispiel, dass ein Screenreader das Label vorliest, wenn der Benutzer sich auf das Formulareingabefeld konzentriert, sodass ein Benutzer mit einer unterstützenden Technologie besser verstehen kann, welche Daten eingegeben werden sollen.
• Wenn ein Benutzer auf ein Label 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). Dieser erweiterte Trefferbereich ermöglicht es 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 zunächst das id-Attribut zum <input>-Element hinzufügen. Danach fügen Sie das for-Attribut zum <label>-Element hinzu, wobei der Wert von for derselbe wie die id im <input>-Element ist.

Alternativ können Sie das <input> direkt innerhalb des <label> verschachteln, in diesem Fall sind das for- und id-Attribut nicht erforderlich, da die Verknüpfung implizit erfolgt:

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

Das Formularsteuerelement, das ein Label kennzeichnet, wird als das gekennzeichnete 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>

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 eine einzelne id für ein beschriftbares formularbezogenes Element im selben Dokument wie das <label>-Element sein. Damit kann jedes label-Element nur mit einem Formularsteuerungselement verknüpft werden.

Hinweis: Um das for-Attribut programmgesteuert festzulegen, verwenden Sie htmlFor.

Das erste Element im Dokument mit einem mit dem for-Attribut übereinstimmenden id-Attribut ist das gekennzeichnete Steuerelement für dieses label-Element – sofern das Element mit dieser id tatsächlich ein beschriftbares Element ist. Ist es kein beschriftbares Element, hat das for-Attribut keine Wirkung. Wenn es andere Elemente mit demselben id-Wert später im Dokument gibt, werden sie nicht berücksichtigt.

Mehrere label-Elemente können denselben Wert für ihr for-Attribut erhalten; dadurch erhält das zugehörige Formularsteuerelement (das Formularsteuerelement, das im for-Wert referenziert wird) mehrere Beschriftungen.

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

Es gibt keine besonderen Stilü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 sie auf jede gewünschte Weise gestalten, solange Sie nicht verhindern, dass der Text schwer lesbar wird.

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

Nicht so:

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

Bevorzugt 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 in einem <label> stört viele Arten von unterstützenden Technologien, 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 innerhalb eines <fieldset>.

Nicht so:

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

Bevorzugt 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 Deklaration type="button" und einem gültigen value-Attribut benötigt kein zugeordnetes Label. Das Hinzufügen eines Labels kann tatsächlich stören, wie unterstützende Technologien die Schaltflächeneingabe interpretieren. Gleiches gilt für das <button>-Element.