HTML / CSS - Praxistutorial 3 - Labeln
1. Die Abschnitte
2. Einführung
Das HTML-Tag <label> wurde eingeführt, um eine logische Beziehung zwischen einem Text und den dazugehörigen
Formularelement herzustellen. Dabei steht label für "Beschriftung", ist also so eine Art "Aufkleber" für den entsprechenden
Gegenstand. Bei der Umsetzung selber gibt es mehrere Möglichkeiten, die ich jetzt vorstellen werde.
3. Möglichkeiten
Variante 1
<label for="name">Name</label>
<input type="text" id="name" ... />
Erläuterung
Die Beziehung wird in diesem Fall über das Attribut for im <label>-Tag und dem Attribut id
des <input>-Elements hergestellt. Und nicht anders! Beide Werte (name) müssen natürlich identisch sein.
Und immer daran denken, for -> id. Wenn eines der beiden Attribute fehlt, so gibt es auch keine Beziehung.
Variante 2
<label>
Name <input type="text" ... />
</label>
Erläuterung
In diesem Fall umschließt das <label>-Tag sowohl den Text als auch das Formularelement. Die Beziehung ergibt sich
dann aus der Verschachtelung. Bis ich in meinem schon mehrmals erwähntem
Lieblingsforum auf diese Vorgehensweise aufmerksam gemacht wurde, dachte
ich, dass es sie eigentlich nicht geben darf. Aber auch sie ist absolut valide (Dank an wahsaga).
4. Und wozu das Buhei?
Nun, zunächst mal bietet uns (X)HTML ein entsprechendes Tag an. Damit spart man sich die lange Zeit üblichen Layouttabellen bzw.
<span class="irgendwas">-Orgien. Es gibt aber noch zwei weitere wichtige Argumente. Da hätten wir zum Beispiel das Thema
"Barrierefreiheit". Über <label> können zum Beispiel Screenreader eine genaue Zuordnung vornehmen. Allerdings weiß ich
nicht, ob die auch mit der zweiten Möglichkeit klarkommen. Außerdem bieten meines Wissens nach alle gängigen Browser ein nützliches Feature
dazu an.
Klickt mal spaßeshalber auf "Name". Und ruft dann aus "ein Wunder, ein Wunder". Aber bitte nicht "Jehova" sagen, sonst werdet ihr gesteinigt.
Beispiel
Und, habt ihr es bemerkt? Wenn nicht, so schaut mal genau auf das <input>-Feld. Dort wurde jetzt der Cursor/Fokus gesetzt.
Ihr könnt also sofort euren Namen eintippen. Falls sich unter euch ein ungläubiger Thomas befindet, bitteschön. Wir haben auch noch den
Vornamen. So, und mit diesem Wissen wagen wir uns jetzt mal an die Details unseres Formulars.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt