Drew est directeur de edgeofmyseat.com, cofondateur de Notist et développeur principal du système de gestion de contenu réduit Perch . Auparavant, il était développeur Web… Pour en savoir plus sur Drew
HTML5 a introduit 13 nouveaux types de saisie de formulaire, ajoutant de manière significative au nombre de champs différents que les concepteurs et les développeurs Web pourraient ajouter à nos formulaires. Ces nouveaux types nécessitent tous des navigateurs pour les prendre en charge, et l’adoption a été plus lente que certains l’auraient souhaité. Quel est l'état de ces types de champs en 2019? Que pouvons-nous utiliser et lesquels devraient encore être évités?
L'une des principales caractéristiques de HTML5 pour de nombreux concepteurs et développeurs était l'ajout d'un certain nombre de nouveaux types de saisie de formulaire pouvant être utilisés. Pendant des années, nous nous sommes limités à utiliser des entrées de texte sur une seule ligne ( type = "text" ) et à utiliser JavaScript et les instructions de l'utilisateur pour essayer de capturer avec précision des données valides de différents types via ce champ non sophistiqué. .
HTML5 a apporté de nouvelles valeurs de l’attribut de type qui nous ont permis d’être beaucoup plus précis sur les types de données que nous devions capturer sur le terrain, le promesse étant alors que le navigateur fournissez l'interface et la validation nécessaires pour contraindre l'utilisateur à remplir le champ avec précision.
Des adresses URL aux courriers électroniques, des champs de recherche aux dates, l'espoir était qu'au lieu de devoir écrire un JavaScript fastidieux pour essayer de valider ces champs, pourrait simplement laisser le navigateur faire ce travail difficile pour nous. De plus, en ajoutant ce qu’il sait du contexte de l’utilisateur (type de périphérique, type d’interaction, fuseaux horaires, etc.), le navigateur serait en mesure de mieux adapter l’interface aux besoins de l’utilisateur que nous avons jamais connus. pourrait en tant qu'auteur de page.
Avoir de nouveaux éléments dans une spécification est une chose , mais cela ne veut vraiment pas dire grand chose à moins que les navigateurs de notre public utilisent ces fonctionnalités. Ces nouvelles valeurs de l'attribut de type présentaient le gros avantage de revenir à type = "text" si le navigateur ne prenait pas en charge, mais cela pouvait aussi entraîner le retrait l'impératif des éditeurs de navigateurs lorsqu'il s'agissait de mettre en œuvre ces nouveaux types dans leurs produits.
C'est le début de 2019 et HTML5 est la version actuelle du code HTML depuis plus de quatre ans.
Puis-je utiliser la saisie-recherche? Données relatives à la prise en charge de la fonction de recherche-saisie dans les principaux navigateurs de caniuse.com.
Recommandation
Utilisation type = "search" si vous souhaitez laisser le style du champ de recherche au navigateur.
Puis-je utiliser input-email-tel-url? Données relatives à la prise en charge de input-email-tel- Fonction URL dans les principaux navigateurs provenant de caniuse.com.
Recommandation
Utilisez type = "tel" pour tous les champs de numéro de téléphone. C’est très utile là où elle est mise en œuvre et elle n’a aucun coût si ce n’est pas le cas.
Puis-je utiliser input-email-tel-url? Données sur la prise en charge de input-email-tel- fonctionnalité url sur les principaux navigateurs provenant de caniuse.com.
Recommandation
Utilisez type = "tel" chaque fois que vous souhaitez collecter une URL complète et absolue. La prise en charge des navigateurs est excellente, mais n’oubliez pas qu’elle ne convient pas aux composants d’URL individuels.
Can Données relatives à la prise en charge de la fonction de saisie de numéro dans les principaux navigateurs de caniuse.com
Recommandation
Utilisez type = "numéro" pour toute virgule flottante. chiffres, car il est largement pris en charge et peut aider à prévenir les saisies accidentelles.
Puis-je utiliser la plage de saisie? Les données de caniuse.com sur la prise en charge de la fonction de plage de saisie dans les principaux navigateurs.
Recommandation
Les utilisations de type = "range" pourraient être un peu niche, mais le support est bon et le curseur fournit une méthode de saisie conviviale, le cas échéant.
Puis-je utiliser input-color? Données provenant de caniuse.com concernant la prise en charge de la fonction de saisie des couleurs dans les principaux navigateurs.
#### Recommandation
À moins que vous ne sachiez que vos utilisateurs seront ravis de saisir les codes de couleur hexadécimaux, il est préférable de ne pas utiliser les navigateurs Web prenant en charge `type =" color ".
Les champs de plage, de couleur et de date sont affichés par Edge, Firefox et Chrome. ( Grand aperçu )
Puis-je utiliser input-datetime? Données relatives à la prise en charge de la fonctionnalité input-datetime par les principaux navigateurs de caniuse.com.
Recommandation
Bien que cela soit pratique, le mode de défaillance de ] type = "date" et ses types de date et heure associés sont très médiocres. Cela en fait un choix risqué qui risque de laisser les utilisateurs peiner pour répondre aux critères de validation.
Conclusion
Beaucoup de choses ont changé dans le paysage des navigateurs depuis quatre ans que la spécification HTML5 est devenue une recommandation. La prise en charge des nouveaux types d’entrée est assez forte, en particulier sur les appareils mobiles dotés de claviers virtuels tels que les tablettes et les téléphones. Dans la plupart des cas, ces entrées peuvent être utilisées en toute sécurité et confèrent une utilité supplémentaire à l'utilisateur.
Il existe quelques exceptions notables, le pire étant les champs de date et d'heure, qui non seulement manquent d'utilité, mais ont également les navigateurs plus inégaux prennent en charge. Lorsque le support n’est pas disponible, le mode de secours de ces champs est médiocre. Dans ces cas-là, il serait peut-être préférable de s'en tenir aux solutions basées sur JavaScript pour améliorer progressivement les champs de base type = "text" .
Si vous souhaitez en savoir plus, je vous fournirais des informations plus détaillées. recommande les MDN Web Docs sur ces types de champ et, comme toujours, la spécification W3C .