`<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 Formularelement, wie z.B. <input> oder <textarea>, bietet einige große Vorteile:

• Der Labeltext wird nicht nur visuell mit seinem entsprechenden Texteingabefeld verknüpft, sondern auch programmatisch. Das bedeutet, dass beispielsweise ein Screenreader das Label vorliest, wenn der Benutzer auf dem Formulareingang fokussiert ist, was es Benutzern unterstützender Technologien erleichtert zu verstehen, welche Daten eingegeben werden sollen.
• Wenn ein Benutzer auf ein Label klickt oder es berührt/tippt, überträgt der Browser den Fokus auf das zugeordnete Eingabeelement (das resultierende Ereignis wird auch für das Eingabeelement ausgelöst). Diese erweiterte Trefferfläche zum Fokussieren des Eingabeelements 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 einem <input>-Element zuzuordnen, müssen Sie zunächst 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 mit dem id im <input>-Element übereinstimmen muss.

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

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

Das Formularelement, das ein Label beschriftet, wird als labeled control des Label-Elements bezeichnet. Mehrere Label können demselben Formularelement zugeordnet 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 labelable formularbezogenes Element im selben Dokument wie das <label>-Element sein. Jedes label-Element kann daher nur einem Formularelement zugeordnet 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-Attributes übereinstimmt, ist das labeled control für dieses label-Element — wenn das Element mit dieser id tatsächlich ein labelable element ist. Falls es kein labelbares Element ist, hat das for-Attribut keine Wirkung. Wenn es andere Elemente gibt, die ebenfalls den id-Wert später im Dokument übereinstimmen, werden sie nicht berücksichtigt.

Mehrere label-Elemente können denselben Wert für ihr for-Attribut haben; doing so bewirkt, dass das zugeordnete Formularelement (das Formularsteuerelement, auf das der for-Wert verweist) mehrere Labels hat.

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

Es gibt keine speziellen Stilüberlegungen für <label>-Elemente — strukturell sind sie Inline-Elemente und können auf ähnliche Weise wie ein <span> oder <a> Element gestaltet werden. Sie können sie in jeder gewünschten Weise stylen, solange Sie nicht den Text 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.

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ützenden Technologien, da Überschriften häufig als Navigation Hilfe 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>.

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. Dies könnte tatsächlich die Art und Weise stören, wie assistive Technologie die Schaltflächeneingabe parst. Dasselbe gilt für das <button> Element.