Ratgeber "Formulare in CSS"

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.

Formulare gestalten mit Javascript

© Internet Magazin

Formulare gestalten mit Javascript

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

image.jpg

© Archiv

Komplexe Layouts wie dieses Gewinnspiel lassen sich mithilfe von Javascript einheitlich umsetzen.

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.

Das könnte Sie auch interessierenRatgeber - Formulare gestalten mit Formalize

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
Ben Stiller Owen Wilson Zoolander Hansel
Vorschau auf Film- und Serien-Highlights

Prime Instant Video lockt im September mit Highlights wie "Zoolander 2", "Die Tribute von Panem – Mockingjay 2" und der neuen Staffel von "Mr.…