MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Les éléments <input> dont l'attribut type vaut "email" permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut multiple est indiqué, une liste d'adresses mail. La valeur saisie est automatiquement validée afin de vérifier que le champ est vide ou que l'adresse (ou la liste d'adresses) est correcte. Les pseudo-classes CSS :valid et :invalid sont appliquées automatiquement selon le cas.

Note : Les navigateurs qui ne prennent pas en charge le type "email" emploieront un élément <input> "text" à la place.

<input id="adresseEmail" type="email">

Valeur Une chaîne de caractères (DOMString) représentant une adresse électronique ou une chaîne vide.
Évènements change et input
Attributs pris en charge autocomplete, list, maxlength, minlength, multiple, pattern, placeholder, readonly et size
Attributs IDL list et value
Méthodes select()

Valeur

La valeur d'un tel élément <input>, contenue dans l'attribut s value, contient une chaîne de caractères qui est automatiquement validée afin de vérifier que c'est une adresse électronique valide. Pour être plus précis, trois formes sont considérées valides :

  1. Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a saisi aucune valeur ou que la valeur a été retirée.
  2. Une adresse électronique bien-formée. Cela ne signifie pas que l'adresse en question existe mais qu'elle est correctement formatée. Autrement dit, elle respecte une structure "nom@domaine.tld". Cette règle est un peu plus complexe (cf. Validation pour l'algorithme exact).
  3. Si et seulement si l'attribut multiple est indiqué, la valeur peut être une liste d'adresses électroniques correctes, séparées par des virgules. Chaque blanc situé avant et après chaque adresse sera retiré.

Pour plus de détails, se référer à la section Validation sur la façon dont les adresses mails sont validées.

Utiliser les champs de saisie d'adresses électroniques

Les adresses mails font partie des informations les plus fréquentes dans les formulaires web : elles sont utilisées pour se connecter, demander des informations, confirmer une commande, envoyer un email, etc. Le type "email" permet de simplifier le travail de construction de l'interface utilisateur et la logique associée pour les adresses électroniques. Lorsqu'on crée un champ dont l'attribut type vaut "email", le navigateur valide ou non le texte saisi afin de vérifier qu'il s'agit d'une adresse correcte. Cela permet d'éviter les cas où l'utilisateur a fait une faute de saisie ou lorsqu'il a fourni une adresse invalide.

On notera toutefois que le navigateur ne vérifie pas si l'adresse saisie existe réellement ou correspond à un utilisateur existant du site ou si elle respecte quelque autre critère. Autrement dit, le navigateur vérifie uniquement que l'adresse fournie est bien formée.

Note : Il est également important de rappeler qu'un utilisateur peut modifier le HTML de la page grâce aux outils de développement. Votre site ne doit pas reposer sur les mécanismes de validation du navigateur. Il est crucial de vérifier l'adresse électronique côté serveur dès que le texte fournit est impliqué, d'une façon ou d'une autre, dans une fonctionnalité sensible (par exemple la connexion à un site, un achat, etc.).

Un champ email simple

À l'heure actuelle, l'ensemble des navigateurs qui implémentent cet élément le gèrent comme un champ texte standard auquel certaines fonctionnalités de validation sont ajoutées. La spécification laisse toutefois une marge de manœuvre pour cette validation (l'élément pourrait par exemple consulter le répertoire de l'appareil pour choisir une adresse parmi cette liste). Dans sa forme la plus simple, un champ email peut être écrit de cette façon :

<input id="emailAddress" type="email">

Un tel champ est considéré comme valide lorsqu'il est vide ou lorsqu'une adresse électronique bien formée est saisie. Dans les autres cas,, la valeur est considérée comme invalide. Si on ajoute l'attribut required, seuls les adresses électroniques bien formées sont autorisées, il n'est plus possible de laisser la valeur vide.

Gérer plusieurs adresses mail

Grâce à l'attribut multiple, on peut configurer le champ afin de saisir plusieurs adresses mail.

<input id="emailAddress" type="email" multiple>

Avec cet attribut, la valeur saisie est valide quand on saisit zéro, une ou plusieurs adresses électroniques bien formées, séparées par des virgules et éventuellement entourées de blancs.

Voici certains exemples de chaînes de caractères valides lorsque "multiple" est utilisé :

  • ""
  • "me@example"
  • "me@example.org"
  • "me@example.org,you@example.org"
  • "me@example.org, you@example.org"
  • "me@example.org,you@example.org,    us@example.org"

En revanche, les exemples suivants sont considérés invalides :

  • ","
  • "me"
  • "me@example.org you@example.org"

Textes indicatifs (placeholders)

Il est parfois utile de fournir une indication contextuelle quant à la valeur qui doit être saisie. C'est notamment pertinent quand la disposition de la page ne permet pas d'utiliser des étiquettes suffisamment descriptives (ou longues) pour chaque élément <input>. Pour fournir une telle indication, on peut fournir un placeholder qui sera affiché dans le champ lorsque la valeur est vide et qui disparaît dès que des données sont saisies.

Dans l'exemple qui suit, on utilise un élément <input> de type "email" avec le texte indicatif "sophie@example.com". Vous pouvez manipuler l'exemple afin de voir comment ce texte disparaît/réapparaît lorsqu'on édite la valeur du champ.

<input type="email" placeholder="sophie@example.com">

Contrôler la taille du champ

Il est possible de contrôler la taille physique de la boîte de saisie et également la longueur minimale/maximale de la valeur qu'il est possible de saisir.

Contrôler la taille physique

La taille physique de la boîte de saisie peut être paramétrée grâce à l'attribut size. Grâce à cet attribut, on peut indiquer le nombre de caractères que le champ peut afficher. Dans l'exemple qui suit, la boîte d'édition pourra contenir jusqu'à 15 caractères :

<input type="email" size="15">

Contrôler la taille de la valeur

L'attribut size ne contraint pas la longueur de l'adresse qu'on pourra saisir. On peut donc avoir de petits champs qui permettent de saisir de longues adresses. Pour borner la taille de l'adresse mail à saisir, on pourra utiliser l'attribut minlength pour indiquer le nombre minimal de caractères et l'attribut maxlength pour indiquer le nombre maximal de caractères contenus dans l'adresse électronique.

Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 32 caractères de large et dans laquelle on ne peut saisir des adresses qui ont au moins 3 caractères et au plus 64 caractères.

<input type="email" size="32" minlength="3" maxlength="64">

Fournir une option par défaut

On peut également fournir une valeur par défaut en remplissant l'attribut value de l'élément :

<input type="email" value="default@example.com"

Proposer des suggestions

Pour améliorer encore l'ergonomie, on peut fournir une liste d'options par défaut parmi laquelle l'utilisateur peut choisir. Cela fonctionne en utilisant l'attribut list dont la valeur est un identifiant d'un élément <datalist> qui contient différents éléments <option> dont les valeurs des attributs value fournissent les adresses suggérées. L'utilisateur n'est pas contraint à saisir une valeur parmi celles-ci, elles sont uniquement fournies à titre indicatif.

<input type="email" size="40" list="defaultEmails">

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk">
  <option value="jbourne@unknown.net">
  <option value="nfury@shield.org">
  <option value="tony@starkindustries.com">
  <option value="hulk@grrrrrrrr.arg">
</datalist>

Lorsqu'on utilise l'élément <datalist> et l'élément <option>, le navigateur affichera les adresses suggérées lors de la saisie, généralement sous la forme d'une liste déroulante ou d'une popup. Bien que les détails d'interface puissent dépendre de chaque navigateur, cliquer sur le champ d'édition affichera généralement la liste sous forme d'un volet déroulant. Ensuite, la liste est restreinte au fur et à mesure des caractères saisis.

Animation: Using keyboard entry to filter the list of suggested email addresses

Validation

Il existe deux niveaux de validation pour les champs de saisie de type "email". Tout d'abord, on a le niveau standard qui permet de vérifier automatiquement si l'adresse électronique est bien formatée. Ensuite, il est possible d'ajouter un filtre spécifique si besoin de répondre à des contraintes plus spécifiques.

Attention ! La validation du formulaire HTML par l'agent utilisateur ne saurait remplacer la vérification des données saisies côté serveur. En effet, il est relativement simple de modifier le document HTML avec son navigateur pour outrepasser les contraintes exprimées ici (quitte à les transmettre directement au serveur). Si les données ne sont pas vérifiées côté serveur, cela pourra entraîner des erreurs (valeurs trop grande, au mauvais format) voire des failles de sécurité.

Validation simple

Les navigateurs qui implémentent le type "email" fournissent une validation automatique afin de vérifier que la valeur saisie respecte le format d'une adresse électronique valide. Les navigateurs utilisent un algorithme pour respecter la spécification.

Les pseudo-classes CSS :valid et :invalid peuvent être utilisées afin de mettre en forme la valeur selon qu'elle est valide ou non.

Note : La spécification comporte certains problèmes relatifs aux noms de domaines internationaux et à la validation des adresses électroniques en HTML. Pour plus d'informations, lire le bug n°15489 du W3C.

Validation grâce à une expression rationnelle

S'il est nécessaire que l'adresse saisie respecte plus de critères, il est possible d'utiliser l'attribut pattern afin d'indiquer une expression rationnelle contre laquelle la valeur sera vérifiée. Si l'attribut multiple est actif, chaque élément de la liste devra respecter cette expression rationnelle.

Prenons comme exemple l'intranet d'une entreprise avec un site web qui permet de contacter le département du support technique en cas de besoin. Un formulaire simplifier permet de saisir une adresse électronique et un message. Dans ce cas, on souhaite vérifier que l'adresse électronique est saisie mais également que c'est une adresse respectant le format de celles utilisées dans l'entreprise.

Le navigateur vérifie d'une part que l'adresse électronique est une adresse correctement formatée et que celle-ci respecte l'expression rationnelle indiquée avec pattern. Voici un exemple d'application :

<form>
 <div class="emailBox">
   <label for="emailAddress">Votre adresse email</label><br>
   <input id="emailAddress" type="email" size="64" maxLength="64" required
          placeholder="nomutilisateur@beststartupever.com" pattern=".+@beststartupever.com"
          title="Merci de fournir uniquement une adresse Best Startup Ever">
 </div>

 <div class="messageBox">
   <label for="message">Requête</label><br>
   <textarea id="message" cols="80" rows="8" required
             placeholder="Mes chaussures sont trop petites."></textarea>
 </div>
  <input type="submit" value="Envoyer la requête">
</form>

Le formulaire (<form>) contient un élément <input> de type "email" pour saisir l'adresse de l'utilisateur, un élément <textarea> permettant de saisir le message et un élément <input> de type "submit" qui formera un bouton permettant d'envoyer le formulaire. Chaque champ possède un élément <label> associé qui permet d'indiquer ce qui est attendu.

Si on regarde le champ de saisie pour l'adresse électronique, on voit que les deux attributs size et maxlength ont la valeur 64 (on affiche une boîte de saisie large de 64 caractères et on ne peut saisir une adresse électronique d'au plus 64 caractères). L'attribut required est présent et l'adresse électronique est donc obligatoire pour l'envoi du formulaire.

L'attribut placeholder indique qu'une valeur semblable à "nomutilisateur@beststartupever.com" est attendue. L'intérêt de cette valeur est double : on indique qu'il faut saisir une adresse mail et on suggère que cette adresse provient d'un compte beststartupever.com. Le type "email" permet de valider le texte saisi afin de vérifier qu'il s'agit d'une adresse électronique valide.  Si la valeur saisie n'est pas une adresse valide, un message d'erreur sera affiché :

Si on utilise uniquement les attributs qu'on vient de décrire, on restreint les valeurs saisissables aux adresses électroniques valides de 64 caractères. Or, on veut également valider le fait que l'adresse respecte le format "nomutilisateur@beststartupever.com". C'est pourquoi on utilise l'attribut pattern avec la valeur ".+@beststartupever.com". Cette valeur est une expression rationnelle qui permet de vérifier que la chaîne de caractère contient un ou plusieurs caractères quelconques, ensuite suivi d'une arobase (@) puis du nom de domaine "beststartupever.com".

On notera que cette expression rationnelle ne permet pas de vérifier que l'adresse électronique est valide (on pourra par exemple avoir " @beststartupever.com" (avec un espace en début de chaîne) ou encore "@@beststartupever.com" qui ne sont pas valides). En fait, le navigateur vérifie que l'adresse respecte l'expression rationnelle fournie et que l'adresse est valide. Autrement dit, avec le type "email" et cette valeur pour l'attribut pattern, on s'assure que l'adresse est une adresse électronique valide et que c'est une bien une adresse avec le nom de domaine "beststartupever.com".

Lorsqu'on utilise l'attribut pattern Il est conseillé d'utilisé l'attribut title afin de décrire le motif de l'expression ratioennelle. Autrement dit, dans ce cas, l'attribut title doit décrire le format souhaité plutôt que contenir une autre information. En effet, cet attribut sera affiché ou prononcé en cas d'erreur. Par exemple, le navigateur pourrait afficher le message "Le texte saisi ne correspond pas au motif requis." suivi du texte indiqué dans la valeur de title. Par exemple si l'attribut title vaut "Adresse email", le message affiché serait "Le texte saisi ne correspond pas au motif requis. Adresse email" ce qui n'est pas correct.

C'est pour cela qu'on indique la chaîne de caractères "Merci de fournir uniquement une adresse Best Startup Ever". Le message complet obtenu sera donc : "Le texte saisi ne correspond pas au motif requis. Merci de fournir uniquement une adresse Best Startup Ever."

Note : Si vous rencontrez des problèmes à propos de l'expression rationnelle, n'hésitez pas à ouvrir la console du navigateur. Cette dernière peut contenir des messages d'erreur aidant à diagnostiquer et résoudre le problème.

Exemples

Dans l'exemple qui suit, on peut saisir une adresse électronique qui contient au plus 256 caractères. La boîte de saisie affichera au plus 64 caractères et contiendra le texte  "user@example.gov" comme indication lorsque le champ est vide. On trouve également l'attribut multiple qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut list utilisé indique un identifiant d'un élément <datalist> dont les éléments <option> déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur.

L'élément <label> qui précède l'élément <input> permettra d'afficher un libellé avant la boîte de saisie. Le lien entre les deux est fait grâce à l'attribut for qui contient "emailAddress" qui est l'identifiant de l'élément <input>. Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie.

<label for="emailAddress">Email</label><br/>
<input id="emailAddress" type="email" placeholder="user@example.gov"
       list="defaultEmails" size="64" maxlength="256" multiple>

<datalist id="defaultEmails">
  <option value="jbond007@mi6.defence.gov.uk">
  <option value="jbourne@unknown.net">
  <option value="nfury@shield.org">
  <option value="tony@starkindustries.com">
  <option value="hulk@grrrrrrrr.arg">
</datalist>

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de '<input type="email">' dans cette spécification.
Standard évolutif Définition initiale.
HTML 5.1
La définition de '<input type="email">' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple 5.0 ? Unknown (4.0) 10 10.62 ?
Fonctionnalité Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile iOS WebKit
(Safari/Chrome/Firefox/etc)
Support simple ? ? ? 4.0 (4.0) ? (Oui) 3.1[1]

[1] Safari n'applique pas de validation particulière mais affiche un clavier spécifique, dédié à la saisie d'email. On notera également que Safari mobile, sur les appareils iOS, applique un style par défaut avec opacity: 0.4 pour les éléments <input> textuels désactivés, y compris ceux dont le type est "email". Les autres navigateurs n'appliquent pas cette règle de style.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,