<input type="email">

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015 .

Les éléments <input> dont l'attribut type vaut email permettent à une utilisatrice ou 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.

Exemple interactif 

<label for="email">Enter your example.com email:</label>
<input type="email" id="email" pattern=".+@example\.com" size="30" required />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
input,
label {
  margin: 0.4rem 0;

La valeur saisie dans le champ est automatiquement validée pour vérifier s'il s'agit d'une chaîne de caractères vide ou d'une adresse mail valide (ou une liste de telles adresses) avant que le formulaire soit envoyé. Les pseudo-classes CSS :valid et :invalid sont automatiquement appliquées selon la validité des champs afin d'indiquer visuellement si la valeur courante du champ est une adresse mail valide ou non.


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

      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, name, pattern, placeholder, readonly, required, size, type
      Attributs IDL
      list et value
      Méthodes
      select()

Valeur

La valeur d'un tel élément <input> , contenue dans l'attribut 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 :

  • Une chaîne de caractères vide ( "" ) qui indique que l'utilisatrice ou l'utilisateur n'a saisi aucune valeur ou que la valeur a été retirée.
  • 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 "[email protected]" . Cette règle est un peu plus complexe (cf. la section Validation pour l'algorithme exact).
  • 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.

    Attributs supplémentaires

    En complément des attributs communs à l'ensemble des éléments <input> , les champs de type email prennent en charge les attributs suivants :

    list

    La valeur de cet attribut est l'identifiant d'un élément <datalist> situé dans le même document. L'élément <datalist> fournit la liste de valeurs prédéfinies à suggérer à l'utilisatrice ou à l'utilisateur. Toute valeur de la liste qui n'est pas compatible avec ce type de champ n'est pas incluse dans les options suggérées. Les valeurs fournies sont des suggestions et pas des valeurs imposées : il reste possible de sélectionner des valeurs en dehors de cette liste.

    maxlength

    Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisatrice ou l'utilisateur peut saisir dans le champ. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour maxlength ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à minlength .

    Le champ ne sera pas valide si la longueur du texte dépasse maxlength en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisatrice ou l'utilisateur.

    minlength

    Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisatrice ou l'utilisateur peut saisir dans le champ. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour minlength ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieure à maxlength .

    Le champ ne sera pas valide si la longueur du texte est inférieure à minlength en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisatrice ou l'utilisateur.

    multiple

    Un attribut booléen qui indique, s'il est présent, que plusieurs adresses électroniques peuvent être saisies en étant séparées par des virgules (et éventuellement des espaces). Voir la section sur la saisie de plusieurs adresses ci-après.

    Note : Normalement, lorsque l'attribut required est indiqué, la personne remplissant le formulaire doit saisir une adresse mail valide pour que le champ soit considéré valide. Toutefois, si l'attribut multiple est ajouté, une liste de zéro adresses (une chaîne de caractères vide ou un texte constitué uniquement d'espaces) sera une valeur valide. Autrement dit, la personne remplissant le formulaire n'est pas obligée de saisir une adresse lorsque multiple est présent, quelle que soit la valeur de required .