Formulaire avec labels mouvants

Attention ! Cet article a plus de 1 an (3000 jours), ce qui signifie qu'il n'est pas forcément à jour !

Aujourd’hui j’ai fait un petit plugin pour avoir des labels mouvants dans un formulaire.

form2

L’attribut Placeholder sur un INPUT est de plus en plus utilisé, cependant il n’est pas des plus "user friendly". En effet, lorsqu’un utilisateur focus un INPUT, le placeholder disparaît ne laissant à l’utilisateur aucun indice sur le champ qu’il est en train de remplir. La solution est d’y ajouter des labels. Cependant, l’ajout de ces labels duplique les informations. Une autre méthodes, pour ne pas dupliquer l’information, serait de ne pas mettre les mêmes informations. Exemple: un label "Prénom" avec un input ayant le placeholder "Entrer votre prénom". Encore une fois je ne considère pas cela comme idéal, ça ne fait pas très propre. Par contre, j’adore l’utilisation du placeholder sans label, la page devient moins charger visuellement.

Ici, j’ai donc mis de côté les placeholders et j’ai fait un "semblant" de placeholder avec les labels.

Vous pouvez télécharger le code pour ensuite l’utiliser, l’améliorer, le commenter, etc.

MO

Catégories :

HTML CSS Javascript