Où sontils maintenant? éclatant

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.

Lectures recommandées : UX et HTML5: aidons les utilisateurs à remplir le formulaire sur leur mobile

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.

1. Champs de recherche
2. Champs de numéro de téléphone
3. Champs d'URL
4. Champs d'e-mail
5. Champs de numéro
6. Champs de numéro [Telephone] 19659016] Range Fields
7. Colourss
8. Date Fields

1. Champs de recherche

L'entrée type = "search" est destinée à être utilisée pour les champs de recherche. Sur le plan fonctionnel, ils sont très similaires aux champs de texte de base, mais le fait d’avoir un type dédié permet au navigateur d’appliquer un style différent. Ceci est particulièrement utile si le système d'exploitation de l'utilisateur a un style défini pour les champs de recherche, car cela permet au navigateur de mettre en correspondance les champs de recherche sur les pages Web.

La spécification indique que la différence entre la recherche et text est purement stylistique, il est donc préférable de l'éviter si vous avez l'intention de remodeler le champ avec CSS de toute façon. Son utilisation ne semble présenter aucun avantage sémantique.

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.

2. Champs de numéros de téléphone

L'entrée type = "tel" est utilisée pour entrer les numéros de téléphone. Ce sont comme les noms d'utilisateur uniques utilisés par Whatsapp. En cas de doute, demandez conseil à vos grands-parents.

À l’international, les numéros de téléphone prennent de nombreux formats différents, pour des raisons techniques et de localisation. De ce fait, l'entrée tel ne tente pas de valider le format d'un numéro de téléphone. Vous pouvez utiliser les outils de validation associés tels que l'attribut pattern de la balise ou la méthode JavaScript setCustomValidity () pour appliquer éventuellement un format.

Sur les navigateurs sur le bureau , l’utilisation des champs téléphoniques semble avoir peu d’impact. Sur les appareils dotés de claviers virtuels, ils peuvent toutefois s'avérer très utiles. Par exemple, sur iOS, le fait de centrer la saisie sur un champ téléphonique fait apparaître un clavier numérique prêt à saisir un numéro. En outre, les mécanismes de saisie semi-automatique de l'appareil entrent en jeu et suggèrent des numéros de téléphone pouvant être remplis en un seul clic.

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.

3. Champs d'URL

Le champ type = "url" peut être utilisé pour capturer des URL. Vous pouvez par exemple utiliser cette option pour demander à un utilisateur de saisir l'adresse de son site Web dans un répertoire professionnel. Ce qui est curieux à propos du champ URL, c’est qu’il ne faut que des URL complètes, absolue . Il n’existe pas d’option permettant de capturer simplement un nom de domaine ou un chemin par exemple. Cela limite son utilité à certains égards, car j'imagine que les développeurs de CMS et d'applications Web auraient trouvé de nombreuses utilisations pour un champ qui accepte et valide les chemins relatifs.

Ce serait une URL absolue valide:

 https: //twitter.com/drewm

Les deux ne passeraient pas la validation du champ:

 smashingmagazine.com
/ 2019/01 / css-plusieurs-colonnes-layout-multicol /

Cela ressemble à une occasion manquée que différentes parties d’une URL ne puissent pas être spécifiées, mais c’est ce que nous avons. La prise en charge des navigateurs est très bonne, avec des dispositifs à clavier virtuel offrant une certaine personnalisation pour la saisie d’URL. iOS personnalise son clavier avec . / et un bouton à complétion automatique pour les TLD courants tels que .com et pour mon lieu, .co.uk . C’est un bon exemple de navigateur capable de proposer des choix plus intelligents que les développeurs Web.

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.

4. Champs de courrier électronique

L'une des options les plus utilisées parmi les plus récentes est type = "email" pour les adresses électroniques. Comme avec les numéros de téléphone et les URL, les périphériques dotés de claviers virtuels personnalisent les touches (pour inclure des éléments tels que les boutons @ ) et activent le remplissage automatique à partir de leur base de données de contacts.

Les navigateurs de bureau l'utilisent. De même, avec Safari sous macOS, l'activation automatique des champs de courrier électronique est également basée sur les données de l'application Contacts du système.

Les adresses électroniques semblent souvent suivre un format très simple, mais leurs variations les rendent en réalité assez complexes. Une tentative naïve de validation des adresses e-mail peut entraîner le marquage d'une adresse parfaitement valide comme étant invalide, il est donc agréable de pouvoir s'appuyer sur les méthodes de validation du navigateur plus sophistiquées et bien testées pour vérifier le format.

Le L'attribut multiple peut être ajouté aux champs d'e-mail pour collecter une liste d'adresses e-mail. Dans ce cas, chaque adresse électronique de la liste est validée individuellement.

Puis-je utiliser input-email-tel-url? Données sur la prise en charge de la fonction input-email-tel-url dans les principaux navigateurs de caniuse.com.

Recommandation

Utilisation type = "email" pour les champs d'adresse e-mail lorsque cela est possible.

5. Champs de nombres

Le champ type = "number" est conçu pour les valeurs numériques et possède quelques attributs très utiles avec la forme suivante: min max et étape . Une valeur valide pour un champ numérique doit être un nombre à virgule flottante compris entre les valeurs minimale et maximale spécifiées par les attributs min et max .

Si étape est définie, une valeur valide est divisible par la valeur du pas.

Les entrées valides pour le champ ci-dessus seraient 10 15 20 25 et 30

La prise en charge du navigateur est large, là encore avec les claviers virtuels qui utilisent souvent un mode d’entrée numérique pour la saisie des valeurs.

Certains navigateurs de bureau (notamment Chrome, Firefox et Safari, mais pas Edge). ajoutez des boutons de bascule pour déplacer les valeurs de haut en bas de la valeur de l'étape ou, si aucune étape n'est spécifiée, l'étape par défaut semble être 1 dans chaque implémentation.

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.

6. Range Fields

Il est moins évident en utilisation que certains des autres types, type = "range" puissent être considérés comme une alternative à type = "number" où l'utilisateur ne se soucie pas de la valeur exacte.

Les champs d'intervalle prennent et utiliseront souvent les mêmes attributs min max et comme champs de numéro et les navigateurs l’affiche presque universellement sous forme de curseur graphique. L'utilisateur ne voit pas nécessairement la valeur exacte qu'il définit.

Les champs de plage peuvent être utiles pour ce type de questions dans les formulaires tels que «Dans quelle mesure êtes-vous susceptible de recommander cela à un ami?» Avec «Probablement». à une extrémité et «peu probable» à l'autre. L'utilisateur peut faire glisser le curseur vers l'endroit où il pense représenter son opinion et sous le capot qui est soumis en tant que valeur numérique que vous pouvez stocker et traiter.

La prise en charge du navigateur est bonne, bien que l'apparence varie d'une implémentation à l'autre.

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.

Champs de couleur

Le champ type = "color" permet de capturer les couleurs RVB en notation hexadécimale, telles que #aabbcc . La spécification HTML appelle cela un "contrôle de couleur", le navigateur devant fournir un sélecteur de couleur convivial.

Certains navigateurs le proposent, notamment Chrome et Firefox, qui permettent tous deux d'accéder à la couleur système.

Ni IE ni Safari ne fournissent de support ici, ce qui permet à l'utilisateur de déterminer s'il est supposé entrer lui-même un nombre hexadécimal à 7 chiffres.

Les champs de couleur peuvent être utilisés. dans les thèmes de personnalisation et d'utilisation de CMS, mais à moins que les utilisateurs ne soient suffisamment techniques pour gérer les codes de couleur hexadécimaux, il est peut-être préférable de ne pas compter sur le navigateur offrant une belle interface utilisateur pour ces derniers.

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 ".

8. Champs de date

HTML5 a introduit un certain nombre de valeurs `type` différentes pour la création d'entrées pour les dates et les heures. Ceux-ci incluaient `date`,` heure`, `date-locale`,` mois` et `semaine`.

À première vue, cela semble être un paradis, car la collecte de dates dans un formulaire est une expérience difficile à la fois pour le développeur et pour l’utilisateur, et elles sont nécessaires assez souvent.

La promesse est que les nouveaux types de champs permettent au navigateur de fournir une interface utilisateur normalisée, accessible et cohérente pour capturer facilement les dates et les heures de l'utilisateur. Ceci est très important, car les formats de date et d'heure varient d'un pays à l'autre, en fonction de la langue et des paramètres régionaux. Une interface de navigateur conviviale qui traduit une sélection de date facile à utiliser en un format de date technique sans équivoque est tout à fait la solution idéale. .

En tant que telle, une entrée valide pour le champ `type =" date "` est une valeur non ambiguë de _year-month-day_ telle que `2019-01-16`. Les développeurs aiment cela, car ils correspondent assez bien au format de date ISO 8601, qui est utilisé dans la plupart des contextes techniques. Malheureusement, peu d’êtres humains utilisent ce format de date et ne sont pas susceptibles de l’atteindre quand on leur demande de fournir une date dans un seul champ de texte vide.

Et, bien sûr, un seul champ de texte vide correspond à ce qui est présenté à l'utilisateur si son navigateur ne fournit pas d'interface utilisateur pour choisir les dates. Dans ces cas, il devient alors très difficile pour un utilisateur d'entrer une valeur de date valide à moins qu'il ne soit familier avec le format requis ou que l'entrée soit annotée avec des instructions claires.

Cependant, de nombreux navigateurs offrent une bonne interface utilisateur pour choisir les dates. Firefox a un excellent sélecteur de date, et Chrome et Edge ont également de très bonnes interfaces. Cependant, il n’ya aucun support dans le vieil IE pauvre et aucun dans Safari, ce qui pourrait poser problème.

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 .

(ra, il)