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.

© 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

© 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 lesen

Chronologische Liste und Netflix-Links -

Neuerscheinungen in der Übersicht -

Vorschau auf Film- und Serien-Highlights -

Mehr zum Thema

Webdesign

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.
Facebook

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?
Online-Recht

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.
Online-Recht in der Cloud

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…
E-Commerce-Logistik

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.