Formularsteuerelemnte beschriften

<label>

Das Element <label> kann auf zwei Weisen verwendet werden:

  1. Es kann sowohl die Beschriftung als auch das Steuerelement einschließen.
  2. Es kann unabhängig von dem Steuerelement im Code stehen und mit dem Attribut for angeben, für welches Element es da ist.

 

for

Das Attribut for gibt an, zu welchem Steuerelement eine Beschriftung gehört. Die Radio Buttons in dem Beispiel werden durch den Wert des Attributs id eindeutig von allen anderen Elementen auf der Seite unterschieden. 

Der Wert des Attributs for ist der id-Wert des Steuerelements, zu dem die Beschriftung gehört. Die Attribute for und id lassen sich für alle Formularsteuerelemente verwenden. Bei einem <label> Element für eine Checkbox oder einen Radio-Button können Benutzer zur Auswahl sowohl auf das eigentliche Steuerelement als auch auf die Beschriftung klicken. Durch diese Erweiterung des anklickbaren Bereichs lässt sich das Formular leichter ausfüllen. Die Position der Beschriftungen ist sehr wichtig. Wenn die Benutzer nicht wissen, wo sie welche Informationen eingeben müssen, werden Sie das Formular wahrscheinlich nicht korrekt ausfüllen.

 

Beispiel:

<label>Alter:<input type="text" name="age"/></label> <br>

Geschlecht:

<input id="female" type="radio" name="gender" value="f">

<label for="female">Weiblich</label>

<input id="male" type="radio" name="gender" value="m">

<label for="male">Männlich</label>

Darstellung:


Geschlecht: