Formulare gestalten mit Javascript
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:
.js .nojs {
display: none
}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.
