Formulare
Labels für Eingabefelder
Jedes Eingabefeld muss eine klare Beschriftung haben. Diese Beschriftung sollte immer mit dem <Label> Element gemacht werden, da man so die Verbindung zum Eingabefeld über das for-Attribut angeben kann. Dies bringt gleich zwei Vorteile:
- Wenn man auf das Label klickt, wird der Cursor direkt ins Eingabefeld gesetzt
- Screenreader können die Beschriftung richtig interpretieren
Um sehbehinderten Menschen das Leben zu erleichtern, sollte das Label zudem möglichst nahe am Eingabefeld stehen, da sonst bei einer starken Vergrösserung des Bildschirms nie beides sichtbar ist.
<form action="..."> <label for="name">Name:</label> <input type="text" id="name" /> </form>
Gruppierung von Eingabefeldern
HTML bietet die Möglichkeit mehrere Eingabefelder zu gruppieren und diesen Gruppen einen Namen zu geben. So können beispielsweise Vorname, Nachname, Strasse und PLZ und Ort zu einer Adresse zusammengefasst werden. Dadurch wird die Verständlichkeit erhöht und die Navigation vereinfacht.
In HTML stehen dafür die Tags <fieldset> und <legend> zur Verfügung.
<form action="..."> <fieldset> <legend>Adresse</legend> <label for="firstname">Vorname:</label><input type="text" id="firstname" /> <label for="name">Name:</label><input type="text" id="name" /> </fieldset> </form>