Webdesign könnte so schön sein, müsste man Formularen nicht ein attraktives Äußeres verpassen. Wir zeigen, welche Möglichkeiten es für die Gestaltung mit Javascript gibt.

Ab und an gilt es, ein richtig komplexes Formulardesign umzusetzen, bei dem die verwendeten   Formularelemente nichts mit dem gemein haben, was Browser bereitstellen. Dann gibt es nur eine Möglichkeit, nämlich die Umsetzung mit Javascript.

Grobe Vorgehensweise: Sie codieren das Formular mit Standard-HTML-Formularelementen. In Javascript-fähigen Browsern wird das  HTML-Formular gegen die grafische Version ausgetauscht. Mit Hilfe von Javascript werden  Interaktionen mit der Grafik an das versteckte HTML-Formular weitergegeben. Sendet der Nutzer das Formular ab, erhält der Server ein ganz gewöhnliches HTML-Formular, auf dessen Basis er wie gewohnt weiterarbeiten kann.

Javascript für außergewöhnliche Designs

Ein Beispiel für die Umsetzung mit Javascript ist das Gewinnspiel auf der Website des Automobil-Club Verkehr. Es soll online der Mitgliederzeitschrift möglichst ähnlich sehen. Das Gewinnspiel besteht in jedem Schritt  aus einer Frage mit vier Antwortmöglichkeiten. Von letzteren muss jeweils genau eine ausgewählt  werden. Ein klarer Fall für Radiobuttons. Damit beim Laden des Formulars in einem Browser ohne  Javascript nicht schon eine Antwort vorausgewählt ist, gibt es einen fünften Button. Dieser ist beim Laden aktiv, aber per CSS vor dem Besucher verborgen. Ist Javascript aktiv, erhält das Body-Tag die Klasse js. Auf dieser Basis lässt sich das Originalformular mit der Klasse .nojs gezielt in   Javascript-fähigen Browsern ausblenden:

Die jQuery-basierte Anwendungslogik steckt in der Datei www.acv.de/gewinnspiel/js/scripts.js. Das Skript prüft zunächst, ob die aktuell angezeigte Seite ein Formular enthält (Zeile 8). Dann deaktiviert es den Submit-Button (Zeile 10). Anschließend durchläuft eine Schleife alle im  Originalformular enthaltenen Felder und generiert daraus das HTML für das Javascript-Formular (Zeilen 13 bis 25). Dann erhält das Javascript-Formular einen sogenannten Event Handler, also  eine Funktion, die aufgerufen wird, wenn der Nutzer eine der Antworten anklickt (Zeile 33 bis  45). Diese Funktion überprüft, ob die angeklickte Antwort noch inaktiv, das heißt nicht  ausgewählt war.

Ist das der Fall, passieren drei Dinge: Durch Entfernen der Klasse inactive erscheint ein Kreuz im Ankreuzfeld der Frage. Der (versteckte) Radiobutton der zugehörigen  Antwort im Original-Formular wird per Javascriptausgewählt. Und: der Submit-Button wird  aktiviert. War die Antwort bereits ausgewählt, wird das Kreuz wieder entfernt und der Submit- Button deaktiviert.

Das könnte Sie auch interessieren
Ratgeber - Formulare gestalten mit Formalize