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

Favicon mit Javascript austauschen Nach meiner bescheidenen Meinung sind Favicons innerhalb einer Webanwendung die Elemente, denen die wenigste Beachtung geschenkt wird. Ich habe ja sch...
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 ...
HTML5 File Upload in jQuery Eine der sinnvollsten Erweiterungen von HTML5 (und wahrscheinlich auch die am meisten benutzte) ist der neue Datei-Upload. In der Vergangenheit war es...
HTML5 Validierung mit jQuery HTML5 besitzt eine eingebaute Validierung für Formular-Elemente, das dumme ist nur, diese funktioniert derzeit nur auf Webkit-Browsern und nicht auf F...

2 Antworten auf „Inline Labels für Formularfelder“

Schreibe einen Kommentar

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