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

Das Verknüpfen eines <label> mit einem Eingabeelement, wie z.B. <input> oder <textarea>, bietet einige wichtige Vorteile:

• Der Beschriftungstext ist nicht nur visuell mit seinem entsprechenden Eingabefeld verbunden, sondern auch programmatisch. Das bedeutet zum Beispiel, dass ein Screenreader die Beschriftung ausliest, wenn sich der Fokus des Benutzers auf dem Eingabefeld befindet. Das erleichtert es einem Benutzer mit Unterstützungstechnologie zu verstehen, welche Daten eingegeben werden sollen.
• Wenn ein Benutzer auf ein Label klickt oder es berührt/tippt, übergibt der Browser den Fokus an das zugeordnete Eingabefeld (das daraus resultierende Ereignis wird auch für das Eingabefeld ausgelöst). Diese erhöhte Trefffäche für den Fokus auf das Eingabefeld bietet einen Vorteil für alle, die versuchen, 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. Als nächstes fügen Sie das for-Attribut zum <label>-Element hinzu, wobei der Wert von for derselbe ist wie die id im <input>-Element.

Alternativ können Sie das <input> direkt innerhalb des <label> einschließen, in diesem Fall sind die Attribute for und id nicht erforderlich, da die Verknüpfung implizit ist:

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

Das Formularelement, das ein label beschriftet, wird als beschriftetes Element des label-Elements bezeichnet. Mehrere Labels können mit demselben Formularelement 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 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 Formular-bezogenes Element im selben Dokument wie das <label>-Element sein. Somit kann jedes label-Element 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 Element für dieses label-Element – wenn das Element mit dieser id tatsächlich ein beschriftbares Element ist. Wenn es kein beschriftbares Element ist, hat das for-Attribut keine Wirkung. Wenn es andere Elemente gibt, die ebenfalls mit dem id-Wert übereinstimmen, später im Dokument, werden diese nicht berücksichtigt.

Mehrere label-Elemente können denselben Wert für ihr for-Attribut haben; dadurch erhält das zugeordnete Formularelement (das Element, auf das der for-Wert verweist) 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 Überlegungen zum Styling von <label>-Elementen - strukturell handelt es sich um Inline-Elemente, die daher ähnlich wie ein <span> oder <a>-Element gestylt werden können. Sie können sie auf jede beliebige Weise stylen, solange Sie den Text nicht schwer lesbar machen.

Platzieren Sie keine interaktiven Elemente wie Anker oder Schaltflächen innerhalb eines label. Dies erschwert es, das mit dem label verknüpfte Formularelement zu aktivieren.

Machen 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 Überschriftenelementen innerhalb eines <label> stört viele Arten von Unterstützungstechnologien, 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>.

Machen 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 keine Zuordnung zu einem Label. Dies kann tatsächlich stören, wie Unterstützungstechnologien die Schaltflächeneingabe interpretieren. Das Gleiche gilt für das <button>-Element.