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

deck.js – Präsentationen in HTML Es muss nicht immer Powerpoint sein! Wenn ich eins gelernt habe in meinem ehemaligem Consulter-Leben, dann ist es das, ausreichend früh anzukommen um ...
Schnellere Webentwicklung mit MarkerCSS? Mit all den notwendigen Browser-Workarounds, und der generellen Schreibwütigkeit, die man zur Erstellung von CSS aufbieten muss, gehen derzeit viele B...
Das Wunder des Live Reloads Ich zeige mich ja selten begeistert von Neuerungen muss ich sagen, ich könnte durchaus noch mit dem Notepad entwickeln wenn ich es wollte. Nach wochen...
Star Rating mit jQuery jRating Ich glaube die ersten die es hatten war Amazon, jene verteufelt einfache Möglichkeit einen Artikel ganz schnell mit einem bis fünf Sternen zu bewerten...

2 Kommentare

Schreibe einen Kommentar