CSS, HTML UND JAVASCRIPT MIT {STIL}

Das label-Tag ist eines von drei Elementen, die seit HTML 4 die Nutzung von Formularen – insbesondere für Benutzer mit Handicaps – verbessern. Die anderen beiden Tags sind fieldset und legend.

Ein Element kann mehr als ein Label haben.

Ein label-Element soll keine weiteren <label>-Tags enthalten.

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

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>

Attribute für label

accesskey

bestimmt eine Taste auf der Tastatur, die beim Drücken zusammen mit der Alt-, Strg- oder Befehlstaste einen Link aktiviert.

for

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

Globale Attribute und Events für label

Kernattribute	Ereignisse
class, dir, id, lang, style, title	onblur onclick, ondblclick onfocus onkeydown, onkeypress, onkeyup mousedown, mousemove, mouseout, mousedown, mouseup