Share
Les formulaires Web sont un sujet d'actualité en matière de conception de sites Web et d'interaction avec les utilisateurs. Les raisons à cela sont vastes, mais l'une des raisons les plus évidentes est que les formulaires sont le moyen le plus simple pour un utilisateur d'entrer des informations dans votre application. Dans cet article, nous aborderons quelques techniques permettant à vos formulaires de répondre aux commentaires de l'utilisateur, tout en masquant des éléments inutilement déroutants ou accablants..
Commençons!
Imaginez un formulaire comme une conversation que vous avez avec votre utilisateur. Dans une conversation, il y a un sentiment de d'avant en arrière ce qui se produit, chaque partie invitant l’autre partie à répondre. Supposons, par exemple, que votre utilisateur vienne s'inscrire ou se connecter. Dans les deux cas, vous avez besoin de son courrier électronique. Par conséquent, pourquoi ne pas commencer par cela??
Donnez-moi votre email, et je vérifierai si vous avez un compte. Si c'est le cas, je vous demanderai votre mot de passe, sinon je vous laisserai me donner un nouveau mot de passe, puis vous le confirmerez avec moi..
Ainsi, lorsque l'utilisateur arrive à la page avec le formulaire, il affiche une invite très claire: "Quelle est votre adresse e-mail?"
Nous connaissons tous ce gars. C'est le gars que vous évitez parce qu'il parle sans cesse et ne semble pas vraiment écouter ce que vous avez à dire. Franchement, ce type est vraiment bouleversant et je ne suis pas sûr que quiconque aime ça. Ne sois pas ce mec.
Dans vos formulaires, apprenez une leçon de lui. Au lieu de confronter votre utilisateur à un nombre important d'entrées, envisagez de réduire sa charge de travail en créant des entrées réactives..
Jetons un coup d'oeil à un exemple simple.
Le processus de connexion ressemble à ceci: je saisis mon adresse e-mail, puis mon mot de passe, puis appuie sur Entrée. Dans cet exemple, vous apprendrez à afficher chacun de ces champs uniquement après avoir rempli le champ précédent, en utilisant simplement HTML et CSS. Nous allons construire cela, puis une version modifiée.
Commençons par un premier coup au balisage.
Si cela vous semble un peu intimidant, ne vous inquiétez pas, je vais expliquer chaque article. Commençons par l'entrée de courrier électronique. Nous voyons quelques attributs ajoutés à la balise au-delà du nom. Tout d'abord, le type de saisie est défini sur "email"; Il s'agit d'un type d'entrée relativement nouveau qui nous donne un comportement spécial dans la prise en charge des navigateurs. Par exemple, sur l'iPhone, le symbole "@" apparaîtra sur le clavier principal.
Une autre caractéristique des types de saisie est que les formulaires HTML5 ont des capacités de validation au niveau du navigateur. Cela signifie que vous n'avez pas besoin d'écrire JavaScript pour valider des éléments de formulaire de base! Notez que nous avons un attribut "requis" sur les éléments email et mot de passe. Une fois ces deux éléments renseignés et leurs valeurs considérées comme valides par le navigateur, vous pouvez même les cibler avec le :valide pseudo sélecteur.
C'est génial, mais nous pourrions l'améliorer. Par exemple, le navigateur accepte "a @ b" comme courrier électronique acceptable. La raison en est qu’une adresse e-mail pourrait être configurée pour accéder à quelque chose comme "quelque chose @ localhost". Notre mot de passe peut être tout ce que nous entrons, un mot de passe à caractère unique tel que "a" serait alors considéré comme valide. Ajoutons des expressions régulières pour résoudre ces problèmes.
Remarque: si vous n'êtes pas familier avec regex, c'est bon! Nous couvrons ici une petite partie pour montrer comment vous pouvez l’utiliser pour effectuer des tâches courantes de validation de formulaire HTML5, mais vous pouvez vous en tenir à la mise en œuvre du navigateur tout en suivant le didacticiel. Sautez cette section et continuez!
Une autre note: vous pouvez également consulter les Expressions régulières pour les nuls: Série Screencast de Jeffrey Way.
Passons en revue chaque partie de ces modèles. Les expressions régulières sont un moyen de décrire et comparer le format d'une chaîne.
Nous allons commencer avec le modèle d'email.
modèle = "[^ @] * @ [^ @] * \. [a-zA-Z] 2,"
Accentsconagua
[^ @] * - correspondre à un nombre quelconque de caractères qui est ne pas un signe @ ou un espace.@ - un signe @ littéral\. - un littéral .[a-zA-Z] - n'importe quelle lettre, en majuscule ou en minuscule[a-zA-Z] 2, - toute combinaison de deux lettres ou plusEn mettant tout cela ensemble, nous pouvons voir que cette expression indique qu'un courrier électronique est un ensemble de caractères sauf un signe @ suivi d'un signe @, suivi d'un ensemble de caractères sauf un signe @ suivi d'un point suivi d'un point. au moins deux lettres.
Nous pouvons appliquer une expression rationnelle beaucoup plus simple si nous voulons valider uniquement en fonction de la longueur de la valeur:
modèle = ". 5,"
le . signifie "n'importe quel personnage", et le 5, dit qu'il doit y avoir au moins 5 d'entre eux.
Avec ces modèles en place, l'élément ne sera considéré comme valide que si une valeur satisfaisant le modèle est entrée.
Nous allons compléter le balisage avec du vernis supplémentaire et quelques éléments non formels.
S'identifier
:valide CSS MagicMaintenant que nous avons quelques balises pour notre formulaire de connexion, voyons ce que nous pouvons faire avec CSS pour répondre aux commentaires de l'utilisateur.
Nous voulons montrer l'élément de formulaire suivant lorsque l'élément actuel est valide. Commençons par cacher les éléments de formulaire eux-mêmes, de manière accessible, pour que les lecteurs d'écran puissent toujours voir le formulaire complet et pour que la saisie semi-automatique puisse renseigner les valeurs. (Chris Coyier explique pourquoi ne pas utiliser affichage: aucun sur ce genre de choses ici.) Nous allons utiliser le caché visuellement méthode décrite dans le post de Chris.
.visuellement caché position: absolute; débordement caché; clip: rect (0 0 0 0); hauteur: 1px; largeur: 1px; marge: -1px; rembourrage: 0; bordure: 0;
Nous allons commencer avec quelques styles de base.
corps background-color: # 245245; famille de polices: 'Varela Round', sans serif; h3 color: # 555; taille de police: 2em; text-transform: majuscule; espacement des lettres: .3em; .login width: 300px; marge: auto 50px; arrière-plan: # f5f9fa; rembourrage: 50px; border-radius: 8px; text-align: center; entrée [type = mot de passe], entrée [type = email] largeur: 100%; bordure: 1px solide #ccc; rembourrage: 8px; taille de la boîte: boîte-frontière; entrée [type = mot de passe]: focus, entrée [type = email]: focus bordure: 1px solide # 888; contour: aucun; input [type = submit] background-color: # F29E1E; largeur: 50%; bordure: aucune; rembourrage: 8px; taille de la boîte: boîte-frontière; couleur: #fff; famille de polices: "Varela Round"; taille de police: 1em; text-transform: majuscule; input [type = submit]: hover background-color: # DB8F2A; curseur: pointeur; input margin: 6px 0;
Cela nous donne un formulaire de connexion simple centré. Prenons le concept caché visuellement et appliquons-le aux éléments que nous voulons masquer.
input [type = mot de passe], input [type = submit] débordement: masqué; clip: rect (0 0 0 0); hauteur: 1px; largeur: 1px; marge: -1px; rembourrage: 0; bordure: 0; opacité: 0; transition: opacité 0,4 s, hauteur 0,4 s, haut de page 0,4, haut de page 0,4;
Nous allons effectuer une animation. Nous avons donc légèrement élargi la classe pour inclure également l'opacité, supprimé le positionnement absolu et ajouté la définition de la transition..
Remarque: nous n'incluons pas les préfixes de fournisseur pour la transition, mais vous devriez!
Maintenant, montrons-leur quand ils devraient être montrés, en utilisant le :valide pseudo sélecteur et le + sélecteur de fratrie.
input [type = email]: valide + input [type = mot de passe] opacity: 1; position: relative; hauteur: 30px; largeur: 100%; clip: aucun; marge: auto 12px; bordure: 1px solide #ccc; rembourrage: 8px; input [type = mot de passe]: valide + input [type = submit] opacity: 1; position: relative; hauteur: 40px; largeur: 50%; clip: aucun; marge: auto 12px; rembourrage: 8px;
Il est important de prendre en compte les objectifs et les attentes de l'utilisateur dans un formulaire Web. Parfois, c'est une solution suffisante pour cacher complètement les entrées à l'utilisateur. Cependant, dans certains cas, cela peut avoir un effet néfaste, donnant à l'utilisateur le sentiment que sa feuille de route n'est pas claire pour remplir le formulaire, et que cela peut prendre plus de temps qu'il n'est prêt à abandonner.
Une solution à ce problème consisterait à utiliser une sorte d’obscurcissement sans masquer complètement les entrées qui permettent de créer une approche de rétroaction narrative pour les formulaires ayant un objectif clair et des attentes relativement prévisibles. Voici une version modifiée qui utilise la mise à l'échelle, le filtre de flou de Webkit, l'opacité et événements pointeur: aucun pour "présenter" les entrées à l'utilisateur lorsqu'elles sont disponibles. Nous devons également nous assurer que les événements de pointeur sont restaurés lorsque les entrées sont disponibles, afin que l'utilisateur puisse cliquer dessus..
corps background-color: # 245245; famille de polices: 'Varela Round', sans serif; h3 color: # 555; taille de police: 2em; text-transform: majuscule; espacement des lettres: .3em; .login width: 300px; marge: auto 50px; arrière-plan: # f5f9fa; rembourrage: 50px; border-radius: 8px; text-align: center; entrée [type = mot de passe], entrée [type = email] largeur: 100%; bordure: 1px solide #ccc; rembourrage: 8px; taille de la boîte: boîte-frontière; entrée [type = mot de passe]: focus, entrée [type = email]: focus bordure: 1px solide # 888; contour: aucun; input [type = submit] background-color: # F29E1E; largeur: 50%; bordure: aucune; rembourrage: 8px; taille de la boîte: boîte-frontière; couleur: #fff; famille de polices: "Varela Round"; taille de police: 1em; text-transform: majuscule; input [type = submit]: hover background-color: # DB8F2A; curseur: pointeur; input margin: 6px 0; input [type = mot de passe], input [type = submit] -webkit-filter: blur (1px); transformer: échelle (0,9); opacité: 0,4; transition: tous .4; événements de pointeur: aucun; entrée [type = mot de passe]: valide + entrée [type = soumettre], entrée [type = email]: valide + entrée [type = mot de passe] pointeur-événements: auto; -webkit-filter: aucun; transformer: échelle (1); opacité: 1;
Un bogue rapide à signaler: lorsqu'un utilisateur appuie sur l'onglet, il entrera dans l'élément de formulaire suivant. Nous évitons de cliquer sur l'élément de formulaire suivant avec événements pointeur: aucun, mais il n'y a pas d'attribut "focusable" en CSS. Au lieu de cela, nous aurions besoin de contrôler ce comportement avec une touche de JavaScript (saveur jQuery).
var input = $ ("input"); $ (document) .on ("touche", "entrée", function () inputs.each (fonction (i, el) var $ el = $ (el); if ($ el.is (": valide" )) $ el.next ("input") [0] .disabled = false; sinon $ el.next ("input") [0] .disabled = true;);); Ce JavaScript surveille nos entrées de formulaire et désactive / active les entrées en fonction de l'état ": valide" de leurs frères et sœurs précédents. Cela nous empêchera de concentrer l'élément. le événements pointeur: aucun fonctionne toujours pour garder notre soumission soumettre de recevoir l'état de survol.
Imaginez un formulaire comportant plusieurs "pistes", comme dans notre exemple "Se connecter ou s'inscrire". Un utilisateur peut sélectionner plusieurs options qui nécessiteraient une nouvelle sélection d'éléments de formulaire, telles que la sélection d'un état d'expédition ou d'un intervalle de temps pour une réservation pour un dîner. Dans ces cas, une simple validation peut ne pas suffire et nous utiliserons plutôt une solution JavaScript..
Prenons, par exemple, l'exemple "Connexion" ou "Inscription". Pour résoudre ce problème, nous devons demander au serveur s’il existe un utilisateur qui correspond au login de messagerie fourni..
var timeout; $ (document) .on ("keyup", "input [type = email]" function () clearTimeout (délai d'attente); var input = $ (ceci); délai d'attente = setTimeout (fonction () if (input.is ( ": valide")) var email = input.val (); $ .getJSON ("/ check_for_user", email: email, fonction (données) if (data.user_exists) input.parents ("formulaire" ) .attr ("action", "/ login") input.addClass ("user_exists"); $ ("input [type = mot de passe]"). filter ("[nom * = 'login']") chaque ( function (i, el) el.required = true;) else input.parents ("form"). attr ("action", "/ sign_up") input.addClass ("user_not_exists"); $ (" input [type = mot de passe] "). filter (" [nom * = 'inscription'] "). each (fonction (i, el) el.required = true;))); Dans le code JavaScript ci-dessus, nous envoyons l'adresse électronique au serveur à l'adresse "/ check_for_user". Le serveur renverrait une réponse JSON simple, semblable à la suivante..
callback (user_exists: true);
Sur la base de cette valeur, nous ajoutons une classe à l'entrée et modifions le point de terminaison du formulaire. Nous avons également défini les mots de passe appropriés pour être requis. Nous pourrions ensuite utiliser CSS de différentes manières pour définir ce qui se passera ensuite. Par exemple, nous pourrions utiliser une approche similaire à celle utilisée précédemment pour afficher ou masquer des entrées..
Si vous vous inscrivez pour un nouveau compte, il se peut que nous devions afficher le champ Mot de passe d'inscription (plutôt que le champ Mot de passe de connexion). Pour ce faire, nous utiliserions le ~ sélecteur, qui est le sélecteur général pour les frères et soeurs, et nous permet de "sauter" sur les éléments frères sans importance.
input [name = "mot_de_passe_du_scription"] / * styles visuellement masqués ici * / input [type = e-mail] .user_not_exists: valide ~ entrée [nom = "mot_de_session"] / * "visible" styles aller ici * / [type = email] .user_exists: entrée ~ valide [nom = "mot de passe de connexion"] / * "visible" styles allez ici * /
Lorsque nous mettons en avant de nouvelles techniques dans le développement front-end, elles ne fonctionnent pas tout le temps, dans tous les navigateurs. Heureusement, il est très facile de composer avec un bon repli dans cette situation. Nous sommes couverts par la plupart des principaux navigateurs, mais cette sélection n'inclut malheureusement pas iOS 7 ni Android. Pour les navigateurs non compatibles, nous retomberons simplement sur le comportement de formulaire par défaut.
Pour ce faire, nous pourrions utiliser Modernizr pour détecter si le navigateur prend en charge la validation des éléments de formulaire. Il est recommandé d’utiliser Modernizr pour ce type de détection de fonctionnalités, mais nous pouvons également écrire une fonction rapide pour le moment. "Non-Core Detects" de Modernizr inclut une option pour "validation des formulaires". Vous devrez donc créer un téléchargement personnalisé. Une fois que vous avez configuré ceci, justificatif les navigateurs auront la classe de validation du formulaire sur le html élément. Vous pouvez cibler ce validation de forme classe pour améliorer le formulaire de prise en charge des navigateurs.
.formvalidation input [type = mot de passe], .formvalidation input [type = submit] / * Cachez ou masquez vos entrées et désactivez les événements de pointeur ici * /
Depuis le :valide et :invalide Les pseudo-éléments ne fonctionneront que dans les navigateurs compatibles, le CSS qui cache les entrées est le seul CSS pour lequel nous devons utiliser l'amélioration progressive. Les entrées agiront avec leur fonction par défaut dans les navigateurs non compatibles..
Vous disposez maintenant de méthodes intéressantes pour passer vos formulaires à un nouveau niveau de modélisation de conversation interactive avec vos utilisateurs. Quelles autres choses puissantes avez-vous imaginées en utilisant le :valide et :invalide pseudo cours? Parlez-en dans les commentaires!
