Quoi de plus facile que de mettre en place un formulaire HTML qui capture les adresses e-mail, par exemple pour un bulletin d’information ou des notifications? Bien sûr, saisissez une adresse email dans ce formulaire, puis laissez votre navigateur se souvenir de cette adresse incorrecte pour tous les formulaires d'inscription à venir.
Si vous souhaitez valider les adresses électroniques saisies dans votre formulaire tout en évitant les manipulations compliquées et les scripts, HTML5 vous permet de vous fier au navigateur, sans effort et sans recourir à JavaScript.
Valider les adresses électroniques avec HTML5
Pour que les navigateurs des utilisateurs valident les adresses électroniques au fur et à mesure de leur saisie dans votre formulaire Web HTML:
- Assurez-vous d'utiliser HTML5.
- Spécifiez l'élément d'entrée du formulaire d'adresse électronique sous le type "email". (Voir ci-dessous pour un exemple.)
Les navigateurs qui ne reconnaissent pas type = "email" devraient (et, autant que l'on puisse en juger, tout le monde le fera), traiter le champ de saisie comme un champ type = "text" ordinaire.
Avertissements HTML5 pour la validation des adresses e-mail
Notez que la validation d'adresse électronique HTML ne fonctionnera que dans les navigateurs prenant en charge HTML5 et validant la saisie d'éléments de formulaire. Pour les autres navigateurs et les sauvegardes, vous pouvez toujours valider des adresses électroniques à l'aide de PHP, par exemple.
Les navigateurs prenant en charge la validation des adresses électroniques au format HTML5 sont Safari 5+, Google Chrome 6+, Mozilla Firefox 4+ et Opera 10+. Safari 5 et Google Chrome 6-8 n'accepteront pas les saisies d'adresse e-mail incorrectes mais, contrairement aux autres navigateurs, ne permettront pas à l'utilisateur de corriger l'erreur.
Exemple de validation d'adresse électronique HTML5
Pour inciter les navigateurs des utilisateurs à valider les adresses électroniques avec HTML5, utilisez le code suivant, par exemple:
