path: root/files/fr/web/html/element/input/tel/index.html

---
title: <input type="tel">
slug: Web/HTML/Element/Input/tel
tags:
  - Element
  - Formulaires
  - HTML
  - Input
  - Reference
translation_of: Web/HTML/Element/input/tel
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"tel"</strong></code> permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour <code><a href="/fr/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code> et <code><a href="/fr/docs/Web/HTML/Element/input/url">&lt;input type="url"&gt;</a></code> , 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.</span></p>

<div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</div>

<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div>

<div class="note">
<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type <code>"tel"</code> utiliseront à la place un contrôle de type <code><a href="/fr/docs/Web/HTML/Element/input/text">"text"</a></code>.</p>
</div>

<h2 id="Valeur">Valeur</h2>

<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui peut prendre l'une de ces deux valeurs :</p>

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

<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>

<p>In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Attribut</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("maxlength")}}</code></td>
   <td>Le nombre de caractères maximal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ.</td>
  </tr>
  <tr>
   <td><code>{{anch("minlength")}}</code></td>
   <td>Le nombre de caractères minimal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td>
  </tr>
  <tr>
   <td><code>{{anch("pattern")}}</code></td>
   <td>Une expression rationnelle à laquelle doit correspondre le numéro de téléphone saisi pour être valide.</td>
  </tr>
  <tr>
   <td><code>{{anch("placeholder")}}</code></td>
   <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td>
  </tr>
  <tr>
   <td><code>{{anch("readonly")}}</code></td>
   <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td>
  </tr>
  <tr>
   <td><code>{{anch("size")}}</code></td>
   <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td>
  </tr>
 </tbody>
</table>

<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3>

<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> 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 à <code>minlength</code>.</p>

<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du numéro de téléphone dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>

<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3>

<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> 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érieur à <code>maxlength</code>.</p>

<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du numéro de téléphone est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p>

<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3>

<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p>

<p>Voir <a href="#format">la section format</a> ci-après pour plus détails et d'exemples.</p>

<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p>

<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p>

<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p>

<h2 id="Attributs_non-standard">Attributs non-standard</h2>

<p>Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Attribute</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("autocorrect")}}</code></td>
   <td>Indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td>
  </tr>
  <tr>
   <td><code>{{anch("mozactionhint")}}</code></td>
   <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td>
  </tr>
 </tbody>
</table>

<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3>

<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p>

<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3>

<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p>

<h2 id="Utiliser_&lt;input_typetel>">Utiliser <code>&lt;input type="tel"&gt;</code></h2>

<p>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.</p>

<div class="note">
<p><strong>Note</strong> : Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. {{anch("Validation")}} ci-après).</p>
</div>

<h3 id="Claviers_adaptés">Claviers adaptés</h3>

<p>L'un des avantages des contrôles de type <code>tel</code> 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 :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/15441/fx-android-tel.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p>

<h3 id="Un_contrôle_simple">Un contrôle simple</h3>

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

<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"&gt;</pre>

<p>{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}</p>

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

<h3 id="Textes_indicatifs_-_placeholders">Textes indicatifs - <em>placeholders</em></h3>

<p>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 <code>placeholder</code>. 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é.</p>

<p>Dans l'exemple suivant, on a un contrôle <code>"tel"</code> avec un attribut <code>placeholder</code> qui vaut <code>"01 23 45 67 89"</code>. 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 :</p>

<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
       placeholder="01 23 45 67 89"&gt;</pre>

<p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p>

<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3>

<p>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.</p>

<h4 id="La_taille_physique">La taille physique</h4>

<p>La taille physique de la boîte de saisie peut être contrôlée avec l'attribut {{htmlattrxref("size", "input")}}. 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 :</p>

<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
       size="20"&gt;</pre>

<p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</p>

<h4 id="La_longueur_de_la_valeur">La longueur de la valeur</h4>

<p>L'attribut <code>size</code> 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 {{htmlattrxref("minlength", "input")}}. 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 {{htmlattrxref("maxlength", "input")}}.</p>

<p>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.</p>

<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
       size="20" minlength="9" maxlength="14"&gt;</pre>

<p>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</p>

<div class="note">
<p><strong>Note</strong> : Ces deux attributs jouent un rôle lors de la {{anch("validation", "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.</p>
</div>

<h3 id="Fournir_une_valeur_par_défaut">Fournir une valeur par défaut</h3>

<p>Il est possible de fournir une valeur par défaut en renseignant au préalable l'attribut {{htmlattrxref("value", "input")}} :</p>

<div id="Default_value">
<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel"
       value="01 23 45 67 89"&gt;</pre>
</div>

<p>{{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}}</p>

<h4 id="Afficher_des_suggestions">Afficher des suggestions</h4>

<p>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 {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément  {{HTMLElement("datalist")}} qui contient autant d'éléments  {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut <code>value</code> de chaque élément <code>&lt;option&gt;</code> qui sera utilisée comme suggestion.</p>

<pre class="brush: html notranslate">&lt;input id="telNo" name="telNo" type="tel" list="defaultTels"&gt;

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

<p>{{EmbedLiveSample("Afficher_des_suggestions", 600, 40)}}</p>

<p>Avec l'élément {{HTMLElement("datalist")}} contenant ces différentes valeurs  {{HTMLElement("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.</p>

<h2 id="Validation">Validation</h2>

<p>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.</p>

<div class="warning"><strong>Attention !</strong> 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.</div>

<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3>

<p>Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le formulaire. Pour cela, on utilisera l'attribut {{htmlattrxref("required", "input")}} :</p>

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

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

<pre class="brush: css notranslate">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;
  color: #8b0000;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
  color: #009000;
}</pre>

<p>Voici le résultat obtenu :</p>

<p>{{EmbedLiveSample("Rendre_la_valeur_obligatoire", 700, 70)}}</p>

<h3 id="Utiliser_un_format_particulier"><a id="format" name="format">Utiliser un format particulier</a></h3>

<p>Si on souhaite restreindre le format de la valeur qui peut être saisie, on peut utiliser l'attribut {{htmlattrxref("pattern","input")}} dont la valeur est une expression rationnelle que la valeur doit respecter pour être valide.</p>

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

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

<div class="hidden">
<pre class="brush: css notranslate">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;
  color: #8b0000;
}

input:valid+span:after {
  position: absolute;
  content: '✓';
  padding-left: 5px;
  color: #009000;
}</pre>
</div>

<p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 70)}}</p>

<p>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.</p>

<h2 id="Exemples">Exemples</h2>

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

<p>Chaque boîte de saisie possède un attribut {{htmlattrxref("placeholder","input")}} qui indique le format pressenti. On utilise également l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer le nombre de caractères ainsi qu'un attribut <code>aria-label</code> qui pourra être lu par un lecteur d'écran ete qui décrit quoi saisir dans le contrôle.</p>

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

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

<pre class="brush: js notranslate">var selectElem = document.querySelector("select");
var inputElems = document.querySelectorAll("input");

selectElem.onchange = function() {
  for(var i = 0; i &lt; 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");
  }
}</pre>

<p>Voici le résultat obtenu :</p>

<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p>

<p>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.</p>

<p>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.</p>

<div class="hidden">
<pre class="brush: css notranslate">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;
}</pre>
</div>

<h2 id="Résumé_technique">Résumé technique</h2>

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("Valeur")}}</strong></td>
   <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un numéro de téléphone ou qui est vide.</td>
  </tr>
  <tr>
   <td><strong>Évènements</strong></td>
   <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td>
  </tr>
  <tr>
   <td><strong>Attributs pris en charge</strong></td>
   <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("size", "input")}}</td>
  </tr>
  <tr>
   <td><strong>Attributs IDL</strong></td>
   <td><code>list,selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code> et <code>value</code></td>
  </tr>
  <tr>
   <td><strong>Méthodes</strong></td>
   <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#tel-state-(type=tel)', '&lt;input type="tel"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Définition initiale.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '&lt;input type="tel"&gt;')}}</td>
   <td>{{Spec2('HTML5.1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>

<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div>

<p>{{Compat("html.elements.input.input-tel")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Le guide sur les formulaires HTML</a></li>
 <li>{{HTMLElement("input")}}</li>
 <li><a href="/fr/docs/Accessibilité/ARIA/formulaires">Les formulaires et l'accessibilité</a></li>
 <li>{{HTMLElement("input")}}
  <ul>
   <li><code><a href="/fr/docs/Web/HTML/Element/input/text">&lt;input type="text"&gt;</a></code></li>
   <li><code><a href="/fr/docs/Web/HTML/Element/input/email">&lt;input type="email"&gt;</a></code></li>
  </ul>
 </li>
</ul>