Webdesign-er.com Inhalte zum Thema Webdesign für Webdesigner und Interessierte

Benutzerfreundliche Formulare mit CSS

Einleitung

Während vor wenigen Jahren die Mehrzahl der Internetseiten noch ohne interaktive Elemente auskam sind diese heute die Regel. So verdrängte  das klassische Kontaktformular den inzwischen fast zu einer Rarität gewordenen E-Mail Link per mailto.

Aber auch andere Formen der Eingabe durch Benutzer, wie Kommentarfunktionen oder aufwendige Befragungen per Web-Formular nehmen immer mehr zu. Quasi zeitgleich mit der geschilderten zunehmenden Verbreitung von interaktiven Elementen gewinnt auch die Anforderung der Barrierefreiheit einer Webseite immer mehr an Bedeutung. Mit CSS 2 existiert inzwischen auch ein geeignetes Mittel zur Umsetzung dieser Anforderung, das von den gängigen Browsern mehr oder weniger gut interpretiert wird.

Dieses Tutorial befasst sich in erster Linie damit, wie man dem Zusammentreffen dieser Veränderungen begegnen kann. Kurz, wie schafft man es, dass die Besucher auch bei immer aufwendigeren Formularen nicht den Überblick verlieren und wie kann an dabei die maximale Qualität der Benutzerführung erreichen.

Grundlagen HTML Tags für Formulare

Neben den klassischen Tags für die Erstellung der Eingabefelder oder Auswahlmöglichkeiten in Formularen gibt es seit HTML 4.0 eine Reihe weiterer Tags, die zur Erhöhung der Benutzerfreundlichkeit bei Formularen beitragen sollen

Der <fieldset> Tag

Zunächst wäre hier der <fieldset> Tag zu nennen. Dieser ermöglicht das optische und strukturelle Gruppieren von Formularelementen in sinnvolle Kategorien.

Der <legend> Tag

Mit Hilfe des <legend> Tags ist es möglich, die mit dem <fieldset> Tag angelegten Gruppierungen mit einem Titel zu versehen. Dieser steht nicht nur optisch am oberen Rand des Fieldsets, sondern ist diesem auch strukturell zugeordnet. Der <legend> Tag sollte sich direkt im Anschluss an den öffnenden <fieldset> Tag befinden.

Der <label> Tag

Damit der Benutzer weiß, welche Art der Informationen in ein Formularfeld eingegeben werden sollen, muss man diese beschriften. Bis vor kurzem wurde dies in der Regel durch eine optisch neben dem Formularelement stehende Beschriftung erreicht, die häufig dann mit Hilfe einer Tabelle in eine Symmetrie zueinander gebracht wurden.

Der Nachteil an dieser Lösung ist die fehlende strukturelle Bindung von Beschriftung und Formularelement. Um dieses Problem zu beheben wurde ebenfalls mit HTML 4.0 der <label> Tag eingeführt, der eben eine solche Zuordnung erlaubt.

Accesskeys

Accesskeys sind eine weitere Möglichkeit die Benutzerführung zu vereinfachen, indem man mit ihrer Hilfe per Tastendruck gezielt zu einem bestimmten Formularelement wechseln kann.

Allerdings wird diese Methode zur Zeit nicht von allen Browsern einheitlich unterstützt, so dass hier auf weitere Ausführungen dazu verzichtet wird.

Beispielformular

Das folgende Beispielformular in validem XHTML besteht lediglich aus verschiedenen Formularelementen und einigen <br /> und <div> Tags und verwendet keinerlei Tabellen oder andere gestalterische Elemente im HTML.

Die funktionale Gestaltung wird durch folgende CSS-Datei auch optisch aufgewertet.

Die Formularelemente werde hier mittels float Anweisung neben den zugehörigen Beschriftungen platziert. Am Ende einer Zeile wird das floating durch einen <br /> Tag aufgelöst, dem eine clear: both; Anweisung zugeordnet ist. Checkboxen und Radiobutton sind hierbei in jeweils einem <div> Container zusammengefasst.

Sowohl farblich als auch in ihrer Größe sind alle Elemente und Beschriftungen selbstverständlich völlig frei anpassbar.

Darüber hinaus ist sicher noch das CSS - Pseudoattribut focus erwähnenswert, dessen Einsatz eine gesonderte Gestaltung des gerade aktiven Formularelements erlaubt. So lässt sich beispielsweise das Textfeld in dem sich der Cursor befindet hervorheben.

Theoretisch ist nach CSS 2 auch eine Zuordnung der Formularelemente über beispielsweise input[type=text] (in den eckigen Klammern wird der jeweilige Elementtyp angegeben) möglich. Diese Variante wird jedoch bisher vom Internetexplorer nicht interpretiert und ist daher im Moment von geringer praktischer Relevanz.

Ein Praxisbeispiel für die benutzerfreundliche Gestaltung von Formularen mit CSS findet sich auf einer, vom Autor dieses Tutorials betriebenen Webseite: Beim Arbeitslosengeldrechner auf sozialleistungen.info wurde das Formular nach den vom Autor beschriebenen Methoden umgesetzt.

Autor des Tutorials: Philipp Ronicke