Das<label>HTML Element repräsentiert eine Beschriftung für ein Element in einer Benutzeroberfläche.

Probieren Sie es aus

<div>  <label for="cheese">I like cheese.</label>  <input type="checkbox" name="cheese" /></div><div>  <label for="peas">I like peas.</label>  <input type="checkbox" name="peas" /></div>

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

Attribute

Dieses Element enthält dieglobalen Attribute.

for

Der Wert ist dieid deslabelbaren Formularsteuerungselements im selben Dokument, dasdie<label> mit dieser Formularsteuerung verbindet. Beachten Sie, dass die JavaScript-ReflexionseigenschafthtmlFor ist.

Nutzungshinweise

Verknüpfung eines Labels mit einem Formularsteuerelement

Das erste Element im Dokument mit einemid-Attribut, das mit dem Wert desfor-Attributs übereinstimmt, ist dasbeschriftete Steuerelement für dieseslabel-Element – wenn das Element mit dieserid tatsächlich einlabelbares Element ist. Wenn eskein labelbares Element ist, hat dasfor-Attribut keine Wirkung. Wenn es weitere Elemente gibt, die ebenfalls denid-Wert haben, werden diese später im Dokument nicht berücksichtigt.

Mehrere<label>-Elemente können mit demselben Formularsteuerelement assoziiert werden, indem mehrere<label>-Elemente denselbenfor-Attributwert haben, was dem Formularsteuerelement mehrere Beschriftungen gibt.

Die Verknüpfung eines<label> mit einem Formularsteuerelement, wie zum Beispiel<input> oder<textarea> bietet einige große Vorteile:

• Der Beschriftungstext ist nicht nur visuell mit seinem entsprechenden Texteingabe verbunden; es ist auch programmatisch damit verknüpft. Das bedeutet zum Beispiel, dass ein Screenreader die Beschriftung vorliest, wenn der Benutzer auf den Formulareingaben fokusiert ist, was es einem Benutzer mit unterstützender Technologie erleichtert, die einzugebenden Daten zu verstehen.
• Wenn ein Benutzer auf eine Beschriftung klickt oder tippt, übergibt der Browser den Fokus auf die zugehörige Eingabe (das resultierende Ereignis wird auch für die Eingabe ausgelöst). Dieser erweiterte Berührungsbereich zum Fokussieren der Eingabe bietet jedem, der versucht sie zu aktivieren, einen Vorteil - einschließlich derjenigen, die ein Touchscreen-Gerät verwenden.

Es gibt zwei Möglichkeiten, ein<label> mit einem Formularsteuerelement zu verknüpfen, allgemein auch alsexplizite undimplizite Verknüpfung bezeichnet.

Um ein<label>-Element explizit mit einem<input>-Element zu verknüpfen, müssen Sie zuerst dasid-Attribut zum<input>-Element hinzufügen. Fügen Sie anschließend dasfor-Attribut zum<label>-Element hinzu, wobei der Wert vonfor derselbe wie dieid im<input>-Element ist.

<label for="peas">I like peas.</label><input type="checkbox" name="peas" />

Alternativ können Sie das<input> direkt innerhalb des<label> verschachteln, in diesem Fall sind die Attributefor undid nicht erforderlich, da die Verknüpfung implizit ist:

<label>  I like peas.  <input type="checkbox" name="peas" /></label>

Diese beiden Methoden sind gleichwertig, jedoch gibt es einige Überlegungen:

• Während gängige Browser- undScreenreader-Kombinationen die implizite Verknüpfung unterstützen, tun dies nicht alle unterstützenden Technologien.
• Abhängig von Ihrem Design kann die Art der Verknüpfung die Stilbarkeit beeinflussen. Indem das<label> und das Formularsteuerelement als Geschwisterelemente und nicht als Eltern-Kind beibehalten werden, sind sie separate, benachbarte Boxen, die ein anpassungsfähigeres Layout ermöglichen, wie das Ausrichten mit Grid- oder Flex-Layout-Methoden.
• Die explizite Verknüpfung erfordert, dass das Formularsteuerelement eineid hat, die im gesamten Dokument eindeutig sein muss. Dies ist vor allem in einer komponentisierten Anwendung schwierig. Frameworks bieten oft ihre eigenen Lösungen, wie React'suseId(), es erfordert jedoch immer noch zusätzliche Orchestrierung, um es richtig zu machen.

Generell empfehlen wir, die explizite Verknüpfung mit demfor-Attribut zu verwenden, um die Kompatibilität mit externen Werkzeugen und unterstützenden Technologien sicherzustellen. Tatsächlich können Sie gleichzeitig verschachtelnundid/for für maximale Kompatibilität bereitstellen.

Das Formularsteuerelement, für das ein Label eine Beschriftung ist, wird alsbeschriftetes Steuerelement des Labelelements bezeichnet. Mehrere Beschriftungen können mit demselben Formularsteuerelement assoziiert werden:

<label for="username">Enter your username:</label><input 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ßertype="hidden"),<meter>,<output>,<progress>,<select> und<textarea>.

Barrierefreiheit

Interaktive Inhalte

Abgesehen von derimplizit verknüpften Formularsteuerung sollten keine zusätzlichen interaktiven Elemente wieAnker oderSchaltflächen innerhalb eines<label> platziert werden. Dies erschwert es den Benutzern, das Formularfeld zu aktivieren, das mit demlabel verknüpft ist.

Nicht so machen:

<label for="tac">  <input type="checkbox" name="terms-and-conditions" />  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a></label>

So bevorzugen:

<p>  <a href="terms-and-conditions.html">Read our Terms and Conditions</a></p><label for="tac">  <input type="checkbox" name="terms-and-conditions" />  I agree to the Terms and Conditions</label>

Überschriften

Das Platzieren vonÜberschriftselementen innerhalb eines<label> beeinträchtigt viele Arten von unterstützender Technologie, da Überschriften oft alsNavigationselement verwendet werden. Wenn der Text des Labels visuell angepasst werden muss, verwenden Sie stattdessen CSS-Klassen, die auf das<label>-Element angewendet werden.

Wenn einFormular oder ein Abschnitt eines Formulars einen Titel benötigt, verwenden Sie das<legend>-Element, das innerhalb eines<fieldset> platziert wird.

Nicht so machen:

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

So bevorzugen:

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

Schaltflächen

Ein<input>-Element mit einertype="button"-Deklaration und einem gültigenvalue-Attribut benötigt kein zugehöriges Label. Dies könnte tatsächlich die Art und Weise beeinträchtigen, wie unterstützende Technologien die Schaltflächeneingabe analysieren. Dasselbe gilt für das<button>-Element.

Beispiele

Implizites Label definieren

<label>Click me <input type="text" /></label>

Explizites Label mit dem "for"-Attribut definieren

<label for="username">Click me to focus on the input field</label><input type="text" />

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität