Label als Bindeglied zwischen Eingabefeld und Beschriftung
label for verbindet das <label>-Tag mit einem Eingabeelement des Formulars. Das for-Attribut des label-Tags muss denselben Wert wie das id-Attribut des Eingabefelds (input, textarea, button, select) aufweisen.
Jedes Eingabefeld kann nur ein label-Tag haben.
Wenn der Text für die Beschreibung des Eingabefeldes – z.B. "Ihr Name" – in ein label-Tag gesetzt wird, entstehen keine sichtbaren Änderungen. Ohne CSS-Stile hat das label-Tag keinen Einfluss auf die Gestaltung.
label für Barrierefreiheit
Aber jedes label-Tag für ein Eingabefeld verbessert sofort die Benutzeroberfläche für jeden Benutzer (auch für den Normalo mit der Maus): Es vergrößert den klickbaren Bereich für Benutzer mit der Maus.
Das gilt nicht nur für die kleinen Checkboxen und Radiobuttons, sondern auch für die Text-Eingabefelder. Ein Klick auf den führenden Text »Vorname« reicht schon aus, um den Cursor in das Eingabefeld zu versetzen.
In diesem Sinne bringt eine gute Portion CSS padding für das label-Element mehr Barrierefreiheit für alle.
label vor, nach oder um input
Wenn das Formularfeld innerhalb des label-Tags gesetzt wird, werden das for- und das id-Attribut nicht gebraucht, da Eingabefeld und Label direkt miteinander verknüpft sind.
<label for="vorname">Vorname </label> <input id="vorname" type="text" size="15" /> <label>Anmerkung<br /> <textarea cols="40" rows="2">Was noch zu sagen wäre … </textarea> </label>
Label für große Checkboxen und Radio-Buttons
HTML label ist auch eine einfache Technik, um die kleinen Radio-Buttons und Checkboxen benutzerfreundlicher zu gestalten. Ein Klick auf das label-Element toggelt den Zustand der Checkbox oder des Radio-Buttons.
Das alleine macht die kleinen Buttons schon handlicher, aber dieses Verhalten kann man sich für eine größere Ausgabe von Checkboxen und Radio-Buttons zu Nutzen machen.
HTML
<input type="checkbox" id="checkit" value="checkit" /> <label for="checkit">Check it!</label> <input type="radio" id="radio" value="radiocheck" /> <label for="radio">Check it!</label>
CSS
input[type=checkbox] {display: none} input[type=checkbox] + label span { background-image: url(ui-checkbox-e.svg); vertical-align:middle; width: 20px; height: 20px; display: inline-block; margin-right: 12px; cursor: pointer; } input[type=checkbox]:checked + label span { background-image: url(ui-checkbox-c.svg); } input[type=radio] {display: none} input[type=radio] + label span { background-image: url(ui-radio-e.svg); vertical-align:middle; width: 20px; height: 20px; display: inline-block; margin-right: 12px; cursor: pointer; } input[type=radio]:checked + label span { background-image: url(ui-radio-c.svg); }
Die SVG-Grafiken, die Hintergrundbilder für die Checkboxen und Radio-Buttons sind nur wenige Bytes groß und simpel gestrickt. Natürlich können stattdessen auch PNG-Bilder eingesetzt werden.
label als Basis für CSS und Animationen
Die Verknüpfung von label und input-Element vereinfacht das Anlegen eigener Stile für Formularfelder und macht sogar kleine Animationen mit reinem CSS möglich. Ein Beispiel ist das reine CSS-Akkordeon ohne Javascript.