direkt zum Inhalt springen

direkt zum Hauptnavigationsmenü

Sie sind hier

TU Berlin

Inhalt des Dokuments

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:

Zusatzinformationen / Extras

Direktzugang

Schnellnavigation zur Seite über Nummerneingabe

Diese Seite verwendet Piwik für anonymisierte Webanalysen. Mehr Informationen und Opt-Out-Möglichkeiten unter Datenschutz.

Ansprechpartner/in

Corporate Design & Online-Design: Pressestelle

Technik: tubIT