Les éléments <input> dont l'attribut type vaut "tel" permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour <input type="email"> et <input type="url"> , la valeur saisie n'est pas automatiquement validée selon un format donné car les formats des numéros de téléphone varient à travers le monde.

Note : Les navigateurs qui ne prennent pas en charge le type "tel" utiliseront à la place un contrôle de type "text".

<input id="telNo" type="tel">

Valeur Une chaîne de caractères (DOMString) qui représente un numéro de téléphone ou qui est vide.
Évènements change et input
Attributs pris en charge autocomplete, list, maxlength, minlength, pattern, placeholder, readonly et size
Attributs IDL list,selectionStart, selectionEnd, selectionDirection et value
Méthodes select(), setRangeText(), setSelectionRange()

Valeur

Une chaîne de caractères (DOMString) qui peut prendre l'une de ces deux valeurs :

  1. Une chaîne vide ("") qui indique que l'utilisateur n'a saisi aucune valeur ou que celle-ci a été supprimée.
  2. Une chaîne de caractères représentant un numéro de téléphone.

Utiliser <input type="tel">

Les numéros de téléphone peuvent jouer un rôle important dans certains formulaires web. Un site de commerce en ligne, par exemple, peut vouloir enregistrer le numéro de téléphone d'un utilisateur pour le contacter lors de la livraison. Toutefois, un des problèmes relatifs aux numéros de téléphone est la variété de formats qui existent à travers le monde. Il est donc difficile (voire impossible) de valider les valeurs automatiquement.

Note : Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. Validation ci-après).

Claviers adaptés

L'un des avantages des contrôles de type tel est qu'ils permettent aux navigateurs mobiles de proposer un clavier adapté à la saisie de numéros de téléphone. Voici par exemple le clavier obtenu avec Firefox pour Android :

Un contrôle simple

Dans sa forme la plus simple, on peut implémenter un tel contrôle avec ce fragment HTML :

<input id="telNo" name="telNo" type="tel">

Rien de bien surprenant ici. Lorsque les données seront envoyées au serveur, elles auront la forme telNo=0123456789.

Textes indicatifs (placeholders)

Il est parfois utile de fournir une indication quant au format attendu. Or, il est possible que la disposition de la page ne permette pas de fournir des étiquettes détaillées. C'est pourquoi on peut utiliser des textes indicatifs via l'attribut placeholder. Ces valeurs seront affichées dans le champ et disparaîtront dès que l'utilisateur saisira quelque chose (et réapparaîtront si la valeur redevient vide). Un tel texte indicatif doit servir de suggestion quant au format souhaité.

Dans l'exemple suivant, on a un contrôle "tel" avec un attribut placeholder qui vaut "01 23 45 67 89". Vous pouvez manipuler le résultat obtenu pour voir comment ce texte est affiché selon qu'une valeur saisie ou que le champ est vide :

<input id="telNo" name="telNo" type="tel"
       placeholder="01 23 45 67 89">

Contrôler la taille du champ

On peut contrôler la taille physique allouée au contrôle ainsi que les longueurs minimale et maximale autorisées pour le texte saisi dans le contrôle.

La taille physique

La taille physique de la boîte de saisie peut être contrôlée avec l'attribut size. La valeur de cet attribut indique le nombre de caractères que la boîte peut afficher simultanément. Si, par exemple, on souhaite que le contrôle mesure 20 caractères de large, on pourra utiliser le code suivant :

<input id="telNo" name="telNo" type="tel"
       size="20">

La longueur de la valeur

L'attribut size ne contraint pas la taille de la valeur qui peut être saisie dans le contrôle. Si on souhaite avoir une longueur minimale (en nombre de caractères), on pourra utiliser l'attribut minlength. De même, si on souhaite qu'un numéro de téléphone valide mesure au maximum X caractères, on pourra employer l'attribut maxlength.

Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de large et dont le contenu doit être plus long que 9 caractères et plus court que 14 caractères.

<input id="telNo" name="telNo" type="tel"
       size="20" minlength="9" maxlength="14">

Note : Ces deux attributs jouent un rôle lors de la Validation. Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale.

Fournir une valeur par défaut

Il est possible de fournir une valeur par défaut en renseignant au préalable l'attribut value :

<input id="telNo" name="telNo" type="tel"
       value="01 23 45 67 89">

Afficher des suggestions

Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut list dont la valeur est l'identifiant d'un élément  <datalist> qui contient autant d'éléments  <option> que de valeurs suggérées. C'est la valeur de l'attribut value de chaque élément <option> qui sera utilisée comme suggestion.

<input id="telNo" name="telNo" type="tel" list="defaultTels">

<datalist id="defaultTels">
  <option value="01 23 45 67 89">
  <option value="02 45 67 89 01">
  <option value="03 45 67 89 12">
  <option value="04 56 87 98 32">
</datalist>

Avec l'élément <datalist> contenant ces différentes valeurs  <option>, le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsque l'utilisateur saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore.

Validation

Comme évoqué ci-avant, il est difficile de fournir une solution qui convienne pour l'ensemble des formats utilisés et qui permette de valider correctement les numéros de téléphone.

Attention ! Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.

Rendre la valeur obligatoire

Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le formulaire. Pour cela, on utilisera l'attribut required :

<form>
  <div>
    <label for="telNo">Veuillez saisir un numéro de téléphone (obligatoire) : </label>
    <input id="telNo" name="telNo" type="tel" required>
    <span class="validity"></span>
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>

On utilisera la feuille de style suivante pour indiquer les éléments valides ou invalides du formulaire :

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid+span:after {
  position: absolute; content: '✖';
  padding-left: 5px;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
}

Voici le résultat obtenu :

Utiliser un format particulier

Si on souhaite restreindre le format de la valeur qui peut être saisie, on peut utiliser l'attribut pattern dont la valeur est une expression rationnelle que la valeur doit respecter pour être valide.

Dans cet exemple, on utilisera la même feuille de style que précédemment mais le code HTML sera celui-ci :

<form>
  <div>
    <label for="telNo">Veuillez saisir un numéro de téléphone (obligatoire) :: </label>
    <input id="telNo" name="telNo" type="tel" required
           pattern="[0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}">
    <span class="validity"></span>
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>

Vous pouvez ici voir que la valeur est considérée comme invalide si elle ne suit pas le format xx xx xx xx xx. Ce format peut peut-être être utile pour certaines régions mais attention, dans une application réelle, il faudra s'adapter à des cas plus complexes selon la locale de l'utilisateur.

Exemples

Dans cet exemple, on présente une interface simple avec un élément <select> permettant à l'utilisateur de choisir le pays dans lequel il se trouve puis un ensemble d'éléments <input type="tel"> permettant de saisir ses différents numéros de téléphone.

Chaque boîte de saisie possède un attribut placeholder qui indique le format pressenti. On utilise également l'attribut pattern afin d'indiquer le nombre de caractères ainsi qu'un attribut aria-label qui pourra être lu par un lecteur d'écran ete qui décrit quoi saisir dans le contrôle.

<form>
  <div>
    <label for="country">Veuillez choisir votre pays :</label>
    <select id="country" name="country">
      <option>Royaume-Uni</option>
      <option selected>États-Unis</option>
      <option>Allemagne</option>
    </select>
  </div>
  <div>
    <p>Veuillez saisir vos numéros de téléphone : </p>
    <span class="areaDiv">
      <input id="areaNo" name="areaNo" type="tel" required
             placeholder="Code régional" pattern="[0-9]{3}"
             aria-label="Code régional">
      <span class="validity"></span>
    </span>
    <span class="number1Div">
      <input id="number1" name="number1" type="tel" required
             placeholder="Premier fragment" pattern="[0-9]{3}"
             aria-label="Premier fragment du numéro">
      <span class="validity"></span>
    </span>
    <span class="number2Div">
      <input id="number2" name="number2" type="tel" required
             placeholder="Second fragment" pattern="[0-9]{4}"
             aria-label="Second fragment du numéro">
      <span class="validity"></span>
    </span>
  </div>
  <div>
    <button>Envoyer</button>
  </div>
</form>

Le code JavaScript associé est relativement simple, il contient un gestionnaire d'évènements onchange qui est déclenché lorsque la valeur du <select> est modifiée. Il met alors à jour les attributs pattern, placeholder, aria-label du contrôle pour adapter le format attendu au pays choisi.

var selectElem = document.querySelector("select");
var inputElems = document.querySelectorAll("input");

selectElem.onchange = function() {
  for(var i = 0; i < inputElems.length; i++) {
    inputElems[i].value = "";
  }

  if(selectElem.value === "États-Unis") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Code régional";
    inputElems[0].pattern = "[0-9]{3}";

    inputElems[1].placeholder = "Première partie";
    inputElems[1].pattern = "[0-9]{3}";
    inputElems[1].setAttribute("aria-label","Première partie du numéro");

    inputElems[2].placeholder = "Seconde partie";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label","Seconde partie du numéro");
  } else if(selectElem.value === "Royaume-Uni") {
    inputElems[2].parentNode.style.display = "none";

    inputElems[0].placeholder = "Code régional";
    inputElems[0].pattern = "[0-9]{3,6}";

    inputElems[1].placeholder = "Numéro local";
    inputElems[1].pattern = "[0-9]{4,8}";
    inputElems[1].setAttribute("aria-label","Numéro local");
  } else if(selectElem.value === "Allemagne") {
    inputElems[2].parentNode.style.display = "inline";

    inputElems[0].placeholder = "Code régional";
    inputElems[0].pattern = "[0-9]{3,5}";

    inputElems[1].placeholder = "Première partie";
    inputElems[1].pattern = "[0-9]{2,4}";
    inputElems[1].setAttribute("aria-label","Première partie du numéro");

    inputElems[2].placeholder = "Seconde partie";
    inputElems[2].pattern = "[0-9]{4}";
    inputElems[2].setAttribute("aria-label","Seconde partie du numéro");
  }
}

Voici le résultat obtenu :

Attention, cet exemple n'est qu'une illustration du problème associé à la gestion internationale des numéros de téléphone. Il serait prétentieux d'affirmer qu'étendre ce mécanisme à chaque pays suffirait à garantir la bonne saisie d'un numéro de téléphone.

Bien entendu, si cette complexité est trop importante, on peut également faire le choix de contrôler la valeur côté serveur avant de faire un retour à l'utilisateur.

Spécifications

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

Compatibilité des navigateurs

Fonctionnalité Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui) (Oui) (Oui) 10 10.62 (Oui)
Fonctionnalité Android Chrome pour Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile iOS WebKit
(Safari/Chrome/Firefox/etc)
Support simple (Oui) (Oui) (Oui) (Oui) ? (Oui) (Oui)

Voir aussi

Étiquettes et contributeurs liés au document

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