Aswin Lutchanah

Hybrid Social Media Specialist + Php/MySql Developer Metz (Développeur Php/MySql Metz) + SEO-SMO

Le champ email en HTML5 est mobile friendly

Il y a environ deux mois, je vous parlais du champ url en HTML5 dans le cadre de la norme mobile-friendly de Google. Compte tenu du succès de cet article, je me suis dit que je vais poursuivre avec un autre champ : le champ de type email en HTML 5. Avant HTML 5, les champs utilisés pour la saisie de données étaient de type texte (text). Mais avec, HTML 5, la donne a changé.

Quand on choisit le champs de type email, le clavier de saisie affiché propose des caractères adaptés à un champ email. Tout cela vous semblera plus simple avec des images et un exemple concret à tester par vous-même.

Avant HTML 5

  1. <input name="email" type="text" />

Et maintenant, vous pouvez tester cela avec votre mobile.


Vous devrez avoir un clavier classique qui ressemble à celui de l’image ci-dessous.

Image d'un champ type texte pour la saisie d'un email - avant HTML 5

Avec HTML 5

Voici un champ de type email pour saisir un email.

  1. <input name="email" type="email" />

Maintenant, regardez la différence sur votre mobile avec le champs ci-dessous :

Le caractère “@” et le point “.” sont incontournables dans un email et vous pouvez voir qu’ils sont proposés dans l’image ci-dessous (voir encadré rouge).
Image du clavier de saisie sur un mobile pour un champ de type email

Passez à l’HTML 5

Dépendant du CMS utilisé, la mise-en-oeuvre sera plus ou moins facile. Dans tous les cas, le jeu en vaut la chandelle vu que le mobile est devenu The Place To Be ! Il faut tout faire pour rendre l’expérience utilisateur meilleure et sur mobile, les détails comptent surtout quand on doit remplir un formulaire.

Posted In: HTML, Web Development

Tags: ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*