Stil mit {stil}

Nov 2008

HTML-Tag <label> ... </label> Kennzeichnung von Formularfeldern

Das <label>-Tag verbindet Formularelemente wie Eingabefelder und Checkboxen eines Formulars mit der Beschriftung des Felds. Die Verbindung kommt über das for-Attribut des <label>-Tags und das id-Attribut im Formularelement zustande. Mit Hilfe des label-Elements sollen Tabellen, die bislang noch das wichtigste Gestaltungsmittel für Formulare sind, reduziert werden und die Barrierefreiheit des Formulars verbessert werden.

<label for="name">Name </label>
<input id="name" type="text" name="nachname" size="30" />
		
<label for="sportart">Wählen Sie Ihren Sport</label>
<select id="sportart" name="sport">
   <option value="Reiten">Reiten</option>
   …
</select>

Ich bin<br />
<label><input type="radio" name="alt" value="u18" />unter 18</label><br />
<label><input type="radio" name="alt" value="o18" />über 18</label>		

Wenn das Formularfeld innerhalb des <label>-Elements gesetzt wird, werden das for- und das id-Attribut nicht gebraucht, da Eingabefeld und Label direkt miteinander verknüpft sind.

Ein Element kann mehr als ein Label haben.

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 label-Element soll keine weiteren <label>-Tags enthalten.

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.

Weitere Attribute und Ereignisse für label

Zum Seitenanfang