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.
Zusätzlich ist CSS transform eine einfache Lösung für größere Symbole.
input.scale {
transform: scale(1.5);
display: inline-block;
margin: 0 0.5rem;
}
Das offenbart allerdings eine leichte Weichzeichnung der Symbole.
label allein macht die kleinen Felder schon benutzerfreundlicher und barrierefreier. Wenn Farbe und Stil dem Layout der Seite angepasst werden sollen, können die Symbole für checkbox und radio durch Grafiken ersetzt werden. Das ist dann aber auch komplexer ….
<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>
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.
