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

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…