TU Berlin

Online-StyleguideFormularbaukasten

Inhalt des Dokuments

zur Navigation

Formularbaukasten

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

Markup

  • 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.
Formular
Lupe

Formularbaukasten: Fehlermeldungen

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.

Liste der nicht korrekt ausgefüllten Felder
Lupe

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

Fehlerhafte Zeile (rot markiert)
Lupe

nächstes Kapitel:

Navigation

Direktzugang

Schnellnavigation zur Seite über Nummerneingabe