CSS, HTML und Javascript mit {stil}

HTML-Tag label • input – Beschriftung

HTML label – sinnvolle Ergänzung für Formularfelder

HTML label verknüpft Eingabefelder, Button und Checkboxen eines Formulars mit der Beschriftung des Felds. Die Verbindung kommt über das for-Attribut des label-Tags und das id-Attribut im Eingabefeld zustande.

Mit einem label-Tag lassen sich die Beschriftungen der Formularfelder einfacher mit CSS stylen und die Barrierefreiheit des Formulars verbessern.

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 kleine Checkboxen

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);
}
2015 Tomate Meier label label Jahr input Name Expertise Meister rating