Avant l’avènement de HTML5, la manipulation des adresses email nécessitait plus de travail pour valider les adresses email en utilisant Javascript. Eh bien tout cela n’est désormais plus nécessaire avec le nouveau type d’entrée HTML5 email.
L’élément d’entrée email a été spécifiquement conçu pour gérer et valider les adresses email. Selon le navigateur, il alertera l’utilisateur que les informations saisies ne sont pas correctes et le formulaire ne se soumettra pas tant que l’utilisateur n’aura pas effectué les corrections.
Code exemple:
<label for="email_input">Enter your email address:</label><input type="email" name="email" placeholder="Your Email">Utilisation générale
Enregistrez le code suivant dans un document texte et ouvrez-le avec un navigateur web.
<!DOCTYPE html><html><head> <style> body { padding-top: 200px; padding-left: 300px } </style></head><body> <p>Please Provide Your Current E-Mail Address <form> <input type="email"> </form></body>Voici à quoi devrait ressembler la page :
Si vous souhaitez collecter plusieurs adresses à la fois, vous pouvez ajouter l’attribut multiple :
<input type="email" multiple>L’utilisateur peut maintenant saisir une ou plusieurs adresses séparées par une virgule.
Validation
Les navigateurs qui prennent en charge le type d’entrée email fournissent un support de validation de différentes manières. Cependant, tous les navigateurs utilisent un algorithme de validation commun suivant ce modèle :
les exigences minimales sont les symboles @ et . et l’absence d’espaces entre les caractères. Veuillez noter qu’il n’est pas possible de vérifier si l’adresse fournie existe. C’est un problème qui doit être géré par votre script côté serveur. Une bonne façon de tester les adresses e-mail valides est d’envoyer un lien vers l’adresse e-mail qui, lorsqu’il est cliqué, confirme que l’e-mail est valide.
Mozilla Firefox
Dès que l’utilisateur a terminé de taper et passe à un autre élément, Firefox vérifie les données saisies. Si son adresse électronique n’est pas valide, l’entrée apparaîtra avec une bordure rouge comme indiqué ci-dessous:
Si l’utilisateur procède à un clic sur le bouton d’envoi sans modifier l’adresse électronique fournie, le formulaire ne sera pas soumis et une infobulle apparaîtra montrant le message d’erreur sur l’entrée.
Google Chrome
Google chrome ne fournit aucun support visuel lorsque l’utilisateur saisit des données invalides.
Cependant , lors de la soumission, un message d’erreur apparaît avec une info-bulle fournissant un indice sur ce que l’utilisateur doit fournir.
Si vous souhaitez fournir un message d’erreur personnalisé à l’utilisateur, vous pouvez utiliser l’attribut title :
<input type="email" title="Please Provide A Valid Email Address !">Support du navigateur
Le type de saisie email est largement supporté par tous les navigateurs modernes. Consultez le tableau ci-dessous pour connaître la version minimale prise en charge. IE 10.0 FireFox 4.0 Chrome 10.0 Opera 11.0 Safari 4.0
Pour plus de détails sur la prise en charge des navigateurs, voir : Puis-je utiliser le type de saisie email
Généralement, si la version du navigateur utilisée ne prend pas en charge ce type de saisie, un texte de type de saisie s’affiche à la place. Lorsque vous traitez des données soumises côté serveur, veillez à les valider vous-même avant de les accepter.
Sur les plateformes Android et IOS, le clavier inclura automatiquement les touches @ et . chaque fois que le type de saisie est email.
Pourquoi utiliser ce nouveau type de saisie
- Le type de saisie email facilite le développement web puisque le travail de validation est effectué par le navigateur. Si l’attribut required a été spécifié, le navigateur n’acceptera pas que le formulaire soit soumis.
- Vous pouvez choisir de styliser tous les emails de type input dans votre site web dans un style spécifique afin qu’ils apparaissent dans un style standard à travers le tableau.
- Les appareils mobiles peuvent personnaliser le clavier souple pour correspondre à l’entrée de l’email (avec les @ et . facilement accessibles
CSS appliqué
Afin d’appliquer un certain style uniquement aux champs de saisie des emails, utilisez le sélecteur d’attribut comme ceci :
input{ background-color:#ccc;}Demo
See Also
- Comment créer un champ de saisie téléphonique en HTML5
- Comment obtenir la valeur d’une case à cocher dans la soumission d’un formulaire
.