JLabel - Pré-remplissez vos inputs via leur label avec style

JLabel est un plugin JQuery qui vous permet de pré-remplir vos inputs avec style via le texte de vos balises labels.

Avec ce plugin, vos labels apparaissent directement dans les champs auquels ils sont associés. Lorsque l'internaute clique sur un champ, le label s'efface progressivement pour lui permettre d'entrer du texte.

Grâce à ce plugin, on comprend directement à quoi correspondent les inputs et quelles informations on doit entrer. En somme, cela propose une expérience utilisateur accrue.

Attention: ce plugin ne pré-rempli pas à proprement parlé vos champs textes, c'est juste un effet qui fait apparaitre vos labels sur vos champs, et non une valeur (value) attribuée par défaut. Si vous validez le formulaire sans rentrer du texte, le champ sera vide !

Code:

Côté code, rien de bien compliquer, il faut bien entendu inclure le plugin dans votre page html, puis déclarer quel élément sera soumis au plugin via son id, sa class ou encore son type de champ:

$('#id_input').jLabel();

Enfin, vous pouvez configurer l'effet lorsque l'on clique dessus, comme sa transparence ou sa vitesse d'effacement :

$('#id_input').jLabel({ speed : 1000, opacity : 0.1 });

Enfin, sachez que si le plugin ne trouve pas la balise label associée à un champ, il essayera de faire passer l'attribut title de ce dernier pour son label  !

Un plugin simple et efficace !

Site officiel