HTML/Formulare/label

Aus SELFHTML-Wiki
< HTML‎ | Formulare(Weitergeleitet von Label)
Wechseln zu: Navigation, Suche

Mit dem label-Element wird Eingabefeldern, Radio-Buttons und Checkboxen bzw. einigen anderen Elementen eine Beschriftung hinzugefügt. Sie wird dem Eingabeelement zugeordnet, indem sie es entweder als Elternelement umschließt oder durch die Verknüpfung des for-Attributs mit der id des Eingabeelements.

Es kann neben den Universalattributen folgende Attribute besitzen:

  • for: der Wert ist die id des Eingabe-Feldes, das beschriftet wird
  • form: liefert eine Beschriftung für das form-Element, zu dem das Label gehört

label-Elemente mit for-Attribut[Bearbeiten]

Beispiel ansehen …
<form> <h3>Kreuzen Sie die gewünschten Zutaten an:</h3> <fieldset> <ul> <li> <label> <input type="checkbox" name="zutat" value="salami" id="check1"> Salami </label> </li>
<li> <label for="check2"> <input type="checkbox" name="zutat" value="schinken" id="check2"> Schinken </label> </li>
<li> <input type="checkbox" name="zutat" value="sardellen" id="check3"> <label for="check3"> Sardellen </label> </li> </ul> </fieldset> </form>
Drei Arten, label logisch einem Eingabe-Element (hier input) zuzuordnen: Wird das betreffende input-Element als Kindelement des label definiert, so ist eine ausdrückliche Zuordnung zwischen input und label mittels for-Attribut nicht mehr zusätzlich nötig (erster Beispielabschnitt); kann aber erfolgen (zweiter Beispielabschnitt), was das Fehlerpotenzial durch zukünftige Umstrukturierungen verringert. for ist speziell dann von Bedeutung, wenn die Beschreibung nicht Elternelement des input ist (dritter Beispielabschnitt), was speziell dann geschehen kann, wenn das label nicht direkt neben dem input-Element vorkommen soll.
Empfehlung: Beschriften Sie sämtliche Formular-Elemente mit einem label-Element, damit
  • Nichtsehende wissen, was in das Eingabefeld eingegeben werden soll
  • die anklickbare Fläche (vor allem bei bei Checkboxen und Radio-Buttons) vergrößert wird, da auch auf das Label geklickt werden kann.

label-Elemente mit form-Attribut[Bearbeiten]

Mithilfe des form-Attributs können Sie eine Beschriftung für das Formular erzeugen.

Beispiel: Formular ansehen …
<form id="person"> <label class="h2" form="person">Namenseingabe</label> <label for="vorname">Vorname</label> <input name="vorname" id="vorname" maxlength="30"> <label for="zuname">Zuname</label> <input name="zuname" id="zuname" maxlength="40"> <button>Eingaben absenden</button> </form>
Dieses Formular hat eine ID. Das folgende label-Element verweist mit seinem form-Attribut (person) auf genau dieses Formular. Damit ist eine Beschriftung für das Formular gegeben.

siehe auch[Bearbeiten]