Ajax Lightform

Einfaches Formulardesign mit Ajax

Ajax bietet viele Möglichkeiten, Inhalte ansprechend an Ihre Benutzer zu übermitteln. Vereinfachen Sie die Entwicklung von Formularen durch Frameworks.

  1. Einfaches Formulardesign mit Ajax
  2. Das Grundgerüst
  3. Formcheck ausreizen
internet, webdesign, ajax, formulare, frameworks, ajax lightform

© Internet Magazin

internet, webdesign, ajax, formulare, frameworks, ajax lightform

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:

<link rel="stylesheet"
href="css/main.css"
type="text/css" media=
"screen" />

Allgemeine Bibliothek aus Mootools:

<script type="text/javascript"
src="js/mootools.js"></script>

FormCheck2 für Mootools:

<script type="text/javascript"
src="js/formcheck.js"></script>

Niceforms Bibliothek:

<script type="text/javascript" src="js/niceforms.js"></script>

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.

<label for="name"><strong><span
class="blue">*</span> Name : </
strong></label><input id="name" name="name" type=
"text" class="validate['required',
'length[3,-1]','nodigit']" size="20" />

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.

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.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".