Des champs de formulaire adaptés aux smartphones en HTML5

Posté le 06/12/2015 - par Amy Wiggenhauser - dans Web Design

Les smartphones sont pratiques et permettent aux internautes de consulter votre site internet et de vous contacter à tout moment. Cependant, remplir un formulaire de contact avec un smartphone n'est pas toujours facile : les touches sont petites, les caractères ne sont pas tous directement accessibles, etc...

Pour faciliter la saisie des formulaires aux visiteurs, il existe des types de champs en HTML5 qui vont permettre au smartphone de modifier automatiquement l'agencement de l'interface de saisie, idéal pour les sites en Responsive Web Design.

Les principaux types utiles

Pour un numéro de téléphone, utiliser : <input type="tel">
Le clavier présentera alors uniquement des chiffres sous sorme de pavé numérique.

Pour une adresse email, utiliser : <input type="email">
Le clavier présentera des lettres accompagnées du symbole @ facilement accessible.

Pour une date, utiliser : <input type="date">
Les navigateurs récents afficheront un calendrier et les smartphones présenteront une interface spécifique.

Pour une adresse url : <input type="url">
Le clavier présentera plusieurs touches spécifiques avec "www", "/" et ".com"

Pour un nombre, utiliser : <input type="number">
L'interface de saisie présentera uniquement des chiffres.

Il est également possible d'aller plus loin dans le format des données saisies, en spécifiant un format sous forme d'expression régulière : <input pattern="d+(,d {2})?">
Cet exemple permet de saisir un prix avec deux chiffres après la virgule.

Pour indiquer des champs obligatoires, il est également possible d'ajouter la mention "required", par exemple : <input type="tel" required>

Prévenir les piratages

Enfin, il ne faut pas oublier que les champs de formulaire sont saisis côté client. Il est donc impératif, même si on utilise les types de champs décrits ci-dessus, de valider les valeurs des champs côté serveur avant de les utiliser.