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.

<p>
  <label for="field_id">Label Text</label><br />
  <input type="text" name="field_id" value="" id="field_id">
</p>

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

Reale Schatten mit jQuery Schatten gehen ja super mit CSS3, aber zugegebenermaßen muss man etwas Aufwand betreiben um diese realistisch erscheinen zu lassen. Insbesondere wird ...
Catch404 – 404 mit jQuery Abfangen 404 sind eine sehr unschöne Sache, vor allem bei einer internen Verlinkung. Hier kann man aber zumindest durch Studieren der Log-Files merken, das etw...
In Place Editing mit jQuery In Place Editing ist das nächste große Ding, aber was heisst das eigentlich? Normalerweise funktionieren die meisten CMS über ein Backend, und ein Fro...
jQuery Plugin Boilerplate Schon seit geraumer Zeit verwende ich in jQuery eine Menge selbst geschriebener Plugins, das erhöht die Wiederverwendbarkeit von Code deutlich. Aber e...

2 Kommentare

Schreibe einen Kommentar