Formularbaukasten

Der Formularbaukasten dient als Muster für verschiedene Formulartypen. Die einzelnen Module können frei kombiniert werden.

• Aufbau: Jedes Formular wird mit <form> eingeleitet. In diesem <form> stehen alle Elemente, wie die Überschrift, das <fieldset>, die <legend> oder die Formularfelder.

• Überschrift: Ein Formularabschnitt oder das komplette Formular ist mit einer Überschrift <h3> versehen.

• Einleitungstext: Ist ein Einleitungstext für das Formular notwendig, kann dieser per <p>Einleitungstext</p> über das <fieldset> eingefügt werden.

• Zeilen: Die einzelnen Zeilen werden mit einem <p> erzeugt. In das <p> sind <label> und <input> eingeschlossen. Bestimmte Formular-Felder wie Radio-Buttons oder Check-Boxen haben spezifische Klassen. Der Absenden-Button steht in einer eigenen Zeile <p class="button-wrapper">.

• Tabindex: Werden die Formulare auf einer reinen Formularseite eingesetzt, sollte der Tabindex eingesetzt werden. Das erste Formularfeld erhält den Tabindex eins (tabindex="1"), das Zweite folgt mit tabindex="2". Kommt nur ein kleines Formularfeld unter anderem auf der Seite mit Texten und anderen Elementen vor, sollte kein extra Tabindex verwendet werden, sondern die normale Tabreihenfolge eingehalten werden.

• Legend: Über dem <fieldset> sollte für blinde Menschen ein <legend> vergeben werden. Sie erläutert noch einmal kurz, warum die nachfolgenden Formularfelder per <fieldset> gruppiert wurden.

>> Funktionsübersicht: Mail-Formular [2]

Im Titel der Seite steht "Fehler: ...". Die H1 lautet "Fehler bitte überprüfen Sie ihre Angaben". Darunter werden in einer Liste <ul class="listing"> die nicht korrekt ausgefüllten Felder aufgelistet. Über diese Aufzählungen können die Nutzer direkt zu den fehlerhaften Punkten springen.

Die fehlerhafte Zeile ist mit <p id="ab1" class="error"> markiert. Die genaue Fehlerbeschreibung wird über das Label innerhalb eines <span class="errormessage"> dargestellt.