Das <label>-Element wird verwendet, um ein Beschriftungselement mit einem Eingabefeld in einem Formular zu verknüpfen. Diese Verknüpfung hilft den Nutzern, die angeforderten Informationen im Formularfeld besser zu verstehen. Wenn ein Nutzer auf das Label klickt, wird das zugehörige Eingabefeld automatisch fokussiert.

Es gibt zwei Möglichkeiten, Label- und Input-Elemente zu verbinden:

Umschließen

Durch das Verschachteln eines Formularelements, wie zum Beispiel eines <input/>-Feldes, innerhalb eines <label>-Elements stellt der Browser automatisch eine Verbindung zwischen dem Label und dem Eingabefeld her. Zum Beispiel:

In diesem Beispiel wird durch Klicken auf den Beschriftungstext "Name" das entsprechende Eingabefeld automatisch fokussiert.

Verwendung des id-Attributs

Wenn ein Formularelement nicht innerhalb eines <label>-Elements verschachtelt ist, verknüpfen Sie diese manuell, indem Sie das id-Attribut des input-Elements und das for-Attribut des label-Elements verwenden. Die Werte der Attribute for und id müssen identisch sein. Zum Beispiel:

In diesem Fall wird das Label mit dem Eingabefeld über das for-Attribut im Label und das id-Attribut im Eingabefeld verknüpft. Durch Klicken auf den Beschriftungstext "Name" wird ebenfalls das entsprechende Eingabefeld fokussiert.

Hinweis

Mit diesen Methoden stellen Sie eine visuelle und semantische Verbindung zwischen dem label und dem input-Feld her. Es kann jedoch Situationen geben, in denen das Verschachteln des input-Elements innerhalb des label-Elements aufgrund von Stilvorgaben oder Webseitenlogik nicht möglich ist. In solchen Fällen wird häufig auf Attributverknüpfungen zurückgegriffen, um Flexibilität bei der Anwendung von Stilen und der Implementierung von Hintergrundlogik zu gewährleisten.

Untersuchen wir den Unterschied zwischen den beiden Ansätzen, indem wir den Code im Bild betrachten.

Hinweis

Aus Sicht des Browsers ist die gewählte Methode zur Herstellung der Verbindung unerheblich. Beide Methoden erzielen das gleiche Ergebnis, indem sie das Label und das Eingabefeld für eine bessere Benutzerfreundlichkeit und Barrierefreiheit miteinander verknüpfen.