Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Jetzt testen
Dieter Petereit 24. August 2012

Ideal Forms 2.0: HTML5-Formular-Framework auf jQuery-Basis

Webdeveloper und Autor Cedric Ruiz stellt Version 2 seines Formular-Frameworks Ideal Forms vor. Nach einem kompletten Rewrite steht es auf Github zur kostenlosen Verwendung unter MIT- oder GPL-Lizenz bereit. Ideal Forms macht seinem Namen alle Ehre und bietet in der Tat sehr ansprechende Möglichkeiten, nebst einer soliden Validierung.

Ideal Forms 2.0: Responsiv ist es auch noch…

Ideal Forms setzt in seiner aktuellen Inkarnation auf jQuery ab 1.7 und jQuery UI ab 1.8 und unterstützt Webkit, Firefox, Opera und den Internet Exploder ab Version 8. Auf mobilen Plattformen wird Android ab Version 4 oder iOS ab Version 5 benötigt. Eine Demoseite zum Projekt zeigt anhand eines umfangreichen Formularbeispiels, was mit dem Framework möglich ist.

Die erzeugten Formulare verhalten sich responsiv, Mediaqueries sind nicht erforderlich. Ideal Forms passen sich stets der Größe ihres umgebenden Containers an. Für die optische Präsentation setzt Ruiz auf dynamische Stylesheets mit Less. So konnte er Ideal Forms mit Variablen, Mixins und Funktionen ausstatten, die mit herkömmlichem CSS nicht realisierbar sind. Zudem verfügt das Tool auf diese Weise über prädefinierte Templates. Eine der mitgelieferten Vorlagen verleiht Ihren Formularen den aus Ubuntu bekannten Look. Auf Github steht der Less-Quelltext bereit. Eine kompilierte CSS-Variante wird ebenfalls mitgeliefert.

Sprachlokalisierungen sind sehr einfach möglich. Ruiz sieht hierfür eine errors.js vor, die die entsprechenden Meldungen enthält und sehr leicht übersetzt werden kann. Im Auslieferungszustand finden sich neben dem englischen, fest verdrahteten Standard noch Dateien für französische und spanische Verwender. Eine deutsche Übersetzung gibt es nicht, dürfte indes lediglich einen maximalen Zeitaufwand von 10 Minuten erfordern. Die übersetzte Version der errors.js muss man dann nur noch nach dem Aufruf des Hauptscripts im Header der jeweiligen Seite einbinden.

Neben sprechenden Fehlermeldungen erlaubt Ideal Forms die Hinterlegung von Ausfüllhinweisen, die durch kleine Icons neben den Eingabefeldern per Klick aufgerufen werden können oder sich spätestens beim Beginn des Ausfüllens des jeweiligen Feldes selbstätig öffnen. So ist eine sehr gute Benutzerführung und -unterstützung möglich. Die Funktionalität des HTML5 Placeholders wird über ein Javascript-Polyfill realisiert.

Ideal Forms ist ausgesprochen sorgfältig dokumentiert. Ein schneller Produktiveinsatz ist gewährleistet. Wer also auf der Suche nach einer flexiblen, leistungsfähigen Formularlösung ist, sollte Ideal Forms in die engere Auswahl nehmen.

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

3 Kommentare

  1. Nette Sache und sieht sehr solide aus. Wobei ich LESS lieber mit meinem Basissystem per PHP vorkompiliere, es aber dafür umso lieber benutze. So spart man sich auch das zusätzliche LESS.js Script und das kompilieren „On-Fly“. Aber sonst eine tolle Sache die ich so gar nicht gefunden hätte, danke!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.