Formulare

Texteingabefelder können ein- oder mehrzeilig sein. Die Länge eines Eingabefeldes ist an der durchschnittlichen Textlänge auszurichten, die ein Nutzer hier eingibt. Das erleichtert dem Nutzer die Orientierung. Bezüglich des Eingabeformates ist manchmal eine Benutzerunterstützung notwendig - eine Beschreibung oder ein Beispiel können sehr hilfreich sein.
Stand 24.10.2012

Inhaltsübersicht:

1. Eingabefelder
2. Buttons
3. Fehlermeldungen

Eingabefelder

Mit dem <label>-Element wird eine Beschriftung und diese über das for-Attribut mit dem Formularelement verknüpft. Dazu muss der Inhalt des for-Attributes identisch sein mit dem id-Attribut des zugehörigen Formularelementes.

Beispiel XHTML-Datei - Formulare (Ausschnitt):

<!-- Beginn Formularabschnitt --> <fieldset>
<!-- Titel für Formularabschnitt --> <legend>Persönliche Daten</legend>
<!-- 1. Eingabefeld mit Beschriftung --> <label for="vorname">Vorname:</label>
<input type="text" id="vorname" value="Ihr Vorname" /><br />
<!-- 2. Eingabefeld mit Beschriftung --> <label for="nachname">Nachname:</label>
<input type="text" id="nachname" value="Ihr Nachname" />
<!-- Ende Formularabschnitt --> </fieldset>

In HTML5 gibt es für Eingabefelder neu das placeholder-Attribut, in dem Texte als Platzhalter hinterlegt werden können. Wird das Eingabefeld aktiviert, verschwindet der Text automatisch.
Ebenfalls hinzu kommen zahlreiche type-Attributwerte (color | date | datetime | datetime-local | email | file | image | month | number | password | range | search | tel | time | url | week).

Screenreader verbinden Beschriftungen nach festen Regeln mit den Eingabefeldern von Formularen. Doch auch optisch ist die Verbindung von Beschriftung und Formularfeld für ein barrierefreies bzw. barrierearmes Webdesign sicher zu stellen. Es empfiehlt sich, die Beschriftung von Formularelementen über Style Sheets links neben oder über dem zugehörigen Eingabefeld anzuordnen. Klickt der Nutzer dann mit der Maus auf die Beschriftung, springt der Mauszeiger automatisch in das zugehörige Eingabefeld.

Pflichtfelder (auch: Mussfelder) sind gesondert zu kennzeichnen, i.d.R. wird ein Sternchen (*) verwendet, welches der Beschriftung angefügt wird. Die sicherste Methode, Pflichtfelder zu kennzeichnen, ist das Ausschreiben eines Wortes wie "Pflicht" in der Bezeichnung des betroffenen Formularelementes.

Formularelemente können über das <fieldset>-Element zu Formularabschnitten zusammengefasst werden. Über das <legend>-Element erhält eine durch das <fieldset>-Element umschlossene Einheit einen Titel und der inhaltliche Sinn des jeweiligen Formular-Abschnittes wird hervorgehoben.

Bildbeschreibung "Formulare": Bildschirmfoto der optischen Browser-Ansicht des vorangegangenen Quelltext-Beispiels zur Kennzeichnung von Formularen.

Ziel einer barriere-armen Umsetzung von Webseiten ist es, alle Inhalte skalierbar zur Verfügung zu stellen. Im Internet Explorer 6 gibt es jedoch Probleme bei der Schriftvergrößerung, die Schrift in Formularfeldern wächst nicht standardmäßig mit. Deshalb ist es notwendig, über CSS explizit eine relative Schriftgrößenangabe für die Elemente <input> (einzeiliges Eingabefeld), <select> (Auswahlliste) und <textarea> (mehrzeiliges Eingabefeld) zu hinterlegen.

Beispiel CSS-Datei - Eingabefelder (Ausschnitt):

input, select, textarea {
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: 1em;
}

Seitenanfang

Buttons

Ein Button ist ein als Verweis realisierter Text, der als Schaltfläche dargestellt wird. Die Beschriftung von Buttons sollte auf die entsprechende Aktion hinweisen, die der Nutzer durch das Anklicken auslöst: "Suchen" neben einem Sucheingabefeld, "Absenden" bei Anfrageformularen, "Weiter" bei Abläufen, "Bestellen" bei einer Bestellung.

Buttons können über CSS gestaltet werden, bei der Verwendung der Standard-HTML-Buttons werden diese betriebssystemabhängig im jeweiligen Erscheinungsbild (engl. Look-and-Feel) dargestellt. Das nachfolgende Bild zeigt ein und denselben Button in verschiedenen Betriebssystemen (von links nach rechts: Microsoft Windows XP, MacOS X 10.3, Linux Debian 3.0) und Browser-Umsetzungen (von oben nach unten: Opera, Mozilla Firefox, Microsoft Internet Explorer).

Bildbeschreibung "Buttons": Bildschirmfotos verschiedener Layouts eines Button, abhängig von Betriebssystem und Browser.

Seitenanfang

Fehlermeldungen

Werden Eingaben über mehrere Formularseiten verteilt, ist vor dem endgültigen Absenden eine Übersichtsseite mit Korrekturmöglichkeit anzubieten. Fehlermeldungen bei Falscheingaben bzw. bei fehlenden Angaben sind deutlich hervorzuheben. Ebenfalls sollten sie in direktem Zusammenhang mit dem betroffenen Eingabefeld dargestellt werden. Dem Nutzer muss erkenntlich sein, inwieweit er eine falsche Angabe gemacht hat.

Nach dem Absenden eines Formulares ist es üblich, eine Bestätigungsseite mit den versandten Daten auszugeben.

Seitenanfang