Kalender
Anmeldung
Webmail
Hilfe
SchulungFEN Startseite > ~xx502 > Forms > Lektion24
Web Formulare
Kapitel 24 - Formularelemente beschriften (Label)
Eine allgemeine Methode Formularelemente zu beschriften ist ab HTML-Version 4 definiert.
Für Formularelemente wie z.B. Eingabefelder oder Auswahllisten gab es bisher keine logische Beschriftungsmöglichkeit. Man kann zwar beschreibenden Text vor ein solches Element setzen, aber ein solcher Text ist normaler HTML-Text, der keinen definierten Bezug zu dem Element hat, für das er als Beschriftung dient.
Die hier vorgestellten Labels stellen einen logischen Bezug zu einem Formularelement her. Am Bildschirm sieht man diesen Bezug nicht, intern ist er aber vorhanden und kann z.B. Menschen mit Behinderungen das Navigieren erleichtern.
|
<form> <table border="0"> <tr> <td><label for="vorname">Vorname:</label></td> <td><input type="text" id="vorname" /></td> </tr><tr> <td><label for="nachname">Nachname:</label></td> <td><input type="text" id="nachname" /></td> </tr> </table> </form> |
Mit Hilfe der rahmenlosen Tabelle werden Beschriftung und Eingabefelder sauber angeordnet.
Das Besondere ist aber, daß hier eine beziehung zwischen Beschriftung und zugehörigem Eingabefeld hergestellt wurde.
Dazu muß das Formularfeld mit der Eigenschaft id= einen eindeutigen Namen bekommen.
Mit dem label-Tag wird der zugehörige Beschriftungstext definiert, dazu muß als Wert der Eigenschaft for= der beim Formularfeld angegebene Name verwendet werden.
Ich finde die Verwendung auch hilfreich, um den Überblick bei komplizierten Formularen nicht zu verlieren.
Und noch ein weiteres Kapitel: Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen
Menü
Inhalt
Tabulator-Reihenfolge, Tastaturkürzel und Ausgrauen