CSS, HTML und Javascript mit {stil}

HTML-Tag label • input – Beschriftung

HTML label

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.

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 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 for

for
verbindet das <label>-Tag mit einem Eingabeelement des Formulars. Es muss denselben Wert wie das id-Attribut des Eingabeelements aufweisen.