Plugin jQuery : In-Field Labels, placer vos labels dans les champs de formulaires

La présentation des formulaires a bien évoluée au fil du temps.

Aujourd’hui la question est sur la façon de positionner les labels par rapport à la zone de saisie.

Avant ? Après ? Et pourquoi pas dedans ?

L’idée est simple.

Vous partez de la structure suivante :

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

Vous appliquez le css suivant :

[css]
form p { position:relative }
label { position:absolute; top:0; left:0}
[/css]

Et vous lancez le plugin :

[html]
$(document).ready(function(){
$("label").inFieldLabels();
});
[/html]

Simple non ?

Le label change de couleur lorsque la zone a le focus et disparait à la première saisie.

Démo, option et source sur le site officiel.

Lien :

• In-Field Labels jQuery Plugin