Share
Bien que la spécification HTML5 comporte de nombreux changements positifs, il n’ya pas de meilleur rapport qualité-prix pour le site Web axé sur les données que la transformation des formulaires. Ces simples changements vont transformer la manière dont vous saisissez, validez, traitez et affichez les entrées. Vous pourrez créer plus d'applications Web utilisables avec moins de code et moins de confusion..
"Ces dernières années, la majorité des innovations en matière de formulaires proviennent de l'utilisation de JavaScript plutôt que de l'ancien HTML. Bien que l'utilisation de JavaScript pour améliorer les formulaires ne présente aucun inconvénient, elle apporte sa propre facilité d'utilisation et de nombreux problèmes de développement. "
HTML 5 subit encore des modifications avant d’être finalisé. Si vous regardez la spécification, vous verrez qu'il reste un dernier appel à commentaires avec des déclarations, telles que, Les développeurs doivent savoir que cette spécification n'est pas stable. En outre, en particulier pour les besoins de ce tutoriel, qui se concentre sur les modifications apportées aux formulaires, la mise en œuvre du navigateur est pour le moins inégale. Cela dit, les changements à l’horizon méritent d’être examinés aujourd’hui. Bien que les modifications aient une portée majeure, la mise en œuvre pour les développeurs semble être plutôt facile. Dans ce didacticiel, nous présenterons un aperçu de haut niveau de ces changements révolutionnaires et réfléchirons à leur impact sur la nature des commentaires de l'utilisateur..
Dans le passé, les modifications apportées aux formulaires étaient relativement mineures. Si vous revenez à la spécification HTML 3.2, qui a été finalisée en 1997, vous verrez les mêmes entrées de formulaire de base que vous utilisez aujourd'hui. Sélectionnez, zone de texte, radio, cases à cocher et texte étaient alors disponibles. Une génération de développeurs Web ont grandi en écrivant selon ces mêmes normes. Tandis que les versions ultérieures de la spécification apportaient des modifications aux formulaires, tels que le champset, l'étiquette, la légende et les actions de formulaire telles que onsubmit ou onchange, la façon dont nous traitons l'entrée utilisateur est restée quelque peu statique. Dans un passé récent, la majorité des innovations en matière de formulaires sont issues de l’utilisation de JavaScript, plutôt que de l’ancien HTML. Bien qu'il n'y ait rien de mal à utiliser JavaScript pour améliorer les formulaires, il apporte sa propre facilité d'utilisation ainsi que de nombreux problèmes de développement. Par exemple, il existe différentes manières de valider des formulaires à l'aide de JavaScript, mais que se passe-t-il lorsqu'un utilisateur n'active pas JavaScript? Nous devons en outre appliquer la logique à nos scripts côté serveur. En fin de compte, nous avons une manière moins cohérente de gérer les entrées de l'utilisateur. Le langage HTML 5 ne traite pas tous les casse-tête liés à l’innovation des formulaires au cours des 13 dernières années, mais il nous donne de nombreux outils pour:
rendre notre travail beaucoup plus facile et nous permet de produire des formulaires beaucoup plus cohérents.
Nous devrions examiner trois changements fondamentaux. Dans un premier temps, nous examinerons les modifications apportées aux éléments d’entrée, telles que la saisie semi-automatique ou la mise au point automatique. La seconde concerne les changements d’états d’entrée, et il y en a plusieurs! Enfin, nous examinerons les nouveaux éléments de formulaire. Il est important de rappeler que la spécification est en mutation; donc je ne serais pas surpris si, à l'avenir, il y avait des changements subtils à ce que nous discutons. C'est ce qui rend ça amusant!
Les attributs d'entrée sont les éléments que vous placez dans les entrées pour expliquer ce que fait l'entrée. Par exemple:
Dans l'exemple ci-dessus, les attributs d'entrée sont value, size et maxlength. Celles-ci existent depuis un certain temps. HTML 5 ne change pas le concept d’éléments d’entrée, mais en ajoute un peu plus. Il semble y avoir au moins une soustraction, ou plutôt une substitution, et le changement de handicap semble maintenant devenir en lecture seule. La spécification n'entre pas dans les détails du changement, mais si j'étais un homme de paris, le changement permettrait aux gestionnaires d'événements, tels que onblur, de se déclencher - ce qu'un élément désactivé empêche.
Les nouveaux attributs incluent autofocus, complétion automatique, liste, obligatoire, multiple, modèle, minimum et maximum, pas et espace réservé. Je pense à ces deux éléments différents. La première version améliore l'expérience de l'utilisateur, tandis que la seconde améliore l'expérience de développement. Ce que je veux dire par là, est autofocus, complétion automatique, liste, multiple et espace réservé aide l'expérience utilisateur à sélectionner des éléments, ou peut-être en donnant une description de ce que l'entrée de formulaire recherche, ou en aidant à remplir le formulaire. required, min and max, pattern and step ajoutent à l'expérience de développement en disant ce qui devrait être dans la forme elle-même.
Ce que chacun de ces nouveaux attributs fait est relativement facile à comprendre. Par exemple:
Ci-dessus, l'élément autofocus concentre la saisie de texte au chargement de la page. Cela signifie que dès le chargement de la page, cette entrée de texte est prête à prendre une entrée. Vous pouvez commencer à taper tout de suite, car cet élément a le focus du document. Quelque chose que nous avions l'habitude de faire en JavaScript dans une ligne ou plus, peut maintenant être fait avec un seul mot.
Dans l'exemple ci-dessus, en désactivant la saisie semi-automatique, vous empêchez le navigateur de renseigner le champ de formulaire à partir d'une valeur précédente. Rien ne me dérange plus que de voir mon numéro de carte de crédit apparaître dans un formulaire dès que je tape un chiffre. La valeur par défaut pour la saisie semi-automatique est activée. Par conséquent, vous ne devez utiliser cet élément que lorsque vous souhaitez empêcher le champ de formulaire de se terminer à partir d'entrées précédentes. Il ajoute à l'expérience utilisateur en empêchant les informations sensibles de "s'afficher".
L'attribut de liste est très cool. Essentiellement, vous fournissez un datalist, qui créera un menu déroulant à partir de votre saisie de texte. Pensez-y comme une auto complète naturelle. Allez un peu plus loin, et au lieu de devoir ajouter une bibliothèque JavaScript pour une recherche rapide, basée sur les entrées de clé, vous pouvez simplement ajouter un gestionnaire d'événements "onchange", avec une publication AJAX, et vous vous retrouvez avec une suppression. vers le bas qui devient plus spécifique que l'utilisateur tape dans la boîte. Avec HTML 5, cette fonctionnalité peut être créée avec seulement quelques lignes.
L'attribut multiple vous permet de sélectionner plusieurs éléments de votre datalist. Par exemple, vous pourriez avoir un formulaire qui envoie des messages de votre site Web. En utilisant l'élément multiple, vous pouvez autoriser l'utilisateur à sélectionner plusieurs destinataires pour envoyer ce message. Encore une fois, c’est quelque chose que nous pouvons accomplir avec un peu de JavaScript maintenant, mais avec HTML 5, nous n’avons plus qu’à ajouter une seule commande au formulaire..
L'attribut fictif est quelque chose que nous faisons depuis des années avec une touche de JavaScript. Ce que cela fait est que, dès que l'entrée est focalisée, le type ici disparaîtra. S'il n'y a pas eu de changement dans le texte sur le flou, le type ici réapparaîtra. Encore une fois, nous retirons du code JavaScript pour améliorer l'expérience utilisateur.
Ces nouveaux attributs améliorent tous notre développement. À l'exception de "step", chacun aide à la validation de la saisie de l'utilisateur.
L'attribut requis est exactement ce que cela semble. En tant que développeur de cette page Web, je vous demande de remplir ce formulaire avant de cliquer sur Soumettre. C’est la validation de base des formulaires que nous utilisons aujourd’hui avec JavaScript. Ce qui prenait une bibliothèque avant d'ajouter une entrée requise, prend maintenant un seul mot sous la forme.
De tous les nouveaux attributs de formulaire, c'est celui qui me passionne le plus. M. Form, laissez-moi vous présenter mon bon ami, Regex. C’est vrai, nous pouvons valider les entrées de formulaire à partir d’expressions régulières. Alors que celui-ci va d'abord mystifier, à mesure que vous apprenez l'expression régulière, les possibilités de validation deviennent désormais illimitées..
J'ai regroupé les trois derniers en un seul exemple, car ils traitent tous de la validation des numéros - ou de la plage de nombres que nous pouvons inclure.
Chacun de ceux-ci traitent de valeurs numériques. Ne les confondez pas avec maxlength, qui traite du nombre de caractères qu'une entrée prendra. L'élément step est juste comme ça sonne. Lorsque vous sélectionnez une valeur numérique, augmentez-la de 0,5 ou moins, ce qui signifie que ce type d'entrée aura les valeurs possibles de 1, 1,5, 2, 2,5, etc..
Pour le moment, à ma connaissance, la prise en charge des navigateurs est quelque peu inégale sur ces attributs. Voici un tableau rapide montrant ce que j'ai pu trouver sur les implémentations.
Il y a huit nouveaux types d'entrée, sans compter tous les nouveaux types de date et d'heure, ce qui, pour nos besoins, en est une. Il est important de noter que les navigateurs qui n'ont pas implémenté les nouveaux types d'entrée se dégraderont en un type de texte sur chacun de ceux que j'ai testés. Les nouveaux types d'entrées apportent une possibilité de valider les entrées utilisateur en fonction du type utilisé. Il y a aussi d'autres validations à venir dont je parlerai dans les deux prochaines sections. Chacun des nouveaux types de saisie nous permet de séparer un champ de texte en quelque chose de plus spécifique. Par exemple, pour prendre des valeurs entières ou flottantes antérieures à HTML 5, nous avons principalement utilisé un type de texte en entrée. Juste à partir de l'annotation, il est contre-intuitif pour les débutants. En étant plus spécifiques, nous avons ainsi un meilleur contrôle visuel de notre interface, car plus l'élément en HTML est spécifique, plus vous avez de contrôle au sein de CSS, et plus il est facile de définir ces éléments visuels. De plus, avec les nouveaux types d’entrée spécifiques, les navigateurs sont désormais en mesure d’affiner la plage d’entrée. Enfin, avec l'avènement de l'informatique mobile, nous sommes en mesure de créer des éléments de formulaire d'application Web pouvant être stylés pour ressembler à des applications naturelles ou façonner le clavier que nous utilisons..
Regardons d'abord la gestion des nombres:
Chacun de ces types d’entrée nous permet de jouer avec des nombres et lorsque nous publions les formulaires, nous devons être sûrs que nous disposons de ces valeurs flottantes pour notre traitement côté serveur sans la validation JavaScript ajoutée. En termes simples, pour chacun de ces types, nous nous attendons à obtenir des chiffres dans la plage que nous définissons et avec le pas que nous voulons. La différence entre les deux types est la façon dont ils sont affichés. Pendant que j'attends de voir la mise en œuvre sur le type de numéro, j'attendrais soit un rouleau, soit une zone de texte, soit éventuellement un type de sélection avec des nombres. Le type de plage est un peu différent, en ce sens qu'il ressemble à une valeur glissante, similaire à ce que vous attendez d'un contrôle de volume..
Les nouveaux types de saisie de la date et de l’heure sont un autre grand soulagement à normaliser votre développement backend. Dans l'implémentation d'Opera que j'ai vue, chacune affiche un calendrier déroulant, qui permet à l'utilisateur de sélectionner une date. Encore une fois, nous pouvons valider sur notre page Web que les entrées sont dans le format que nous attendons. Chacun fait exactement ce que l'on pourrait penser. vous sélectionnez un mois, une semaine, un jour ou une heure. Celui qui est un peu différent est le local datetime, qui affiche la date et l'heure sans décalage de votre fuseau horaire. Par exemple, si vous sélectionnez un vol, l'heure locale indique l'heure et la date dans la ville où vous vous rendez, ce qui n'est pas nécessairement le fuseau horaire dans lequel vous vous trouvez actuellement..
Chacun de ces types d’entrée est descriptif. Les types URL et Email ont tous deux la validation des modèles d'URL valides et des modèles d'email valides. Le téléphone ne se conforme toutefois pas à un modèle particulier. Il supprime simplement les sauts de ligne. Si vous souhaitez appliquer un modèle de validation sur le champ téléphonique, vous pouvez toujours utiliser l'élément de modèle. Chacun de ces éléments moins la couleur prendra également l'attribut de liste, moins la couleur. La couleur est l'intrus du peloton; Je peux voir son utilisation pratique, où vous pouvez sélectionner une couleur dans un menu déroulant sophistiqué qui affiche les couleurs et appliquer la saisie de texte de quelque chose comme # 000000, mais cela ne correspond pas vraiment au reste des modifications, à mon avis. C'est comme jouer qui ne ressemble pas aux autres.
Comme pour les attributs, l’implémentation du navigateur de type d’entrée est assez inégale. Mon iPhone semble en supporter davantage que Safari, ce qui est un peu drôle pour moi. C’est ce que j’ai trouvé de mieux pour soutenir.
Le nombre de modifications apportées aux éléments de formulaire n'est pas aussi radical que les attributs et les types d'entrée. Cela dit, il y a quelques nouveaux éléments à prendre en compte. Nous avons déjà couvert la base de données - c’est la façon dont nous définissons ce qui sera sélectionné à partir d’un appel d’élément de liste - mais nous n’avons pas vu keygen, output, progress ou meter. En dehors de keygen. ceux-ci ne sont pas aussi explicites que les nouveaux attributs. Permet de creuser dans ces un peu.
Celui-ci est un peu déroutant. Il ne génère pas de clé publique pour vous. Au lieu de cela, il s'agit d'un contrôle générateur de paire de clés. Une fois le formulaire soumis, il empaquette la paire de clés pour stocker la clé privée dans le magasin de clés local et renvoie la clé publique au serveur. Il va générer le certificat client et le proposer à l'utilisateur pour le télécharger. Une fois téléchargé et stocké avec la clé privée, vous pouvez ensuite authentifier des services, tels que l'authentification SSL ou par certificat..
+ =
Pensez à l'élément de sortie en tant que zone de texte sur les stéroïdes. Ce que vous pouvez faire est de calculer à partir de deux entrées de texte de type nombre et de générer ce calcul sans jamais renvoyer le formulaire au serveur. Si vous venez de renvoyer false onsubmit, dans l'exemple ci-dessus, il calculera numéro_1 plus numéro_2 et vous fournira la réponse. Comme beaucoup de choses abordées dans ce tutoriel, c’est quelque chose que nous pouvons accomplir aujourd’hui avec JavaScript, mais cela réduit considérablement la quantité de code que nous devrons écrire à l’avenir..
12cm
Les deux derniers nouveaux éléments sont progress et metre. Ils sont similaires, mais avec une différence. Progress est censé être utilisé pour mesurer les progrès d'une tâche spécifique. Par exemple, si vous avez encore cinq pages à remplir avant qu’un sondage ne soit terminé, vous afficherez l’élément de progression dans ce domaine. Le compteur, en revanche, est une mesure de quelque chose. Vous voudrez peut-être afficher l'espace disque restant qu'un utilisateur a laissé. Vous utiliseriez le compteur pour afficher cette mesure. Il y a de nouveaux éléments de frontière, tels que bas, haut et optimum. Ceux-ci remplacent les éléments min ou max; si elles les dépassent, elles deviennent les nouvelles limites inférieure et supérieure de la forme.
Comme le reste des modifications de formulaire HTML 5, la mise en œuvre du navigateur est médiocre pour le moment. Heres ce qui semble fonctionner et ce qui ne fonctionne pas (au moment d'écrire ces lignes).
D'après ce que je peux voir, il n'y a aucune raison de ne pas commencer à utiliser les formulaires HTML 5. Les éléments et les types d'entrée se dégradent tous bien, même dans IE6, où ils sont soit ignorés en tant qu'éléments, soit dégradés en entrées de texte. Nous devrons attendre un moment pour que les attributs de validation deviennent une réalité, mais cela dit, il existe encore certaines utilisations sans ces avantages. Par exemple, l'iPhone modifie le clavier si vous utilisez les types d'URL, de courrier électronique ou de numéro. Le type d'entrée de plage est déjà pris en charge dans les navigateurs WebKit, vous pouvez donc être le premier enfant du bloc avec un curseur de numéro fonctionnant sans JavaScript. Les spécifications sont rapidement finalisées et les navigateurs se mettent rapidement au courant des changements de paradigme. Il n’ya plus de temps comme le présent pour au moins commencer à jouer avec ces nouveaux jouets! Qu'est-ce que tu penses?
Accentsconagua