diff options
Diffstat (limited to 'files/fr/web/html/element/input/tel')
| -rw-r--r-- | files/fr/web/html/element/input/tel/index.md | 573 |
1 files changed, 269 insertions, 304 deletions
diff --git a/files/fr/web/html/element/input/tel/index.md b/files/fr/web/html/element/input/tel/index.md index 14356c7762..5b503a511e 100644 --- a/files/fr/web/html/element/input/tel/index.md +++ b/files/fr/web/html/element/input/tel/index.md @@ -9,248 +9,201 @@ tags: - Reference translation_of: Web/HTML/Element/input/tel --- -<div>{{HTMLRef}}</div> - -<p>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"><input type="email"></a></code> et <code><a href="/fr/docs/Web/HTML/Element/input/url"><input type="url"></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.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</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> +{{HTMLRef}} -<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> +Les éléments {{HTMLElement("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">`](/fr/docs/Web/HTML/Element/input/email) et [`<input type="url">`](/fr/docs/Web/HTML/Element/input/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. -<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> +{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}} -<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> +> **Note :** Les navigateurs qui ne prennent pas en charge le type `"tel"` utiliseront à la place un contrôle de type [`"text"`](/fr/docs/Web/HTML/Element/input/text). -<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> +## Valeur -<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> +Une chaîne de caractères ({{domxref("DOMString")}}) qui peut prendre l'une de ces deux valeurs : -<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> +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. -<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> +## Attributs supplémentaires -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</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>Voir <a href="#format">la section format</a> ci-après pour plus détails et d'exemples.</p> +| Attribut | Description | +| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("maxlength")}}` | Le nombre de caractères maximal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ. | +| `{{anch("minlength")}}` | 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. | +| `{{anch("pattern")}}` | Une expression rationnelle à laquelle doit correspondre le numéro de téléphone saisi pour être valide. | +| `{{anch("placeholder")}}` | Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie. | +| `{{anch("readonly")}}` | Un attribut booléen qui indique si le contenu du champ est en lecture seule. | +| `{{anch("size")}}` | Un nombre qui indique le nombre de caractères affichés par le champ. | -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> +### {{htmlattrdef("maxlength")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</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 `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`. -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du numéro de téléphone 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'utilisateur. -<h2 id="Attributs_non-standard">Attributs non-standard</h2> +### {{htmlattrdef("minlength")}} -<p>Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés.</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 `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érieur à `maxlength`. -<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> +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du numéro de téléphone 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'utilisateur. -<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> +### {{htmlattrdef("pattern")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}} -<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> +Voir [la section format](#format) ci-après pour plus détails et d'exemples. -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} -<h2 id="Utiliser_<input_typetel>">Utiliser <code><input type="tel"></code></h2> +{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} -<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> +{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}} -<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> +## Attributs non-standard -<h3 id="Claviers_adaptés">Claviers adaptés</h3> +Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés. -<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.</p> +| Attribute | Description | +| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("autocorrect")}}` | Indique si la correction automatique doit être appliquée à ce champ texte. **Uniquement pris en charge par Safari.** | +| `{{anch("mozactionhint")}}` | 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. **Uniquement pris en charge par Firefox pour Android.** | -<table class="standard-table"> - <caption>Exemples de claviers adaptés sur appareils mobiles.</caption> - <thead> - <tr> - <th scope="col">Firefox pour Android</th> - <th scope="col">WebKit iOS (Safari/Chrome/Firefox)</th> - </tr> - </thead> - <tbody> - <tr> - <td><img alt="Capture d'écran pour Firefox pour Android" src="fx-android-tel.png"></td> - <td><img alt="Capture d'écran pour Firefox pour iOS" src="iphone-tel-keyboard-50pct.png"></td> - </tr> - </tbody> -</table> +### {{htmlattrdef("autocorrect")}} {{non-standard_inline}} + +{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}} + +### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} + +{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}} + +## 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. {{anch("Validation")}} ci-après). + +### Claviers adaptés -<h3 id="Un_contrôle_simple">Un contrôle simple</h3> +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. -<p>Dans sa forme la plus simple, on peut implémenter un tel contrôle avec ce fragment HTML :</p> +| Firefox pour Android | WebKit iOS (Safari/Chrome/Firefox) | +| ---------------------------------------------------------------- | ----------------------------------------------------------------------- | +|  |  | -<pre class="brush: html"><input id="telNo" name="telNo" type="tel"></pre> +### Un contrôle simple -<p>{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}</p> +Dans sa forme la plus simple, on peut implémenter un tel contrôle avec ce fragment HTML : -<p>Rien de bien surprenant ici. Lorsque les données seront envoyées au serveur, elles auront la forme <code>telNo=0123456789</code>.</p> +```html +<input id="telNo" name="telNo" type="tel"> +``` -<h3 id="Textes_indicatifs_-_placeholders">Textes indicatifs - <em>placeholders</em></h3> +{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}} -<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> +Rien de bien surprenant ici. Lorsque les données seront envoyées au serveur, elles auront la forme `telNo=0123456789`. -<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> +### Textes indicatifs - _placeholders_ -<pre class="brush: html"><input id="telNo" name="telNo" type="tel" - placeholder="01 23 45 67 89"></pre> +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é. -<p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p> +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 : -<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> +```html +<input id="telNo" name="telNo" type="tel" + placeholder="01 23 45 67 89"> +``` -<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> +{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}} -<h4 id="La_taille_physique">La taille physique</h4> +### Contrôler la taille du champ -<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> +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. -<pre class="brush: html"><input id="telNo" name="telNo" type="tel" - size="20"></pre> +#### La taille physique -<p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</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 : -<h4 id="La_longueur_de_la_valeur">La longueur de la valeur</h4> +```html +<input id="telNo" name="telNo" type="tel" + size="20"> +``` -<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> +{{EmbedLiveSample('La_taille_physique', 600, 40)}} -<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> +#### La longueur de la valeur -<pre class="brush: html"><input id="telNo" name="telNo" type="tel" - size="20" minlength="9" maxlength="14"></pre> +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 {{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>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</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. -<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> +```html +<input id="telNo" name="telNo" type="tel" + size="20" minlength="9" maxlength="14"> +``` -<h3 id="Fournir_une_valeur_par_défaut">Fournir une valeur par défaut</h3> +{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}} -<p>Il est possible de fournir une valeur par défaut en renseignant au préalable l'attribut {{htmlattrxref("value", "input")}} :</p> +> **Note :** 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. -<pre class="brush: html"><input id="telNo" name="telNo" type="tel" - value="01 23 45 67 89"></pre> +### Fournir une valeur par défaut -<p>{{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}}</p> +Il est possible de fournir une valeur par défaut en renseignant au préalable l'attribut {{htmlattrxref("value", "input")}} : -<h4 id="Afficher_des_suggestions">Afficher des suggestions</h4> +```html +<input id="telNo" name="telNo" type="tel" + value="01 23 45 67 89"> +``` -<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><option></code> qui sera utilisée comme suggestion.</p> +{{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}} -<pre class="brush: html"><input id="telNo" name="telNo" type="tel" list="defaultTels"> +#### Afficher des suggestions -<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></pre> +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 `value` de chaque élément `<option>` qui sera utilisée comme suggestion. -<p>{{EmbedLiveSample("Afficher_des_suggestions", 600, 40)}}</p> +```html +<input id="telNo" name="telNo" type="tel" list="defaultTels"> -<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> +<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> +``` -<h2 id="Validation">Validation</h2> +{{EmbedLiveSample("Afficher_des_suggestions", 600, 40)}} -<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> +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. -<div class="warning"> - <p><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.</p> -</div> +## Validation -<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3> +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>Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le formulaire. Pour cela, on utilisera l'attribut {{htmlattrxref("required", "input")}} :</p> +> **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. -<pre class="brush: html"><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></pre> +### Rendre la valeur obligatoire -<p>On utilisera la feuille de style suivante pour indiquer les éléments valides ou invalides du formulaire :</p> +Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le formulaire. Pour cela, on utilisera l'attribut {{htmlattrxref("required", "input")}} : -<pre class="brush: css">div { +```html +<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 : + +```css +div { margin-bottom: 10px; position: relative; } @@ -274,31 +227,35 @@ input:valid+span:after { content: '✓'; padding-left: 5px; color: #009000; -}</pre> +} +``` -<p>Voici le résultat obtenu :</p> +Voici le résultat obtenu : -<p>{{EmbedLiveSample("Rendre_la_valeur_obligatoire", 700, 70)}}</p> +{{EmbedLiveSample("Rendre_la_valeur_obligatoire", 700, 70)}} -<h3 id="Utiliser_un_format_particulier">Utiliser un format particulier</h3> +### Utiliser un format particulier -<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> +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>Dans cet exemple, on utilisera la même feuille de style que précédemment mais le code HTML sera celui-ci :</p> +Dans cet exemple, on utilisera la même feuille de style que précédemment mais le code HTML sera celui-ci : -<pre class="brush: html"><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></pre> +```html +<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> +``` -<pre class="brush: css hidden">div { +```css hidden +div { margin-bottom: 10px; position: relative; } @@ -322,60 +279,64 @@ input:valid+span:after { content: '✓'; padding-left: 5px; color: #009000; -}</pre> +} +``` -<p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 70)}}</p> +{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 70)}} -<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> +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. -<h2 id="Exemples">Exemples</h2> +## Exemples -<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><input type="tel"></code> permettant de saisir ses différents numéros de téléphone.</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 `<input type="tel">` permettant de saisir ses différents numéros de téléphone. -<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> +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 `aria-label` qui pourra être lu par un lecteur d'écran ete qui décrit quoi saisir dans le contrôle. -<pre class="brush: html"><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 +```html +<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 + 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 + 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></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><select></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">var selectElem = document.querySelector("select"); + 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 {{domxref("GlobalEventHandlers.onchange", "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. + +```js +var selectElem = document.querySelector("select"); var inputElems = document.querySelectorAll("input"); selectElem.onchange = function() { - for(var i = 0; i < inputElems.length; i++) { + for(var i = 0; i < inputElems.length; i++) { inputElems[i].value = ""; } @@ -415,17 +376,19 @@ selectElem.onchange = function() { inputElems[2].pattern = "[0-9]{4}"; inputElems[2].setAttribute("aria-label","Seconde partie du numéro"); } -}</pre> +} +``` -<p>Voici le résultat obtenu :</p> +Voici le résultat obtenu : -<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p> +{{EmbedLiveSample('Exemples', 600, 140)}} -<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> +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>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> +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. -<pre class="brush: css hidden">div { +```css hidden +div { margin-bottom: 10px; position: relative; } @@ -447,73 +410,75 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> +} +``` -<h2 id="Résumé_technique">Résumé technique</h2> +## Résumé technique <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> + <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)', '<input type="tel">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '<input type="tel">')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', 'forms.html#tel-state-(type=tel)', '<input type="tel">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | +| {{SpecName('HTML5.1', 'sec-forms.html#tel-state-typetel', '<input type="tel">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | + +## Compatibilité des navigateurs -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +{{Compat("html.elements.input.input-tel")}} -<p>{{Compat("html.elements.input.input-tel")}}</p> +## Voir aussi -<h2 id="Voir_aussi">Voir aussi</h2> +- [Le guide sur les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) +- {{HTMLElement("input")}} +- [Les formulaires et l'accessibilité](/fr/docs/Accessibilité/ARIA/formulaires) +- {{HTMLElement("input")}} -<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"><input type="text"></a></code></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/email"><input type="email"></a></code></li> - </ul> - </li> -</ul> + - [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text) + - [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email) |