Tuto application Facebook

Créer une application Facebook de A à Z en PHP. API Facebook, viralité, monétisation ...

Tuto Symfony2

A travers le projet WatchMyDesk, apprenez à maîtriser le Framework PHP5 Symfony2.

Web Event Lyon #4

Plus d'une dizaine de conférences, des ateliers pratiques, barcamps et cliniques web, le 15 juin 2012.

Se
Connecter Créer
un compte

21
JUIN

jQuery FormLabels - Les labels de vos input en surimpression

Publié le 21/06/10 à 08h54 par DJo

FormLabels est un plugin jQuery permettant de remplacer les labels classiques de vos input en un texte en surimpression, directement dans le champ input. Idéal pour économiser de la place dans votre formulaire.

FormLabels - Un plugin jQuery pour vos formulaires

Voici un plugin jQuery intéressant pour ceux qui s'arrachent les cheveux pour savoir comment place la légende de leur formulaire de conexxion.

FormLabels permet d'inscrire directement à l'intérieur des input la légende qui lui est associée.

Fini les champs labels trop gourmands en espace !

Une fois que vous cliquez dans le champ de texte, l'opacité de la légende baisse, et dès que vous commencez à écrire quelque chose, elle disparait.

FormLabels - Disparition de la légende lors de l'écriture

Le plugin est compatible avec les différents navigateurs actuels (Et même IE6, j'ai testé), et dans tous les cas se dégrade parfaitement.

Voici comment l'utiliser:

<input type="email" name="email" title="Addresse Email" />
<input type="password" name="password" title="Password" />
<input type="text" name="password" title="Mot secret" />
<textarea name="comments" title="Commentaires...">

Et côté jQuery:

  $(function(){
         $.fn.formLabels();
   });

Un bon plugin esthétique, reste à savoir si ce genre de plugin n'altère pas l'accessibilité du formulaire pour les personnes mal voyantes etc.

Site Officiel

A voir aussi sur le même sujet:

8 Commentaires

jquery

form

ergonomie

input

label

Prix com' intelligentBaraguiné par farfadet le 21/06/10 à 09h14

Question accessibilité, l'attribut title devrait suffire.

Si on souhaite être bordé, il suffit de mettre quand même un élément mais qui est rendu invisible (par javascript si on veux gérer le cas du js désactivé). Un navigateur pour malvoyant ne gérant pas (a priori) la feuille de style, le label apparaitra et il n'y a aura pas de problème de place puisque tout sera à la ligne.

Baraguiné par Severin le 21/06/10 à 09h50

Niveau accessibilité, c'est vraiment pas ça.

L'accessibilité, ce n'est pas que pour les non-voyants, c'est aussi pour ceux qui n'ont pas JS par exemple. Et là, sans JS, c'est clairement pas accessible.

La seule et unique façon de définir un input c'est : http://pastebin.com/EEsQ9arK

Ensuite, au JS de cacher le label et d'en récupérer le titre.

Pour moi c'est la seule façon d'être vraiment propre en terme d'accessibilité.

Baraguiné par KinobiWeb le 21/06/10 à 09h55

En attendant HTML5 et "placeholder".

Baraguiné par Severin le 21/06/10 à 10h02

@KinobiWeb : Attention, utiliser les nouveautés de HTML5 tel quelle c'est tous sauf accessible.
Il faut penser aux temps que vont mettre les utilisateurs à migrer vers des navigateurs compatibles.

Baraguiné par KinobiWeb le 21/06/10 à 13h16

@Severin Oui tout à fait, d'où le "En attendant".
C'est très frustrant d'ailleurs, ça donne presque envie d'une uniformisation fermée "à la Apple" pour le html (j'exagère hein).

Par contre je pense qu'il faut certes penser à l'accessibilité mais pas non plus tomber dans l'extrémisme et ne plus rien faire.

Il est possible d'avoir ceci avec du JS tout en conservant : label for input

Baraguiné par Zuff le 22/06/10 à 10h51

Pour l'accessibilité il faut un label rattaché au champs par l'attribut "for" :

Votre Login

Baraguiné par Zuff le 22/06/10 à 10h58

Pour l'accessibilité il faut un label rattaché au champs par l'attribut "for" :

Baraguiné par Zuff le 22/06/10 à 11h03

Pour l'accessibilité il faut un label rattaché au champs par l'attribut "for" :
balise span id="spnLogin"
balise label for="txtLogin"
Votre Login
baliseDeFin /label
balise input name="txtLogin" type="text" id="txtLogin"
baliseDeFin span

Pour faire l'effet de surimpression en JQuery :
jQuery.fn.LabelDansTexte = function () {
// faire apparaitre le label de renseignement dans le texte
var $SpanGeneral = this.addClass('overlabel')
var $ChampsTexte = $SpanGeneral.find('input');
var $LabelDuTexte = $SpanGeneral.find('label');

$ChampsTexte
.focus(function () {
$LabelDuTexte.hide();
})
.blur(function () {
if (this.value == '') { $LabelDuTexte.show(); }
});

$LabelDuTexte.click(function () {
$ChampsTexte.trigger('focus');
});
};

Puis dans le $(document).ready :
$('#spnLogin').LabelDansTexte();

Avec la feuille de style :
.overlabel label
{
position:absolute ;
top : 3px;
left : 7px;
color : #999999;
cursor : text;
}

.overlabel input
{
width:125px;
}

PS : c'est un peu chaud pour expliquer du code HTML (même le