Inline Labels für Formularfelder

„Normalerweise sollte man“ die Beschriftung für ein Input-Field immer mit dem Tag <label> kennzeichnen. Normalerweise deshalb, weil es sich scheinbar noch nicht herumgesprochen hat, das es so funktioniert, und anders geht es ja auch – es sieht zumindest gleich aus. Vonseiten der CSS-Formatierung hat <label> aber prima Vorzüge, da ich diese direkt ansprechen kann, und nicht mit diversen Klassen und Div-Containern die Finger brechen muss.


Neben den sehr netten Möglichkeiten, die sich so bieten, ist auch klar, dass man mit jQuery zum Beispiel sehr gut die Labels via Selektoren ansprechen kann, und dann auch wirklich nur die Labels erwische! Ein nettes Plugin für jQuery sorgt für einen zusätzlichen Design-Trick!

Screenshot der Inline Labels

Es ermöglicht, dass die Label Inline – also im Formularfeld – dargestellt werden können. Das sieht nicht nur nett aus, sondern sorgt auch für Platz in großen Formularen. Selektiert man ein Feld faded das Plugin den Label aus, ist das Feld gefüllt, ist der Label komplett verschwunden. Man kann da ein wenig über die Usability diskutieren, aber ein Hingucker ist es alle Male, wie die Demo auf der Seite zeigt.

Wenn man ein „korrektes“ Formular aufgebaut hat, ist das Einbinden übrigens recht einfach:

$(document).ready(function(){
  $("label").inFieldLabels();
});

Wie ich bereits sagte, nutzt man Labels kann man einfach drauf zugreifen! :)

Ähnliche Beiträge

Multiple File Uploads, HTML und Open Source Formulare lassen sich inzwischen ganz gut designen, allerdings gibt es ein Formularelement, das alle Design-Versuche vehement abwehrt: der Dateiupload...
23 Bildergalerien für jQuery Beim Blogrammierer hat sich einer besonders viel Arbeit gemacht :) Hier gibt es 23 Bildergalerien für jQuery zu bestaunen, nebst Screenshot, Demo und ...
HTML Table CSS Style Generator Nachdem ja nun der Bann von HTML Tables scheinbar aufgehoben worden ist, darf man es ja wagen diese wieder zu verwenden. Das macht auch Sinn, weil tab...
Autoresize von Textareas mit jQuery Textareas sind immer so eine Sache: egal wie groß man sie macht, der Kunde findet sie zu klein. Auch die Breite der Eingabe ist oft problematisch, da ...

2 Kommentare

Schreibe einen Kommentar