Vers une standardisation des champs de saisie typés ?

Il y a 6 ans (6 ans !) je vous parlais de la standardisation des formulaires à l’aide d’attributs date, number, range et email : Des formulaires standardisés. À l’époque il était question de XForms pour typer les champs de saisie. Aujourd’hui l’objectif est toujours le même, sauf que cette possibilité nous est offerte par HTML 5 et que ça se passe maintenant puisque si vous utilisez un navigateur moderne vous y avez déjà accès.

Le site 456 Berae St nous propose ainsi de faire le point sur les nouveaux attributs : HTML5 input types. Pour faire simple, il vous suffit de spécifier dans votre code source le type de données que vous voulez collecter (une date, un nombre, un email…) et le navigateur se charge d’afficher un champ adapté à la valeur à saisir. Cette technique est déjà employée avec brio sur les smartphones (cf. A propos des formulaires mobiles et narratifs) et l’on commence déjà à voir des choses intéressantes sur les navigateurs de dernières génération (Opera, Safari et Chrome).

Je vous invite donc à tester ces différents types de champs dans la page suivante : HTML5 input types test page. Voici à quoi ressemble un champ search dans Safari (coins arrondis comme dans le Spotlight de Mac OS et croix pour vider le champ comme sur l’iPhone) :

Safari_Search

Voici à quoi ressemble un champ number avec opera (avec les deux boutons) :

Opera_Number

Le champ range avec Chrome (dommage que la valeur ne s’affiche pas sous la glissière) :

Chrome_Range-1

Le champ email avec Opera (incluant un contrôle de surface):

Opera_email

Et pour finir le champ date avec Opera :

Opera_DateTime

C’est ce dernier exemple qui m’intéresse particulièrement car la saisie d’une date ou d’un horaire est compliquée et qu’il y a beaucoup de différences dans les techniques employées. Standardiser le comportement des champs typés permettrait d’assurer de la cohérence au travers des différents sites et de réduire de façon considérable les erreurs de saisie.

Pour le moment il n’y a que la dernière version d’Opera qui implémente correctement les types mais nous ne devrions pas tarder à voir apparaitre ça sur les autres navigateurs. Deux types de champs pourraient grandement améliorer l’expérience utilisateur : Le champ tel pour saisir un numéro de téléphone (uniquement implémenté sur les smartphones) et le champ price pour saisir un prix (pas prévu pour le moment).

C’est un début encourageant et il reste beaucoup de travail mais nous sommes visiblement sur la bonne voix avec d’autres standardisation (notamment les pseudo-classes valid, invalid et required avec CSS3). C’est avec ce type d’améliorations que les navigateurs modernes vont pouvoir faire la différence vis à vis des vieux navigateurs qui sont plus lents, moins bien sécurisés et qui ne simplifieront pas la saisie des formulaires. Mais vous aviez déjà abandonné Internet Explorer depuis longtemps, non ?

Une réflexion sur “Vers une standardisation des champs de saisie typés ?

  1. Bonjour et merci pour ces informations. Effectivement Html 5 va grandement simplifier l’approche des formulaires. En attendant, certains outils permettent aux non-développeurs ou ceux qui ne veulent pas perdre de temps de concevoir rapidement des formulaires. FORMALLIN est une des solutions existante qui permet là en plus, de créer des formulaires multilingues.
    Démo en ligne : http://www.atomestudio.com

    La gestion des types de champs évoqués dans cet article tels que les dates, les téléphones,… sont entièrement gérés et les vérifications effectuées côté client et serveur. Bref à tester.

    J'aime

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s