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

$.Callbacks() in jQuery 1.7 Ab und an scheint doch nochmal etwas neues und sinnvolles in jQuery zu kommen, in der Version 1.7 sind es wohl unter anderem die $.Callbacks(). Im Pri...
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...
DropArea – Bildupload mit HTML5 und jQuery Das Input-Feld vom Typ File ist ein ausgesprochener Störenfried! Keine Präsentation einer fertigen Website ohne Diskussion darüber, wieso der "Durchsu...
CSS Grundgerüst automatisch erstellen lassen Der erste Wurf eines Templates ist recht nervig. Ich weiss nicht wie ihr vorgeht, aber ich beginne erst einmal damit die komplette Struktur in HTML au...

2 Antworten auf „Inline Labels für Formularfelder“

Schreibe einen Kommentar

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