- Sliding Labels - jQuery and Mootools Version › Webstandard-Blog

Sliding Labels - jQuery and Mootools Version

JavaScript - 4 Feb, 2010

Twittern
Kommentare (5)

Wer im eCommerce erfolgreich sein will kommt um eines nicht herum - Formulare. Ob zur Registrierung und einer darauffolgenden Bestellung, der Umsetzung von Formularen kommt eine hohe Verantwortung zu, um so wichtiger ist es, dass es für die zukünftigen Kunden verständlich ist. Einen sehr interessanten Ansatz hierzu liefert Tim Wright mit Form Design with Sliding Labels. In diesem Umsetzung eines Formulars werden die Label-Elemente als Inline-Labels direkt in das Eingabefeld geschrieben. An sich nichts neues, aber auf focus gleiten diese Label mittels jQuery zur Seite, so dass der Anwender immer weiß und auch erkennt was in diesem Eingabefeld von ihm oder ihr an Angaben erwartet wird.

... Making sure everything is still usable without JavaScript is important (no matter what people say), it’s just a basic principle of progressive enhancement...

Bei über 110 Kommentaren in weniger als einer Woche kann man sich des Eindrucks nicht erwehren, dass dieser Ansatz der Version 1.1 bei den Anwendern ankommt. Und das zu Recht, denn bei der Umsetzung von Sliding Labels hat Tom auch an die Anwender gedacht, die durch ihren Browser keine JavaScript-Unterstützung aufweisen können. Die folgende Abbildung zeigt daher, wie das Formular mit JavaScript ( links ) und ohne JavaScript ( rechts ) aussieht.

SlidingLabels - JavaScript on - off
JavaScript on ( links ), off ( rechts )

jQuery & Mootools Version

Da nicht jeder das wie in diesem Beispiel verwendete JavaScript-Framework jQuery favorisiert, hat es dank David Walsh auch nicht lange gedauert bis ein Mootools-Pendant von Sliding Labels das Licht der Welt erblickt hat.

Update: Kleine Anpassungen in Sachen Textfelder und einem Bugfix für den Safari-Browser führten dazu, dass Tim bereits wenige Tage nach Version 1.1 Sliding Labels v2 veröffentlicht hat.

Optimierung des Formulare-Quellcodes

Bei aller Vorfreude darauf dieses Feature eventuell selbst zu implementieren, sollten zukünftige Nutzer dieser beiden Varianten nicht vergessen, dass eine zusammengehörige Gruppe von Formularelementen immer von einem fieldset umschlossen sein sollten! Auch wenn es bei den beiden Code-Beispielen mit hoher Wahrscheinlichkeit nur um den Effekt der Sliding Labels geht, sollte dieser Aspekt ebenso berücksichtigt werden, wie der das eine Überschrift einer Gruppe von Formularelementen mit dem dafür zur Verfügung stehenden Tag legend versehen werden sollte.

Weiterführende Informationen zum Layout von Formularen und einer daraus resultierenden Usability von Formularen, findet Ihr in den hier verlinkten Beiträgen.