Einfaches Formulardesign mit Ajax

Die Definition von Eingabefeldern ist auch unter HTML nicht kompliziert. Bei der Validierung, der Festlegung von gültigen Feldwerten sowie der optisch ansprechenden Darstellung ist allerdings einige zusätzliche Arbeit nötig.

Genau in dieser Bresche springt das Framework Lightform von Jeremie Tisseau, einem französischen Webentwickler für grafische Benutzeroberflächen. Lightform nutzt für sein Framework die beiden Komponenten Formcheck2 und Niceforms.

Lightform: Vorbereitungen

Das komplette Framework laden Sie unter webkreation.com/?dl_id=8 herunter und entpacken es. In der Datei index.php findet die Definition des Formulars statt, im Ordner Images finden Sie die Grafiken, js beheimatet die zusammengestellten Bibliotheken der eingesetzten Komponenten sowie die Übersetzungen der Texte und css die entsprechenden Formatierungen.Zuerst müssen Sie sich noch an die Übersetzung der Texte machen. Diese liegen aktuell nur in einer englischen und einer französischen Form vor. Im Rahmen des Artikels haben wir für Sie die Texte übersetzt.Sie können diese unter www.ceterumcenseo.net herunterladen und in das Verzeichnis <lightform>/js/lang kopieren. Die Umstellung der Sprache in der Steuerdatei wird später vorgenommen.

Das Grundgerüst

Am einfachsten verwenden Sie die Datei index.php als Grundlage und passen diese entsprechend an Ihre Bedürfnisse an. Es gibt einige Grundeinstellungen, die Sie tätigen müssen.Beim Parameter $to hinterlegen Sie die E-Mail-Adresse, an welche die Inhalte des Formulars übermittelt werden sollen. Die Inhalte versendet das Formular somit als Standard-Nachricht auf Basis der PHP-Funktion mail().Die Betreffzeile der E-Mail setzen Sie über den Parameter $subject, der mit dem Wert [LightFormX Contact Form] vorbelegt ist. Damit die Nachricht nicht von vorneherein in Ihrem Spamfilter landet, sollten Sie einen entsprechenden Text hinterlegen und im Anschluss überprüfen, ob dieser auch die Filterregeln passiert.Der komplette Inhalt der Nachricht wird über die Variable msg$ übergeben. Da diese vom Aussehen Ihres Formulars abhängt, wird die Zusammensetzung nach dem Design Ihres Formulars betrachtet.

Die HTML-Inhalte

Im Header der HTML-Seite wird eine Reihe von Dateien eingebunden:CSS-Datei:

Allgemeine Bibliothek aus Mootools:

FormCheck2 für Mootools:

Niceforms Bibliothek:

Sollten Sie die Daten in einem anderen Verzeichnis angelegt haben, passen Sie an dieser Stelle die Verzeichnisverweise entsprechend an.Damit Ihre Entwicklungen auch beim Laden der Seite aktiviert werden, ist eine weitere Javascript-Funktion im Header der Webseite notwendig.Diese nutzt eine Funktion von Mootools, die bereits vor dem kompletten Laden aller Seitenelemente mit der Ausführung beginnt: Es wird Formcheck mit einer Reihe von Parametern aufgerufen, auf die wir im weiteren Verlauf noch eingehen.Für die Darstellung eines Formulartags benötigen Sie ein Standard-HTML Element <input>, das mit mehreren Informationen angereichert wird.

Die erste Zeile beschäftigt sich mit dem Beschriftungstext des Formularfelds.<label> hat keine sichtbaren Auswirkungen auf die Darstellung am Bildschirm - es hilft lediglich, den Bezug zum Eingabefeld herzustellen. Das Element <label> und die Klasse blue sind mit entsprechenden CSS-Formatierungen verknüpft.Auch das Eingabeelement unterscheidet sich nur unwesentlich von einer normalen HTML-Formatierung. Lediglich die Klassenbezeichnung lässt vermuten, dass es sich dabei um einen Funktionsaufruf samt Übergabe von Formatierungsparametern handelt.Das Feld Name wird durch diese Definition zum Pflichtfeld gemacht mit einer Länge von mindestens drei Zeichen. Es ist darüber hinaus keine Eingabe von Zahlen erlaubt. Das gesamte Eingabefeld hat eine sichtbare Länge von 20 Zeichen, wobei natürlich auch mehr Buchstaben eingegeben werden können.