Das label-Tag

Das Tag label definiert eine Beschriftung für ein Eingabefeld des Typs input, textarea, select und so weiter.

Die Beschriftung wird an ein bestimmtes Eingabefeld mit Hilfe des Attributs for gebunden. Darin sollte der Wert des Attributs id des Eingabefelds, an das die Beschriftung gebunden ist, angegeben werden. Ebenso wird die Beschriftung an das Element gebunden, wenn dieses Element in das label-Tag gelegt wird. In diesem Fall muss das Attribut for nicht angegeben werden. Sehen Sie sich die Beispiele für ein besseres Verständnis an.

Durch Anklicken der Beschriftung ändern die damit verbundenen Checkboxen oder Radio- Buttons ihren Zustand von markiert zu nicht markiert und umgekehrt. Die Beschriftung dient in diesem Fall der Benutzerfreundlichkeit: Es ist schwierig, mit dem Cursor kleine Formularelemente zu treffen, aber viel einfacher, eine lange Beschriftung mit Text zu treffen.

Das an die Beschriftung gebundene Texteingabefeld des Typs input oder textarea erhält den Eingabefokus. Fokus bedeutet, dass der Cursor im Eingabefeld blinkt; in diesem Fall gelangt alles, was Sie auf der Tastatur schreiben, in dieses Feld (siehe Pseudoklasse focus für ein fortgeschrittenes Verständnis des Fokus).

Die label-Beschriftung kann zur Nachahmung einer Checkbox oder eines Radio- Buttons verwendet werden. Dies ist notwendig, um Checkboxen oder Radio-Buttons mit eigenem Design zu erstellen (was in CSS verboten ist, aber mit cleveren Tricks möglich ist).

Attribute

Attribut	Beschreibung
for	In diesem Attribut sollte der Wert des id-Attributs des Eingabefelds angegeben werden, an das die label-Beschriftung gebunden ist.
accesskey	Definiert eine Tastenkombination, mit der zum mit der Beschriftung verknüpften (über das Attribut for) Formularelement gesprungen werden kann. Weitere Details siehe Attribut accesskey.

Beispiel . Checkbox

Binden wir eine Beschriftung mit Hilfe des Attributs for an eine checkbox. Klicken Sie auf die Beschriftung und Sie sehen die Änderung des Zustands der Checkbox von markiert zu nicht markiert und umgekehrt:

:

Beispiel . Innerhalb von label

Jetzt binden wir die Beschriftung nicht über das Attribut for, sondern schachteln die Elemente direkt in das label-Tag. In diesem Fall führt das Klicken auf den Text von label ebenfalls zur Aktivierung des Elements:

:

Beispiel . Texteingabefeld

Binden wir eine Beschriftung mit Hilfe des Attributs for an ein input-Tag. Das Anklicken der Beschriftung führt dazu, dass das Eingabefeld den Fokus erhält. Dabei wird der enthaltene Text im Feld (hinzugefügt mit Hilfe des Attributs value) markiert. Wenn Sie etwas auf der Tastatur schreiben, wird dieser Text gelöscht. Um die Markierung zu entfernen, ohne den Text zu löschen, können Sie mit der Maus in das Eingabefeld klicken: Der Fokus verschwindet dabei nicht, aber die Markierung wird aufgehoben:

:

Siehe auch