Optimisez votre cote HTML pour les smartphones : les formulaires

La navigation sur tablettes et smartphones se démocratisent depuis des années, mais en 2015 les navigations web ont connu un virage très important, car 51% des navigations web se sont faites sur mobile - source smartinsights. Il est donc important de personnaliser l'expérience utilisateur pour les navigations mobiles. En plus du responsive design HTML 5 et CSS 3, qui devient presque obligatoire aujourd'hui, il est possible de personnaliser ses formulaires de contact pour proposer un clavier optimisé par rapport au contenu attendu. Vous l'avez peut-être déjà remarqué lors d'inscriptions ou de connexions à une application par exemple, on ne dispose pas d'un seul et même clavier tactile, mais plusieurs, différents en fonction du besoin : une date, une heure, une adresse mail ou une url à écrire et notre clavier s'adapte pour nous proposer un clavier intelligent.

Tout se passe dans l'attribut d'un input : type

Pour personnaliser un formulaire HTML pour les smartphones, tout se passe dans l'attribut type d'un champ input pour attribuer un clavier spécifique.

<input type="text" />

Dans l'attribut type du champ input, on utilise le plus souvent type="text", ou encore type="password", mais il existe aujourd'hui, grâce aux smartphones, d'autres types de valeurs possibles.

Le clavier par défaut

<input type="text" />

 Le clavier par défaut propose les caractères alphabétiques, avec la possibilité de switcher vers les chiffres et caractères particuliers.

Le clavier de sélection d'une date

<input type="date" />

Le clavier de sélection d'une date se présente sur 3 colonnes : le jour, le mois, et l'année. On glisse le doigt pour modifier chaque colonne vers le haut ou vers le bas. Le jeu : faire glisser le mois vite et relacher pour retomber sur le bon mois ;) On y passerait des heures

Le clavier de date locale

<input type="datetime-local" />

Même principe que pour le type date : 3 colonnes. Mais cette fois on se base sur la date d'aujourd'hui comme référence, avec l'heure et les minutes.

Le clavier email

<input type="email" />

Le clavier email propose un alphanumérique mais avec l'arobaz et le point directement pour gagner du temps. Très pratique sur un champ login par exemple.

Le champ file

<input type="file" />

Le champ input file permet sur iPhone de prendre une photo/vidéo, d'accéder à la photothèque ou d'aller se rendre sur le cloud pour y choisir un fichier (peut importe le format, pas uniquement les images/vidéos). Sur Android, on a accès à l'enregistreur vocal en plus, avec un accès aux documents également.

Le clavier pour les mois et l'année

<input type="month" />

Le clavier month permet de sélectionner une date limitée au mois et à l'année, sur 2 colonnes.

Le clavier pour les nombres

<input type="number" />

Le clavier numérique sur iPhone renvoit directement aux nombres par rapport au clavier standard où il faut cliquer sur "123" pour afficher les chiffres. Un petit gain de temps ! Sur Android, on représente un clavier numérique avec la possibilité de mettre un point (pour les décimaux).

Le clavier type téléphone

<input type="tel" />

Le clavier téléphone permet de n'avoir que les chiffres, mais ne fonctionnera uniquement dans le cas d'un téléphone à remplir, puisqu'on a pas de choix pour les virgules ou les points sur un chiffre décimal. Sur Android, le pad numérique ressemble aux nombres (type="number") mais affiche également les lettres comme pour l'écriture des textos il y a quelques années maintenant !

Le clavier pour une heure

<input type="time" />

Le clavier time permet sur 2 colonnes de choisir une heure précise avec heures et minutes. Par contre pas d'options sur les secondes, c'est dommage !

Le clavier pour les url

<input type="url" />

Le clavier type url ressemble au clavier normal à la différence qu'il n'y a pas d'espaces, mais des points, des slashs et un raccourci vers le .fr à la place. Note : le .fr est rattaché à la langue utilisée sur le téléphone.

Conclusion

Pour faire gagner du temps à vos internautes, proposez leur le bon clavier en fonction de leur utilisation. Très pratique pour un formulaire d'inscription par exemple.

Ressource : Safari developer Library