<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 Formularelement wie <input> oder <textarea> zu verknüpfen, bietet einige wesentliche Vorteile:

• Der Label-Text ist nicht nur optisch mit seinem entsprechenden Texteingabefeld verbunden, sondern auch programmatisch. Das bedeutet zum Beispiel, dass ein Screenreader das Label liest, wenn der Benutzer auf das Formulareingabefeld fokussiert ist, was es einem Benutzer mit assistiver Technologie erleichtert zu verstehen, welche Daten eingegeben werden sollen.
• Wenn ein Benutzer ein Label anklickt oder berührt/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 zur Fokussierung des Eingabefeldes 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 zuerst das id-Attribut zum <input>-Element hinzufügen. Anschließend fügen Sie das for-Attribut zum <label>-Element hinzu, wobei der Wert von for identisch mit dem id im <input>-Element sein muss.

Alternativ können Sie das <input> direkt innerhalb des <label> verschachteln, in welchem Fall for- und id-Attribute nicht benötigt werden, da die Zuordnung implizit ist:

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

Das Formularelement, das ein Label beschriftet, wird als beschriftetes Steuerelement 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 enthält 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. Jedes einzelne label-Element kann nur mit einem Formularelement verknüpft werden.

Hinweis: Um das for-Attribut programmatisch festzulegen, 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 beschriftbares Element ist. Ist es kein beschriftbares Element, 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 sie nicht berücksichtigt.

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

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

Es gibt keine besonderen Styling-Anforderungen für <label>-Elemente — strukturell sind sie Inline-Elemente und können daher auf gleiche Weise wie ein <span>- oder <a>-Element gestaltet werden. Sie können sie beliebig gestalten, solange der Text nicht schwer lesbar wird.

Platzieren Sie keine interaktiven Elemente wie Anker oder Schaltflächen in einem label. Dadurch wird es schwierig, 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 assistiver Technologie, da Überschriften häufig als Navigationshilfe verwendet werden. Wenn der Text des Labels visuell angepasst werden muss, verwenden Sie 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 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 kein verknüpftes Label. Das tun könnte tatsächlich stören, wie assistive Technologien den Schaltflächeneingang analysieren. Dasselbe gilt für das <button>-Element.