HTML-Tag label • Formularfelder beschriften

HTML label – sinnvolle Ergänzung für Formularfelder

HTML label verknüpft Eingabefelder, Button und Checkboxen eines Formulars mit der Beschriftung des Eingabefelds. Das for-Attribut im label muss mit der id des Eingabefelds übereinstimmen.

label reduziert das Markup, verbessert die Barrierefreiheit des Formulars und lässt sich mit CSS stylen.

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.

Eingabefelder ohne label
Vorname
Ich bin
unter 18 über 18
Eingabefelder mit label
Ich bin

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" name="checkit" value="checkit2" />
<label for="checkit"><span></span>Check it!</label>

<input type="radio" name="radio" value="radiocheck" />
<label for="radio2"><span></span>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.

<svg height="100%" width="100%" viewBox="0 0 13 13">
   <rect rx="2" height="12" width="12" stroke="hsl(20,80%,70%)" y=".5" x=".5" fill="#fff"/>
</svg>

<svg height="100%" width="100%" viewBox="0 0 13 13">
   <rect rx="2" height="12" width="12" stroke="hsl(20,80%,70%)" y=".5" x=".5" fill="hsl(20,80%,50%)"/>
   <path d="m 3,6 l 1,3 L 10,3" stroke-linejoin="round" stroke="#fff" stroke-linecap="round" stroke-width="1px" fill="none"/>
</svg>

<svg height="100%" width="100%" viewBox="0 0 13 13">
   <circle stroke-linejoin="round" cx="6.5" stroke-linecap="round" stroke="hsl(20,80%,70%)" cy="6.5" r="6" fill="#fff"/>
</svg>

<svg height="100%" width="100%" viewBox="0 0 13 13">
   <circle stroke-linejoin="round" stroke-linecap="round" stroke="hsl(20,80%,70%)" cy="6.5" cx="6.5" r="6" fill="hsl(20,80%,50%)"/>
   <circle cx="6.5" cy="6.5" r="2" fill="#eaf3f8"/>
</svg>

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.

2015 Tomate Meier label label Jahr input Name Expertise Meister rating