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.

Inhalt
  1. Einfaches Formulardesign mit Ajax
  2. Das Grundgerüst
  3. Formcheck ausreizen

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