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

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 Ergebnissen…
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 einspannen.…
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…