27
OCT

FlowupLabels.js - Une alternative ergonomique aux placeholders

Publié le 27/10/14 à 07h45 par DJo

FlowupLabels.js est une bibliothèque Javascript permettant de mettre en place un système de labels alternatifs aux placeholders HTML.

FlowupLabels.js est une bibliothèque Javascript permettant de mettre en place un système de labels alternatifs aux placeholders HTML.

Aujourd'hui, les formulaires sans libellés, avec uniquement un placeholder pour indiquer quel est le champs, sont à la mode.

Seul problème, si vous utilisez un navigateur avec autocomplétion de formulaires, vous n'avez pas le temps de vérifier que tout est bien écrit au bon endroit, le placeholder disparaissant dès qu'une valeur est saisie.

FlowupLabels.js est une solution plutôt ergonomique aux placeholders, elle permet de réagir comme ces derniers quand aucune valeur n'est saisie dans le champ du formulaire puis va transiter juste au dessus du texte en plus petit dès que le texte est saisi.

Ainsi, on a toujours l'information sur le nom du champ sans pour autant avoir de gros libellés qui cassent le design de nos pages web.

Voici comment lancer le script sur vos pages:

$('.FlowupLabels').FlowupLabels({
        // Handles the possibility of having input boxes prefilled on page load
        feature_onInitLoad: false, 
        // Class when focusing an input
        class_focused:      'focused',
        // Class when an input has text entered
        class_populated:    'populated' 
});

Le script est compatible dès Internet Explorer 8 et plus, Chrome, Firefox...

Vous pouvez personnaliser le style du rendu du libellé grâce aux classes que la bibliothèque utilise.

 

Site Officiel

Baraguiné par rdomingue le 05/11/14 à 19h27
rdomingue sur La Ferme du Web
Il y a toujours le mien, qui support l'autocompletion du navigateur, et qui n'est pas aussi rigide avec les classes.
http://beta.rdsign.net/exemple/newform/
Je n'ai cependant pas fait d'article dessus encore.
Baraguiné par Nilpohc le 03/12/14 à 22h46

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web