diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-13 07:13:08 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-07 11:56:53 +0100 |
| commit | dea9d1f019d9e14357c58cf18653df1ac779d9d8 (patch) | |
| tree | d20318111821d4e935a6c53409240078c4f687e5 /files/fr/web/html/element/input | |
| parent | 8829a7c9eb82f180bac76ed5836aaef95be209a1 (diff) | |
| download | translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.tar.gz translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.tar.bz2 translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/html/element/input')
24 files changed, 4972 insertions, 5476 deletions
diff --git a/files/fr/web/html/element/input/button/index.md b/files/fr/web/html/element/input/button/index.md index 02a4e420e0..e0ff7fcca8 100644 --- a/files/fr/web/html/element/input/button/index.md +++ b/files/fr/web/html/element/input/button/index.md @@ -9,46 +9,53 @@ tags: - Web translation_of: Web/HTML/Element/input/button --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments {{HTMLElement("input")}} de type <strong><code>button</code></strong> sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement {{event("click")}}).</p> +Les éléments {{HTMLElement("input")}} de type **`button`** sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement {{event("click")}}). -<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div> +{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}} -<div class="note"> -<p><strong>Note :</strong> Bien que les éléments <code><input></code> de type <code>"button"</code> représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.</p> -</div> +> **Note :** Bien que les éléments `<input>` de type `"button"` représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images. + +## Valeur -<h2 id="Valeur">Valeur</h2> +L'attribut {{htmlattrxref("value", "input")}} d'un t'el élément contient une chaîne de caractères qui est utilisée comme étiquette pour le bouton (autrement dit, comme texte affiché sur le bouton). -<p>L'attribut {{htmlattrxref("value", "input")}} d'un t'el élément contient une chaîne de caractères qui est utilisée comme étiquette pour le bouton (autrement dit, comme texte affiché sur le bouton).</p> +### Exemple 1 -<h3 id="Exemple_1">Exemple 1</h3> -<pre class="brush: html"><input type="button" value="Bouton cliquer"></pre> +```html +<input type="button" value="Bouton cliquer"> +``` -<p>{{EmbedLiveSample("Exemple_1", 650, 30)}}</p> +{{EmbedLiveSample("Exemple_1", 650, 30)}} -<h3 id="Exemple_2">Exemple 2</h3> -<p>Si on n'indique aucune valeur, le bouton sera vide :</p> +### Exemple 2 -<pre class="brush: html"><input type="button"></pre> +Si on n'indique aucune valeur, le bouton sera vide : -<p>{{EmbedLiveSample("Exemple_2", 650, 30)}}</p> +```html +<input type="button"> +``` -<h2 id="Utiliser_les_boutons_<input>">Utiliser les boutons <code><input></code></h2> +{{EmbedLiveSample("Exemple_2", 650, 30)}} -<p>Les éléments <code><input type="button"></code> ne possèdent pas de comportement particulier (leurs analogues <code><a href="/fr/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> et <code><a href="/fr/docs/Web/HTML/Element/input/reset"><input type="reset"></a></code> permettent respectivement d'envoyer et de réinitialiser des formulaires). Pour qu'un bouton <code><input type="button"></code> puisse avoir un effet, il est nécessaire d'écrire quelques lignes JavaScript.</p> +## Utiliser les boutons `<input>` -<h3 id="Un_bouton_simple">Un bouton simple</h3> +Les éléments `<input type="button">` ne possèdent pas de comportement particulier (leurs analogues [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) et [`<input type="reset">`](/fr/docs/Web/HTML/Element/input/reset) permettent respectivement d'envoyer et de réinitialiser des formulaires). Pour qu'un bouton `<input type="button">` puisse avoir un effet, il est nécessaire d'écrire quelques lignes JavaScript. -<p>Dans cet exemple, commençons par créer un bouton simple avec un gestionnaire d'évènement permettant de déclencher une action au clic afin de démarrer cette machine (enfin, pour être plus précis : on échangera la valeur de l'attribut <code>value</code> du bouton et le texte situé dans le paragraphe qui suit) :</p> +### Un bouton simple -<pre class="brush: html"><form> - <input type="button" value="Démarrer la machine"> -</form> -<p>La machine est arrêtée.</p></pre> +Dans cet exemple, commençons par créer un bouton simple avec un gestionnaire d'évènement permettant de déclencher une action au clic afin de démarrer cette machine (enfin, pour être plus précis : on échangera la valeur de l'attribut `value` du bouton et le texte situé dans le paragraphe qui suit) : -<pre class="brush: js">var btn = document.querySelector('input'); +```html +<form> + <input type="button" value="Démarrer la machine"> +</form> +<p>La machine est arrêtée.</p> +``` + +```js +var btn = document.querySelector('input'); var txt = document.querySelector('p'); btn.addEventListener('click', updateBtn); @@ -61,26 +68,28 @@ function updateBtn() { btn.value = 'Démarrer la machine'; txt.textContent = 'La machine est arrêtée.'; } -}</pre> +} +``` -<p>Dans ce script, on récupère une référence à l'objet {{domxref("HTMLInputElement")}} qui représente l'élément <code><input></code> du DOM et on stocke cette référence dans la variable <code>btn</code>. {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour ensuite lui rattacher une fonction qui sera utilisée lorsque l'évènement {{event("click")}} se produira sur le bouton.</p> +Dans ce script, on récupère une référence à l'objet {{domxref("HTMLInputElement")}} qui représente l'élément `<input>` du DOM et on stocke cette référence dans la variable `btn`. {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour ensuite lui rattacher une fonction qui sera utilisée lorsque l'évènement {{event("click")}} se produira sur le bouton. -<p>{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}</p> +{{EmbedLiveSample("Un_bouton_simple", 650, 100)}} -<h3 id="Ajouter_des_raccourcis_clavier">Ajouter des raccourcis clavier</h3> +### Ajouter des raccourcis clavier -<p>Les raccourcis clavier permettent à un utilisateur de déclencher une action grâce à une touche ou grâce à une combinaison de touches du clavier. Pour ajouter un raccourci clavier déclenchant le bouton, on pourra ajouter l'attribut universel <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code> (qu'on peut d'ailleurs utiliser pour les autres éléments {{HTMLElement("input")}}).</p> +Les raccourcis clavier permettent à un utilisateur de déclencher une action grâce à une touche ou grâce à une combinaison de touches du clavier. Pour ajouter un raccourci clavier déclenchant le bouton, on pourra ajouter l'attribut universel [`accesskey`](/fr/docs/Web/HTML/Attributs_universels/accesskey) (qu'on peut d'ailleurs utiliser pour les autres éléments {{HTMLElement("input")}}). -<p>Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. <code><a href="/fr/docs/Web/HTML/Attributs_universels/accesskey">accesskey</a></code> pour la liste de ces touches).</p> +Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. [`accesskey`](/fr/docs/Web/HTML/Attributs_universels/accesskey) pour la liste de ces touches). -<pre class="brush: html"><form> - <input type="button" value="Démarrer la machine" accesskey="s"> -</form> -<p>La machine est arrêtée.</p> -</pre> -</div> +```html +<form> + <input type="button" value="Démarrer la machine" accesskey="s"> +</form> +<p>La machine est arrêtée.</p> +``` -<pre class="brush: js hidden">var btn = document.querySelector('input'); +```js hidden +var btn = document.querySelector('input'); var txt = document.querySelector('p'); btn.addEventListener('click', updateBtn); @@ -93,26 +102,31 @@ function updateBtn() { btn.value = 'Démarrer la machine'; txt.textContent = 'La machine est arrêtée.'; } -}</pre> +} +``` -<p>{{EmbedLiveSample("Ajouter_des_raccourcis_clavier", 650, 100)}}</p> +{{EmbedLiveSample("Ajouter_des_raccourcis_clavier", 650, 100)}} -<div class="note"> -<p><strong>Note :</strong> Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.</p> -</div> +> **Note :** Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles. + +### Désactiver et activer un bouton -<h3 id="Désactiver_et_activer_un_bouton">Désactiver et activer un bouton</h3> +Pour désactiver un bouton, il suffit d'ajouter l'attribut universel {{htmlattrxref("disabled")}} : -<p>Pour désactiver un bouton, il suffit d'ajouter l'attribut universel {{htmlattrxref("disabled")}} :</p> +```html +<input type="button" value="Je suis désactivé" disabled> +``` -<pre class="brush: html"><input type="button" value="Je suis désactivé" disabled></pre> +Il est possible d'activer ou de désactiver des boutons lors de de l'utilisation de la page en modifiant l'attribut `disabled` de l'élément dans le DOM. Dans l'exemple qui suit, le bouton est initialement activé et si on appuie dessus : il devient désactivé (c'est ce que fait la ligne de code `btn.disabled = true`). La fonction {{domxref("WindowTimers.setTimeout","setTimeout()")}} est ensuite utilisée afin de réinitialiser le bouton après deux secondes. -<p>Il est possible d'activer ou de désactiver des boutons lors de de l'utilisation de la page en modifiant l'attribut <code>disabled</code> de l'élément dans le DOM. Dans l'exemple qui suit, le bouton est initialement activé et si on appuie dessus : il devient désactivé (c'est ce que fait la ligne de code <code>btn.disabled = true</code>). La fonction {{domxref("WindowTimers.setTimeout","setTimeout()")}} est ensuite utilisée afin de réinitialiser le bouton après deux secondes.</p> +#### Exemple 1 -<h4 id="Exemple_1">Exemple 1</h4> -<pre class="brush: html hidden"><input type="button" value="Activé"></pre> +```html hidden +<input type="button" value="Activé"> +``` -<pre class="brush: js hidden">var btn = document.querySelector('input'); +```js hidden +var btn = document.querySelector('input'); btn.addEventListener('click', disableBtn); @@ -123,25 +137,28 @@ function disableBtn() { btn.disabled = false; btn.value = 'Activé'; }, 2000); -}</pre> -</div> +} +``` -<p>{{EmbedLiveSample("Exemple_1", 650, 60)}}</p> +{{EmbedLiveSample("Exemple_1", 650, 60)}} -<p>Si l'attribut <code>disabled</code> n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément {{HTMLElement("fieldset")}}) et en indiquant <code>disabled</code> sur le conteneur.</p> +Si l'attribut `disabled` n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément {{HTMLElement("fieldset")}}) et en indiquant `disabled` sur le conteneur. -<p>C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut <code>disabled</code> est activé sur l'élément <code><fieldset></code> lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes.</p> +C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut `disabled` est activé sur l'élément `<fieldset>` lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes. -<h4 id="Exemple_2">Exemple 2</h4> +#### Exemple 2 -<pre class="brush: html hidden"><fieldset> - <legend>Groupe de boutons </legend> - <input type="button" value="Bouton 1"> - <input type="button" value="Bouton 2"> - <input type="button" value="Bouton 3"> -</fieldset></pre> +```html hidden +<fieldset> + <legend>Groupe de boutons </legend> + <input type="button" value="Bouton 1"> + <input type="button" value="Bouton 2"> + <input type="button" value="Bouton 3"> +</fieldset> +``` -<pre class="brush: js hidden">var btn = document.querySelector('input'); +```js hidden +var btn = document.querySelector('input'); var fieldset = document.querySelector('fieldset'); btn.addEventListener('click', disableBtn); @@ -151,33 +168,35 @@ function disableBtn() { window.setTimeout(function() { fieldset.disabled = false; }, 2000); -}</pre> +} +``` -<p>{{EmbedLiveSample("Exemple_2", 650, 60)}}</p> +{{EmbedLiveSample("Exemple_2", 650, 60)}} -<div class="note"> -<p><strong>Note :</strong> À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> -</div> +> **Note :** À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité. -<h2 id="Validation">Validation</h2> +## Validation -<p>Les éléments <code><input</code><code> type="button"</code><code>></code> n'ont pas de contrainte de validation.</p> +Les éléments ` <input`` type="button" ``> ` n'ont pas de contrainte de validation. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple qui suit, on montre une application de dessin très simple qui utilise un élément {{htmlelement("canvas")}}, une courte feuille de style CSS (masquée) et du code JavaScript. Les deux contrôles situés en haut permettent de choisir la couleur et la taille de la pointe du crayon. Le bouton quant à lui permet de réinitialiser le canevas.</p> +Dans l'exemple qui suit, on montre une application de dessin très simple qui utilise un élément {{htmlelement("canvas")}}, une courte feuille de style CSS (masquée) et du code JavaScript. Les deux contrôles situés en haut permettent de choisir la couleur et la taille de la pointe du crayon. Le bouton quant à lui permet de réinitialiser le canevas. -<pre class="brush: html"><div class="toolbar"> - <input type="color" aria-label="Sélectionner la couleur du crayon"> - <input type="range" min="2" max="50" value="30" aria-label="Sélectionner la taille de la pointe du crayon"><span class="output">30</span> - <input type="button" value="Réinitialiser le canevas"> -</div> +```html +<div class="toolbar"> + <input type="color" aria-label="Sélectionner la couleur du crayon"> + <input type="range" min="2" max="50" value="30" aria-label="Sélectionner la taille de la pointe du crayon"><span class="output">30</span> + <input type="button" value="Réinitialiser le canevas"> +</div> -<canvas class="myCanvas"> - <p>Votre navigateur ne semble pas prendre en charge cette fonctionnalité.</p> -</canvas></pre> +<canvas class="myCanvas"> + <p>Votre navigateur ne semble pas prendre en charge cette fonctionnalité.</p> +</canvas> +``` -<pre class="brush: css hidden">body { +```css hidden +body { margin: 0; overflow: hidden; background: #ccc; @@ -203,9 +222,11 @@ input[type="range"] { span { position: relative; bottom: 5px; - }</pre> + } +``` -<pre class="brush: js">var canvas = document.querySelector('.myCanvas'); +```js +var canvas = document.querySelector('.myCanvas'); var width = canvas.width = window.innerWidth; var height = canvas.height = window.innerHeight-85; var ctx = canvas.getContext('2d'); @@ -265,67 +286,54 @@ function draw() { requestAnimationFrame(draw); } -draw();</pre> +draw(); +``` -<p>{{EmbedLiveSample("Exemples", '100%', 600)}}</p> +{{EmbedLiveSample("Exemples", '100%', 600)}} -<h2 id="Résumé_technique">Résumé technique</h2> +## Résumé technique <table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td>A {{domxref("DOMString")}} used as the button's label</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("click")}}</td> - </tr> - <tr> - <td><strong>Attributs pris en Supported common attributes</strong></td> - <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>value</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>Aucune</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>A {{domxref("DOMString")}} used as the button's label</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en Supported common attributes</strong></td> + <td> + {{htmlattrxref("type", "input")}}, and + {{htmlattrxref("value", "input")}} + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>Aucune</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#button-state-(type=button)', '<input type="button">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-button")}}</p> +{{Compat("html.elements.input.input-button")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément {{HTMLElement("input")}}</li> - <li>L'interface DOM {{domxref("HTMLInputElement")}} implémentée par l'élément</li> - <li>L'élément {{HTMLElement("button")}}, plus moderne</li> -</ul> +- L'élément {{HTMLElement("input")}} +- L'interface DOM {{domxref("HTMLInputElement")}} implémentée par l'élément +- L'élément {{HTMLElement("button")}}, plus moderne diff --git a/files/fr/web/html/element/input/checkbox/index.md b/files/fr/web/html/element/input/checkbox/index.md index a2e5726900..7304f7b9f8 100644 --- a/files/fr/web/html/element/input/checkbox/index.md +++ b/files/fr/web/html/element/input/checkbox/index.md @@ -9,144 +9,130 @@ tags: - Web translation_of: Web/HTML/Element/input/checkbox --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments {{htmlelement("input")}} de type <strong><code>checkbox</code></strong> sont affichés sous la forme de boîtes à cocher qui sont cochées lorsqu'elles sont activées. Elles permettent de sélectionner une ou plusieurs valeurs dans un formulaire.</p> +Les éléments {{htmlelement("input")}} de type **`checkbox`** sont affichés sous la forme de boîtes à cocher qui sont cochées lorsqu'elles sont activées. Elles permettent de sélectionner une ou plusieurs valeurs dans un formulaire. -<div>{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div> +{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}} -<div class="note"> -<p><strong>Note :</strong> <a href="/fr/docs/Web/HTML/Element/input/radio">Les boutons radio</a> sont semblables aux cases à cocher mais il existe une différence importante : les boutons radio permettent de sélectionner une seule valeur parmi plusieurs alors que les cases à cocher permettent de cocher/décocher plusieurs valeurs d'un groupe.</p> -</div> +> **Note :** [Les boutons radio](/fr/docs/Web/HTML/Element/input/radio) sont semblables aux cases à cocher mais il existe une différence importante : les boutons radio permettent de sélectionner une seule valeur parmi plusieurs alors que les cases à cocher permettent de cocher/décocher plusieurs valeurs d'un groupe. -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la case à cocher. Cette chaîne de caractères n'est pas affichée côté client mais est envoyée au serveur comme valeur associée à la donnée envoyée avec le nom de la case à cocher. Par exemple :</p> +Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la case à cocher. Cette chaîne de caractères n'est pas affichée côté client mais est envoyée au serveur comme valeur associée à la donnée envoyée avec le nom de la case à cocher. Par exemple : -<pre class="brush: html"><form> - <div> - <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"> - <label for="subscribeNews">Souhaitez-vous vous abonner à la newsletter ?</label> - </div> - <div> - <button type="submit">S'abonner</button> - </div> -</form></pre> +```html +<form> + <div> + <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"> + <label for="subscribeNews">Souhaitez-vous vous abonner à la newsletter ?</label> + </div> + <div> + <button type="submit">S'abonner</button> + </div> +</form> +``` -<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> +{{EmbedLiveSample('Valeur', 600, 60)}} -<p>Dans cet exemple, on a le nom (l'attribut <code>name</code>) <code>subscribe</code> utilisé pour la case à cocher avec une valeur (l'attribut <code>value</code>) qui est <code>newsletter</code>. Lorsque le formulaire est envoyé, les données seront transmises sous la forme <code>subscribe=newsletter</code>.</p> +Dans cet exemple, on a le nom (l'attribut `name`) `subscribe` utilisé pour la case à cocher avec une valeur (l'attribut `value`) qui est `newsletter`. Lorsque le formulaire est envoyé, les données seront transmises sous la forme `subscribe=newsletter`. -<p>Si l'attribut <code>value</code> n'était pas renseigné, la valeur par défaut sera <code>on</code> (dans l'exemple, les données envoyées au serveur auraient la forme <code>subscribe=on</code>).</p> +Si l'attribut `value` n'était pas renseigné, la valeur par défaut sera `on` (dans l'exemple, les données envoyées au serveur auraient la forme `subscribe=on`). -<div class="note"> -<p><strong>Note :</strong> Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, aucune valeur n'est envoyée au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme <code>value=unchecked</code>) ; la valeur n'est pas transmise au serveur du tout.</p> -</div> +> **Note :** Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, aucune valeur n'est envoyée au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme `value=unchecked`) ; la valeur n'est pas transmise au serveur du tout. -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> +## Attributs supplémentaires -<p>En plus des attributs qui sont partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"checkbox"</code> prennent aussi en charge les attributs suivants :</p> +En plus des attributs qui sont partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"checkbox"` prennent aussi en charge les attributs suivants : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("checked")}}</code></td> - <td>Un attribut booléen. Si celui-ci est présent, la case à cocher sera cochée.</td> - </tr> - <tr> - <td><code>{{anch("value")}}</code></td> - <td>La chaîne de caractères qui sera utilisée pour représenter la valeur lorsque celle-ci sera envoyée au serveur si la case est cochée.</td> - </tr> - </tbody> -</table> +| Attribut | Description | +| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | +| `{{anch("checked")}}` | Un attribut booléen. Si celui-ci est présent, la case à cocher sera cochée. | +| `{{anch("value")}}` | La chaîne de caractères qui sera utilisée pour représenter la valeur lorsque celle-ci sera envoyée au serveur si la case est cochée. | -<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3> +### {{htmlattrdef("checked")}} -<p>Un attribut booléen qui indique si la case est cochée. Cet attribut n'indique pas si la case est actuellement cochée : si l'état a été modifié, l'attribut dans le document ne reflètera pas cette modification (seul l'attribut IDL <code>checked</code>de l'objet {{domxref("HTMLInputElement")}} est mis à jour).</p> +Un attribut booléen qui indique si la case est cochée. Cet attribut n'indique pas si la case est actuellement cochée : si l'état a été modifié, l'attribut dans le document ne reflètera pas cette modification (seul l'attribut IDL `checked`de l'objet {{domxref("HTMLInputElement")}} est mis à jour). -<div class="note"> -<p><strong>Note :</strong> À la différence des autres champs, les valeurs des cases à cocher ne sont envoyées au serveur que lorsqu'elles sont cochées. Lorsque c'est le cas, c'est la valeur de l'attribut <code>value</code> qui est envoyé.</p> -</div> +> **Note :** À la différence des autres champs, les valeurs des cases à cocher ne sont envoyées au serveur que lorsqu'elles sont cochées. Lorsque c'est le cas, c'est la valeur de l'attribut `value` qui est envoyé. -<p>À la différence des autres navigateurs, Firefox <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">conserve l'état coché placé dynamiquement</a> d'un champ <code><input></code> après les rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> +À la différence des autres navigateurs, Firefox [conserve l'état coché placé dynamiquement](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) d'un champ `<input>` après les rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} peut être utilisé afin de contrôler cette fonctionnalité. -<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3> +### {{htmlattrdef("value")}} -<p>L'attribut <code>value</code> est partagé par l'ensemble des éléments <code><input></code> mais il a un rôle spécifique pour les champs de type <code>checkbox</code> : lorsqu'un formulaire est envoyé, seules les cases à cocher qui sont cochées sont envoyées au serveur et c'est la valeur de l'attribut <code>value</code> qui est envoyée. Si l'attribut <code>value</code> n'est pas renseigné, ce sera la chaîne de caractères <code>"on"</code> qui sera envoyée par défaut.</p> +L'attribut `value` est partagé par l'ensemble des éléments `<input>` mais il a un rôle spécifique pour les champs de type `checkbox` : lorsqu'un formulaire est envoyé, seules les cases à cocher qui sont cochées sont envoyées au serveur et c'est la valeur de l'attribut `value` qui est envoyée. Si l'attribut `value` n'est pas renseigné, ce sera la chaîne de caractères `"on"` qui sera envoyée par défaut. -<h2 id="Utiliser_les_cases_à_cocher">Utiliser les cases à cocher</h2> +## Utiliser les cases à cocher -<h3 id="Gérer_plusieurs_cases_à_cocher">Gérer plusieurs cases à cocher</h3> +### Gérer plusieurs cases à cocher -<p>Dans l'exemple précédent, il n'y a qu'une seule case à cocher. Dans un scénario réaliste, on aura vraisemblablement plusieurs cases à cocher. Si celles-ci n'ont pas de rapport entre elles, il est possible de les gérer de façon séparée avec des cases à cocher « unitaires » comme illustré précédemment. Toutefois, si les valeurs sont liées entre elles, il est alors nécessaire d'indiquer ce lien.</p> +Dans l'exemple précédent, il n'y a qu'une seule case à cocher. Dans un scénario réaliste, on aura vraisemblablement plusieurs cases à cocher. Si celles-ci n'ont pas de rapport entre elles, il est possible de les gérer de façon séparée avec des cases à cocher « unitaires » comme illustré précédemment. Toutefois, si les valeurs sont liées entre elles, il est alors nécessaire d'indiquer ce lien. -<p>Dans l'exemple qui suit, on affiche différentes cases à cocher pour représenter les intérets d'un utilisateur (voir l'exemple complet dans la section {{anch("Exemples")}}).</p> +Dans l'exemple qui suit, on affiche différentes cases à cocher pour représenter les intérets d'un utilisateur (voir l'exemple complet dans la section {{anch("Exemples")}}). -<pre class="brush: html"><fieldset> - <legend>Veuillez sélectionner vos intérêts :</legend> - <div> - <input type="checkbox" id="coding" name="interest" value="coding"> - <label for="coding">Développement</label> - </div> - <div> - <input type="checkbox" id="music" name="interest" value="music"> - <label for="music">Musique</label> - </div> -</fieldset></pre> +```html +<fieldset> + <legend>Veuillez sélectionner vos intérêts :</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding"> + <label for="coding">Développement</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Musique</label> + </div> +</fieldset> +``` -<p>{{EmbedLiveSample('Gérer_plusieurs_cases_à_cocher', 600, 100)}}</p> +{{EmbedLiveSample('Gérer_plusieurs_cases_à_cocher', 600, 100)}} -<p>Dans cet exemple on voit que chaque case à cocher utilise le même attribut <code>name</code>. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : <code>interest=coding&interest=music</code>. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélctionnées (voir <a href="https://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Gérer plusieurs cases à cocher avec une seule variable côté serveur</a> par exemple).</p> +Dans cet exemple on voit que chaque case à cocher utilise le même attribut `name`. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : `interest=coding&interest=music`. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélctionnées (voir [Gérer plusieurs cases à cocher avec une seule variable côté serveur](https://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable) par exemple). -<h3 id="Cocher_certaines_cases_par_défaut">Cocher certaines cases par défaut</h3> +### Cocher certaines cases par défaut -<p>Afin qu'une case à cocher soit sélectionnée par défaut, il suffit de placer l'attribut booléen <code>checked</code>. Voir l'exemple qui suit :</p> +Afin qu'une case à cocher soit sélectionnée par défaut, il suffit de placer l'attribut booléen `checked`. Voir l'exemple qui suit : -<pre class="brush: html"><fieldset> - <legend>Veuillez sélectionner vos intérêts</legend> - <div> - <input type="checkbox" id="coding" name="interest" value="coding" checked> - <label for="coding">Développement</label> - </div> - <div> - <input type="checkbox" id="music" name="interest" value="music"> - <label for="music">Musique</label> - </div> -</fieldset></pre> +```html +<fieldset> + <legend>Veuillez sélectionner vos intérêts</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding" checked> + <label for="coding">Développement</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Musique</label> + </div> +</fieldset> +``` -<p>{{EmbedLiveSample('Cocher_certaines_cases_par_défaut', 600, 100)}}</p> +{{EmbedLiveSample('Cocher_certaines_cases_par_défaut', 600, 100)}} -<h3 id="Fournir_une_zone_cliquable_plus_grande">Fournir une zone cliquable plus grande</h3> +### Fournir une zone cliquable plus grande -<p>Dans les exemples précédents, vous avez peut-être remarqué qu'il était possible de cocher une case en cliquant sur l'élément {{htmlelement("label")}} associé. Il s'agit d'une fonctionnalité particulièrement utile des étiquettes de formulaire HTML : il y a ainsi plus d'espace qui peut être utilisé pour sélectionner les options voulues (notamment sur les petits écrans).</p> +Dans les exemples précédents, vous avez peut-être remarqué qu'il était possible de cocher une case en cliquant sur l'élément {{htmlelement("label")}} associé. Il s'agit d'une fonctionnalité particulièrement utile des étiquettes de formulaire HTML : il y a ainsi plus d'espace qui peut être utilisé pour sélectionner les options voulues (notamment sur les petits écrans). -<p>En plus des raisons liées à l'accessibilité, il s'agit d'une bonne raison pour indiquer correctement des éléments <code><label></code> dans vos formulaires.</p> +En plus des raisons liées à l'accessibilité, il s'agit d'une bonne raison pour indiquer correctement des éléments `<label>` dans vos formulaires. -<h3 id="Gérer_un_état_indéterminé">Gérer un état indéterminé</h3> +### Gérer un état indéterminé -<p>Il existe un état indéterminé pour les cases à cocher qui indique que la case n'est ni cochée, ni décochée mais indéterminéee. Cet état peut être obtenu via la propriété <code>indeterminate</code> d'un élément {{domxref("HTMLInputElement")}} en JavaScript (il est impossible d'obtenir cet état en utilisant uniquement du HTML) :</p> +Il existe un état indéterminé pour les cases à cocher qui indique que la case n'est ni cochée, ni décochée mais indéterminéee. Cet état peut être obtenu via la propriété `indeterminate` d'un élément {{domxref("HTMLInputElement")}} en JavaScript (il est impossible d'obtenir cet état en utilisant uniquement du HTML) : -<pre class="brush: js">inputInstance.indeterminate = true;</pre> +```js +inputInstance.indeterminate = true; +``` -<p>Dans la plupart des navigateurs, une case à cocher dans un état indéterminé est représentée avec une ligne horizontale en travers de la case.</p> +Dans la plupart des navigateurs, une case à cocher dans un état indéterminé est représentée avec une ligne horizontale en travers de la case. -<p>Voici un exemple d'utilisation de cet état (tiré de <a href="https://css-tricks.com/indeterminate-checkboxes/">CSS Tricks</a>) où on tient le compte des ingrédients qu'on possède pour une recette. Lorsqu'on coche ou décoche une case d'un ingrédient, une fonction JavaScript vérifie le nombre d'ingrédients possédés (c'est-à-dire cochés) :</p> +Voici un exemple d'utilisation de cet état (tiré de [CSS Tricks](https://css-tricks.com/indeterminate-checkboxes/)) où on tient le compte des ingrédients qu'on possède pour une recette. Lorsqu'on coche ou décoche une case d'un ingrédient, une fonction JavaScript vérifie le nombre d'ingrédients possédés (c'est-à-dire cochés) : -<ul> - <li>Si aucun n'est coché, la case associée à la recette est décochée.</li> - <li>Si un ou deux éléments sont cochés, la case associée à la recette est dans un état indéterminé.</li> - <li>Si les trois ingrédients sont cochés, la case associée à la recette est cochée.</li> -</ul> +- Si aucun n'est coché, la case associée à la recette est décochée. +- Si un ou deux éléments sont cochés, la case associée à la recette est dans un état indéterminé. +- Si les trois ingrédients sont cochés, la case associée à la recette est cochée. -<p>Dans cet exemple, l'état <code>indeterminate</code> est utilisé afin d'indiquer qu'on possède certains ingrédients mais pas suffisamment pour une recette.</p> +Dans cet exemple, l'état `indeterminate` est utilisé afin d'indiquer qu'on possède certains ingrédients mais pas suffisamment pour une recette. -<pre class="brush: js"> +```js var overall = document.querySelector('input[id="EnchTbl"]'); var ingredients = document.querySelectorAll('ul input'); @@ -154,13 +140,13 @@ overall.addEventListener('click', function(e) { e.preventDefault(); }); -for(var i = 0; i < ingredients.length; i++) { +for(var i = 0; i < ingredients.length; i++) { ingredients[i].addEventListener('click', updateDisplay); } function updateDisplay() { var checkedCount = 1; - for(var i = 0; i < ingredients.length; i++) { + for(var i = 0; i < ingredients.length; i++) { if(ingredients[i].checked) { checkedCount++; } @@ -176,57 +162,58 @@ function updateDisplay() { overall.indeterminate = true; } } -</pre> - -<p>{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}</p> - -<div class="note"> -<p><strong>Note :</strong> Si vous envoyez un formulaire avec une case à cocher dans un état indéterminé, le résultat obtenu est le même que si la case avait été décochée : aucune donnée n'est envoyée au serveur.</p> -</div> - -<h2 id="Validation">Validation</h2> - -<p>Il n'y a pas de mécanisme de validation natif pour la valeur d'une case à cocher.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Dans l'exemple suivant, on développe l'exemple vu précédemment avec les groupes de cases à cocher : il y a cette fois plus d'options et un champ texte libre qui permet de saisir une autre valeur. Pour cela on utilise un bloc de code JavaScript et quelques règles CSS pour la mise en forme.</p> - -<pre class="brush: html"><form> - <fieldset> - <legend>Veuillez sélectionner vos intérêts</legend> - <div> - <input type="checkbox" id="coding" name="interest" value="coding"> - <label for="coding">Développement</label> - </div> - <div> - <input type="checkbox" id="music" name="interest" value="music"> - <label for="music">Musique</label> - </div> - <div> - <input type="checkbox" id="art" name="interest" value="art"> - <label for="art">Art</label> - </div> - <div> - <input type="checkbox" id="sports" name="interest" value="sports"> - <label for="sports">Sports</label> - </div> - <div> - <input type="checkbox" id="cooking" name="interest" value="cooking"> - <label for="cooking">Cuisine</label> - </div> - <div> - <input type="checkbox" id="other" name="interest" value="other"> - <label for="other">Autre</label> - <input type="text" id="otherValue" name="other"> - </div> - <div> - <button type="submit">Envoyer le formulaire</button> - </div> - </fieldset> -</form></pre> - -<pre class="brush: css">html { +``` + +{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}} + +> **Note :** Si vous envoyez un formulaire avec une case à cocher dans un état indéterminé, le résultat obtenu est le même que si la case avait été décochée : aucune donnée n'est envoyée au serveur. + +## Validation + +Il n'y a pas de mécanisme de validation natif pour la valeur d'une case à cocher. + +## Exemples + +Dans l'exemple suivant, on développe l'exemple vu précédemment avec les groupes de cases à cocher : il y a cette fois plus d'options et un champ texte libre qui permet de saisir une autre valeur. Pour cela on utilise un bloc de code JavaScript et quelques règles CSS pour la mise en forme. + +```html +<form> + <fieldset> + <legend>Veuillez sélectionner vos intérêts</legend> + <div> + <input type="checkbox" id="coding" name="interest" value="coding"> + <label for="coding">Développement</label> + </div> + <div> + <input type="checkbox" id="music" name="interest" value="music"> + <label for="music">Musique</label> + </div> + <div> + <input type="checkbox" id="art" name="interest" value="art"> + <label for="art">Art</label> + </div> + <div> + <input type="checkbox" id="sports" name="interest" value="sports"> + <label for="sports">Sports</label> + </div> + <div> + <input type="checkbox" id="cooking" name="interest" value="cooking"> + <label for="cooking">Cuisine</label> + </div> + <div> + <input type="checkbox" id="other" name="interest" value="other"> + <label for="other">Autre</label> + <input type="text" id="otherValue" name="other"> + </div> + <div> + <button type="submit">Envoyer le formulaire</button> + </div> + </fieldset> +</form> +``` + +```css +html { font-family: sans-serif; } @@ -259,11 +246,12 @@ legend { { display: inline-block; } -</pre> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<pre class="brush: js">var otherCheckbox = document.querySelector('input[value="other"]'); +```js +var otherCheckbox = document.querySelector('input[value="other"]'); var otherText = document.querySelector('input[id="otherValue"]'); otherText.style.visibility = 'hidden'; @@ -274,69 +262,56 @@ otherCheckbox.onchange = function() { } else { otherText.style.visibility = 'hidden'; } -};</pre> +}; +``` -<p>{{EmbedLiveSample('Exemples', '100%', 300)}}</p> +{{EmbedLiveSample('Exemples', '100%', 300)}} -<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 la valeur de la case à cocher.</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("change")}} et {{event("input")}}</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td><code>checked</code></td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>checked</code> et <code>value</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères ({{domxref("DOMString")}}) qui + représente la valeur de la case à cocher. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{event("input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td><code>checked</code></td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>checked</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}} + </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#checkbox-state-(type=checkbox)', '<input type="checkbox">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '<input type="checkbox">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'forms.html#checkbox-state-(type=checkbox)', '<input type="checkbox">')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#checkbox-state-(type=checkbox)', '<input type="checkbox">')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-checkbox")}}</p> +{{Compat("html.elements.input.input-checkbox")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément {{HTMLElement("input")}} et l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}.</li> - <li>{{cssxref(":checked")}}</li> - <li>{{cssxref("indeterminate")}}</li> -</ul> +- L'élément {{HTMLElement("input")}} et l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}. +- {{cssxref(":checked")}} +- {{cssxref("indeterminate")}} diff --git a/files/fr/web/html/element/input/color/index.md b/files/fr/web/html/element/input/color/index.md index 4fe3dd2319..6245b08820 100644 --- a/files/fr/web/html/element/input/color/index.md +++ b/files/fr/web/html/element/input/color/index.md @@ -9,41 +9,42 @@ tags: - Web translation_of: Web/HTML/Element/input/color --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments {{HTMLElement("input")}} de type <code><strong>"color"</strong></code> permettent de sélectionner une couleur via une interface (un sélecteur de couleur) ou en saisissant le code hexadécimal de la couleur au format <code>"#rrggbb"</code>. Ce format de valeur peut être utilisé en CSS.</p> +Les éléments {{HTMLElement("input")}} de type **`"color"`** permettent de sélectionner une couleur via une interface (un sélecteur de couleur) ou en saisissant le code hexadécimal de la couleur au format `"#rrggbb"`. Ce format de valeur peut être utilisé en CSS. -<p>L'apparence du contrôle de sélection des couleurs peut grandement varier d'un navigateur à un autre et d'un système d'exploitation à un autre. Pour certains navigateurs, seul un champ textuel sera affiché afin de saisir le code de la couleur (avec des mécanismes de validation vérifiant le format), pour d'autres, ce sera le sélecteur de couleur du système d'exploitation qui sera utilisé et pour d'autres encore, ce sera un sélecteur de couleur spécifique.</p> +L'apparence du contrôle de sélection des couleurs peut grandement varier d'un navigateur à un autre et d'un système d'exploitation à un autre. Pour certains navigateurs, seul un champ textuel sera affiché afin de saisir le code de la couleur (avec des mécanismes de validation vérifiant le format), pour d'autres, ce sera le sélecteur de couleur du système d'exploitation qui sera utilisé et pour d'autres encore, ce sera un sélecteur de couleur spécifique. -<div>{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}</div> +{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}} -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>L'attribut {{htmlattrxref("value", "input")}} d'un élément <code><input type="color"></code> est une chaîne de caractères sur 7 caractères qui correspond au code de la couleur en représentation hexadécimale RGB. Autrement dit, le premier caractère est un croisillon (#) , les deux suivants indiquent la composante rouge (R) de la couleur, les deux suivants indiquent la couleur verte (G pour <em>Green</em> en anglais) et les deux suivants indiquent la composante bleue (B) de la couleur. La valeur respecte nécessairement ce format et n'est jamais vide.</p> +L'attribut {{htmlattrxref("value", "input")}} d'un élément `<input type="color">` est une chaîne de caractères sur 7 caractères qui correspond au code de la couleur en représentation hexadécimale RGB. Autrement dit, le premier caractère est un croisillon (#) , les deux suivants indiquent la composante rouge (R) de la couleur, les deux suivants indiquent la couleur verte (G pour _Green_ en anglais) et les deux suivants indiquent la composante bleue (B) de la couleur. La valeur respecte nécessairement ce format et n'est jamais vide. -<div class="note"> -<p><strong>Note :</strong> Si la valeur saisie n'est pas un code hexadécimal RGB d'une couleur opaque valide, c'est la valeur <code>"#000000"</code> (c'est-à-dire la couleur noire) qui sera utilisée. Il est notamment impossible d'utiliser les noms de couleurs CSS ou des fonctions CSS afin de définir cette valeur. Il faut garder à l'esprit que HTML et CSS sont deux langages séparés, définis par des spécifications distinctes. De plus, les couleurs avec un canal alpha ne sont pas prises en charges, utiliser un code avec une notation sur 9 caractères entraînera également l'utilisation de <code>"#000000"</code>.</p> -</div> +> **Note :** Si la valeur saisie n'est pas un code hexadécimal RGB d'une couleur opaque valide, c'est la valeur `"#000000"` (c'est-à-dire la couleur noire) qui sera utilisée. Il est notamment impossible d'utiliser les noms de couleurs CSS ou des fonctions CSS afin de définir cette valeur. Il faut garder à l'esprit que HTML et CSS sont deux langages séparés, définis par des spécifications distinctes. De plus, les couleurs avec un canal alpha ne sont pas prises en charges, utiliser un code avec une notation sur 9 caractères entraînera également l'utilisation de `"#000000"`. -<h2 id="Utiliser_les_contrôles_de_saisie_des_couleurs">Utiliser les contrôles de saisie des couleurs</h2> +## Utiliser les contrôles de saisie des couleurs -<p>Les éléments <code><input type="color"></code> sont simples à utiliser (notamment en raison du faible nombre d'attributs qu'ils gèrent).</p> +Les éléments `<input type="color">` sont simples à utiliser (notamment en raison du faible nombre d'attributs qu'ils gèrent). -<h3 id="Fournir_une_couleur_par_défaut">Fournir une couleur par défaut</h3> +### Fournir une couleur par défaut -<p>Il est possible de créer un sélecteur de couleur qui emploie une valeur par défaut :</p> +Il est possible de créer un sélecteur de couleur qui emploie une valeur par défaut : -<pre class="brush: html"><input type="color" value="#ff0000"></pre> +```html +<input type="color" value="#ff0000"> +``` -<p>{{EmbedLiveSample("Fournir_une_couleur_par_défaut", 700, 30)}}</p> +{{EmbedLiveSample("Fournir_une_couleur_par_défaut", 700, 30)}} -<p>Si aucune valeur n'est indiquée, c'est <code>"#000000"</code> qui sera utilisée par défaut (la couleur noire). Comme indiqué dans la note ci-avant, la valeur de cet attribut doit être de la forme <code>"#rrggbb"</code>. Pour les couleurs dans un autre format (couleurs nommées CSS ou couleurs calculées à l'aide des fonctions <code>rgb()</code> ou <code>rgba()</code>), il faudra les convertir au format hexadécimal avant de les utiliser pour <code>value</code>.</p> +Si aucune valeur n'est indiquée, c'est `"#000000"` qui sera utilisée par défaut (la couleur noire). Comme indiqué dans la note ci-avant, la valeur de cet attribut doit être de la forme `"#rrggbb"`. Pour les couleurs dans un autre format (couleurs nommées CSS ou couleurs calculées à l'aide des fonctions `rgb()` ou `rgba()`), il faudra les convertir au format hexadécimal avant de les utiliser pour `value`. -<h3 id="Détecter_le_changement_de_couleur">Détecter le changement de couleur</h3> +### Détecter le changement de couleur -<p>Comme pour les différents éléments {{HTMLElement("input")}}, deux évènements peuvent être utilisés afin de détecter une modification de la couleur : {{event("input")}} et {{event("change")}}. <code>input</code> est déclenché sur l'élément <code><input></code> à chaque fois que la couleur change. L'évènement <code>change</code> est déclenché lorsque l'utilisateur ferme le sélecteur de couleur. Dans tous les cas, il est possible de déterminer la nouvelle valeur de l'élément grâce à {{domxref("HTMLInputElement.value", "value")}}.</p> +Comme pour les différents éléments {{HTMLElement("input")}}, deux évènements peuvent être utilisés afin de détecter une modification de la couleur : {{event("input")}} et {{event("change")}}. `input` est déclenché sur l'élément `<input>` à chaque fois que la couleur change. L'évènement `change` est déclenché lorsque l'utilisateur ferme le sélecteur de couleur. Dans tous les cas, il est possible de déterminer la nouvelle valeur de l'élément grâce à {{domxref("HTMLInputElement.value", "value")}}. -<pre class="brush: js">colorPicker.addEventListener("input", updateFirst, false); +```js +colorPicker.addEventListener("input", updateFirst, false); colorPicker.addEventListener("change", watchColorPicker, false); function watchColorPicker(event) { @@ -51,147 +52,144 @@ function watchColorPicker(event) { p.style.color = event.target.value; }); } -</pre> +``` -<h3 id="Sélectionner_la_valeur">Sélectionner la valeur</h3> +### Sélectionner la valeur -<p>Si l'implémentation du navigateur n'affiche pas de sélecteur de couleur mais un champ texte, il est possible de sélectionner la valeur du texte avec la méthode {{domxref("HTMLInputElement.select", "select()")}}. Si le navigateur affiche un sélecteur de couleur, <code>select()</code> ne fera rien. Soyez conscient⋅e de ce comportement afin d'adapter votre code à ce cas.</p> +Si l'implémentation du navigateur n'affiche pas de sélecteur de couleur mais un champ texte, il est possible de sélectionner la valeur du texte avec la méthode {{domxref("HTMLInputElement.select", "select()")}}. Si le navigateur affiche un sélecteur de couleur, `select()` ne fera rien. Soyez conscient⋅e de ce comportement afin d'adapter votre code à ce cas. -<pre class="brush: js">colorWell.select();</pre> +```js +colorWell.select(); +``` -<h2 id="Validation">Validation</h2> +## Validation -<p>La valeur d'un tel champ est considérée invalide si l'interface utilisateur ne parvient pas à convertir la saisie de l'utilisateur en une notation hexadécimale sur sept caractères et en minuscules. Si c'est le cas, la pseudo-classe CSS {{cssxref(":invalid")}} sera appliquée à l'élément.</p> +La valeur d'un tel champ est considérée invalide si l'interface utilisateur ne parvient pas à convertir la saisie de l'utilisateur en une notation hexadécimale sur sept caractères et en minuscules. Si c'est le cas, la pseudo-classe CSS {{cssxref(":invalid")}} sera appliquée à l'élément. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Créons un exemple qui utilise un sélecteur de couleur et les évènements {{event("change")}} et {{event("input")}} afin de choisir une nouvelle couleur et de l'appliquer sur chaque élément {{HTMLElement("p")}} du document.</p> +Créons un exemple qui utilise un sélecteur de couleur et les évènements {{event("change")}} et {{event("input")}} afin de choisir une nouvelle couleur et de l'appliquer sur chaque élément {{HTMLElement("p")}} du document. -<h3 id="HTML">HTML</h3> +### HTML -<p>Le fragment de code HTML utilisé est relativement simple. On utilise quelques paragraphes descriptifs ainsi qu'un élément {{HTMLElement("input")}} de type <code>"color"</code> dont l'identifiant est <code>"colorWell"</code> (c'est la valeur de cette couleur qu'on utilisera pour changer la couleur du texte des paragraphes).</p> +Le fragment de code HTML utilisé est relativement simple. On utilise quelques paragraphes descriptifs ainsi qu'un élément {{HTMLElement("input")}} de type `"color"` dont l'identifiant est `"colorWell"` (c'est la valeur de cette couleur qu'on utilisera pour changer la couleur du texte des paragraphes). -<pre class="brush: html"><p>Un exemple qui illustre l'utilisation de <code>&lt;input type="color"&gt;</code>.</p> +```html +<p>Un exemple qui illustre l'utilisation de <code><input type="color"></code>.</p> -<label for="colorWell">Couleur :</label> -<input type="color" value="#ff0000" id="colorWell"> +<label for="colorWell">Couleur :</label> +<input type="color" value="#ff0000" id="colorWell"> -<p>Vous pouvez ici voir que la couleur du premier paragraphe changer +<p>Vous pouvez ici voir que la couleur du premier paragraphe changer lorsqu'on ajuste la valeur dans le sélecteur. Pour cela, on - utilise l'évènement <code>input</code>. Lorsqu'on ferme le - sélecteur, l'évènement <code>change</code> est déclenché et on - applique la modification est appliquée à l'ensemble des paragraphes.</p></pre> + utilise l'évènement <code>input</code>. Lorsqu'on ferme le + sélecteur, l'évènement <code>change</code> est déclenché et on + applique la modification est appliquée à l'ensemble des paragraphes.</p> +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<p>Tout d'abord, on établit certains variables : une pour la couleur du sélecteur et une autre couleur pour la couleur par défaut. On ajoute un gestionnaire {{event("load")}} afin de lancer les actions de démarrage lorsque la page est chargée.</p> +Tout d'abord, on établit certains variables : une pour la couleur du sélecteur et une autre couleur pour la couleur par défaut. On ajoute un gestionnaire {{event("load")}} afin de lancer les actions de démarrage lorsque la page est chargée. -<pre class="brush: js">var colorWell +```js +var colorWell var defaultColor = "#0000ff"; window.addEventListener("load", startup, false); -</pre> +``` -<h4 id="Initialisation">Initialisation</h4> +#### Initialisation -<p>Lorsque la page est chargée, l'évènement <code>"load"</code> est déclenché et la fonction <code>startup()</code> est donc appelée :</p> +Lorsque la page est chargée, l'évènement `"load"` est déclenché et la fonction `startup()` est donc appelée : -<pre class="brush: js">function startup() { +```js +function startup() { colorWell = document.querySelector("#colorWell"); colorWell.value = defaultColor; colorWell.addEventListener("input", updateFirst, false); colorWell.addEventListener("change", updateAll, false); colorWell.select(); } -</pre> +``` -<p>Dans cette fonction, on utilise la variable <code>colorWell</code> déclarée plus haut et on remplit sa valeur avec la valeur par défaut (la valeur de <code>defaultColor</code>). Ensuite, on indique les gestionnaires d'évènements : {{event("input")}} appellera <code>updateFirst()</code> et {{event("change")}} appellera <code>updateAll()</code> qui seront détaillés ensuite.</p> +Dans cette fonction, on utilise la variable `colorWell` déclarée plus haut et on remplit sa valeur avec la valeur par défaut (la valeur de `defaultColor`). Ensuite, on indique les gestionnaires d'évènements : {{event("input")}} appellera `updateFirst()` et {{event("change")}} appellera `updateAll()` qui seront détaillés ensuite. -<p>Enfin, on appelle {{domxref("HTMLInputElement.select", "select()")}} afin de sélectionner le texte du champ si le contrôle est un champ texte.</p> +Enfin, on appelle {{domxref("HTMLInputElement.select", "select()")}} afin de sélectionner le texte du champ si le contrôle est un champ texte. -<h4 id="Réagir_suite_aux_modifications_de_couleurs">Réagir suite aux modifications de couleurs</h4> +#### Réagir suite aux modifications de couleurs -<p>On dispose de deux fonctions qui gèrent les modifications de couleurs. La fonction <code>updateFirst()</code> permet de répondre à l'évènement <code>input</code> et modifie la couleur du premier paragraphe dans le document en utilisant la nouvelle valeur saisie. Étant donné que les évènements <code>input</code> ont lieu à chaque fois qu'un ajustement est fait, cette fonction sera appelée sans cesse lorsque le sélecteur de couleur est utilisé.</p> +On dispose de deux fonctions qui gèrent les modifications de couleurs. La fonction `updateFirst()` permet de répondre à l'évènement `input` et modifie la couleur du premier paragraphe dans le document en utilisant la nouvelle valeur saisie. Étant donné que les évènements `input` ont lieu à chaque fois qu'un ajustement est fait, cette fonction sera appelée sans cesse lorsque le sélecteur de couleur est utilisé. -<pre class="brush: js">function updateFirst(event) { +```js +function updateFirst(event) { var p = document.querySelector("p"); if (p) { p.style.color = event.target.value; } -}</pre> +} +``` -<p>Lorsque le sélecteur est fermé, cela signifie que la valeur ne sera plus modifié avant une prochaine ouverture du sélecteur. Un évènement <code>change</code> est alors envoyé et cela déclenche alors l'appel de la fonction <code>updateAll()</code> :</p> +Lorsque le sélecteur est fermé, cela signifie que la valeur ne sera plus modifié avant une prochaine ouverture du sélecteur. Un évènement `change` est alors envoyé et cela déclenche alors l'appel de la fonction `updateAll()` : -<pre class="brush: js">function updateAll(event) { +```js +function updateAll(event) { document.querySelectorAll("p").forEach(function(p) { p.style.color = event.target.value; }); } -</pre> +``` -<p>Cela permet de modifier la couleur de chaque bloc {{HTMLElement("p")}} du document afin que la couleur (cf. {{cssxref("color")}}) soit celle sélectionnée dans le contrôle. Pour récupérer cette valeur, on utilise l'objet {{domxref("Event.target", "event.target")}}.</p> +Cela permet de modifier la couleur de chaque bloc {{HTMLElement("p")}} du document afin que la couleur (cf. {{cssxref("color")}}) soit celle sélectionnée dans le contrôle. Pour récupérer cette valeur, on utilise l'objet {{domxref("Event.target", "event.target")}}. -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples", 700, 200)}}</p> +{{EmbedLiveSample("Exemples", 700, 200)}} -<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 sur sept caractères qui indique la couleur (cf. {{cssxref("<color>")}}) en notation hexadécimale (en minuscule).</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("change")}} et {{event("input")}}.</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td>{{htmlattrxref("autocomplete", "input")}} et {{htmlattrxref("list", "input")}}.</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>list</code> et <code>value</code>.</td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères sur sept caractères qui indique la couleur (cf. + {{cssxref("<color>")}}) en notation hexadécimale (en + minuscule). + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{event("input")}}.</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + {{htmlattrxref("autocomplete", "input")}} et + {{htmlattrxref("list", "input")}}. + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code> et <code>value</code>.</td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}} + </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', '#color-state-(type=color)')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', '#color-state-(type=color)')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#the-input-element')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'interact/forms.html#h-17.4')}} | {{Spec2('HTML4.01')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-color")}}</p> +{{Compat("html.elements.input.input-color")}} diff --git a/files/fr/web/html/element/input/date/index.md b/files/fr/web/html/element/input/date/index.md index f8107d4b50..0ec7d916c7 100644 --- a/files/fr/web/html/element/input/date/index.md +++ b/files/fr/web/html/element/input/date/index.md @@ -9,154 +9,144 @@ tags: - Web translation_of: Web/HTML/Element/input/date --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <strong><code>date</code></strong> permettent de créer des champs permettant de saisir des dates (composées d'une année, d'un mois et d'un jour mais pas d'une heure , cf. <code><a href="/fr/docs/Web/HTML/Element/input/time">time</a></code>).</p> +Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`date`** permettent de créer des champs permettant de saisir des dates (composées d'une année, d'un mois et d'un jour mais pas d'une heure , cf. [`time`](/fr/docs/Web/HTML/Element/input/time)). -<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div> +{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}} -<p>L'apparence du contrôle affiché dépend du navigateur utilisé et la prise en charge de cette fonctionnalité est hétérogène (cf. la section {{anch("Compatibilité des navigateurs")}} pour plus de détails). Pour les navigateurs qui ne prennent pas en charge ce type d'élément <code><input></code>, c'est un simple <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code> qui sera affiché.</p> +L'apparence du contrôle affiché dépend du navigateur utilisé et la prise en charge de cette fonctionnalité est hétérogène (cf. la section {{anch("Compatibilité des navigateurs")}} pour plus de détails). Pour les navigateurs qui ne prennent pas en charge ce type d'élément `<input>`, c'est un simple [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text) qui sera affiché. -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>Une chaîne de caractères qui représente la valeur de la date saisie dans le contrôle. Le format à respecter est décrit dans dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates">cette section de l'article sur les formats</a>. Il est possible de fournir une valeur par défaut en renseignant l'attribut {{htmlattrxref("value", "input")}} :</p> +Une chaîne de caractères qui représente la valeur de la date saisie dans le contrôle. Le format à respecter est décrit dans dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates). Il est possible de fournir une valeur par défaut en renseignant l'attribut {{htmlattrxref("value", "input")}} : -<pre class="brush: html"><input id="date" type="date" value="2017-06-01"></pre> +```html +<input id="date" type="date" value="2017-06-01"> +``` -<p>{{EmbedLiveSample('Valeur', 600, 40) }}</p> +{{EmbedLiveSample('Valeur', 600, 40) }} -<p>On notera que le format d'affichage est différent de la valeur réelle de l'attribut <code>value</code> — le format de la date affichée sera déterminé en fonction de la langue utilisée par le navigateur alors que la valeur de l'attribut <code>value</code> aura toujours la forme <code>yyyy-mm-dd</code> (c'est-à-dire les quatres chiffres de l'année, suivi d'un tiret, suivi des deux chiffres pour le mois, suivi d'un tiret puis des deux chiffres pour le jour).</p> +On notera que le format d'affichage est différent de la valeur réelle de l'attribut `value` — le format de la date affichée sera déterminé en fonction de la langue utilisée par le navigateur alors que la valeur de l'attribut `value` aura toujours la forme `yyyy-mm-dd` (c'est-à-dire les quatres chiffres de l'année, suivi d'un tiret, suivi des deux chiffres pour le mois, suivi d'un tiret puis des deux chiffres pour le jour). -<p>On peut également récupérer la valeur de la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}} :</p> +On peut également récupérer la valeur de la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}} : -<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]'); -dateControl.value = '2017-06-01';</pre> +```js +var dateControl = document.querySelector('input[type="date"]'); +dateControl.value = '2017-06-01'; +``` -<h2 id="Utiliser_les_contrôles_de_saisie_de_date">Utiliser les contrôles de saisie de date</h2> +## Utiliser les contrôles de saisie de date -<p>Les contrôles de date semblent pratiques : ils fournissent une interface utilisateur simple afin de sélectionner des dates et normalisent la donnée saisie dans un format unique pour l'envoyer au serveur, quelle que soit la locale de l'utilisateur. Malheureusement, il y a certains problèmes de prise en charge par les navigateurs pour <code><input type="date"></code>.</p> +Les contrôles de date semblent pratiques : ils fournissent une interface utilisateur simple afin de sélectionner des dates et normalisent la donnée saisie dans un format unique pour l'envoyer au serveur, quelle que soit la locale de l'utilisateur. Malheureusement, il y a certains problèmes de prise en charge par les navigateurs pour `<input type="date">`. -<p>Nous verrons ici différents cas d'utilisation de <code><input type="date"></code>, simples et complexes. Puis nous verrons comment parer aux problèmes de support des navigateurs.</p> +Nous verrons ici différents cas d'utilisation de `<input type="date">`, simples et complexes. Puis nous verrons comment parer aux problèmes de support des navigateurs. -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> +## Attributs supplémentaires -<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"date"</code> gèrent les attributs suivants :</p> +En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"date"` gèrent les attributs suivants : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("max")}}</code></td> - <td>La date la plus avancée qui peut être saisie.</td> - </tr> - <tr> - <td><code>{{anch("min")}}</code></td> - <td>La date la plus reculée qui peut être saisie.</td> - </tr> - <tr> - <td><code>{{anch("step")}}</code></td> - <td>Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation.</td> - </tr> - </tbody> -</table> +| Attribut | Description | +| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("max")}}` | La date la plus avancée qui peut être saisie. | +| `{{anch("min")}}` | La date la plus reculée qui peut être saisie. | +| `{{anch("step")}}` | Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation. | -<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> +### {{htmlattrdef("max")}} -<p>La date la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>max</code> n'est pas une chaîne de caractères qui suit le format <code>yyyy-MM-dd</code>, il n'y aura pas de valeur maximale.</p> +La date la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `max` n'est pas une chaîne de caractères qui suit le format `yyyy-MM-dd`, il n'y aura pas de valeur maximale. -<p>La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> +La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut `min`. -<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> +### {{htmlattrdef("min")}} -<p>La date minimale qui peut être saisie dans le contrôle. Toute date saisie antérieure à celle-ci ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>min</code> n'est pas une chaîne de caractères qui suit le format <code>yyyy-MM-dd</code>, il n'y aura pas de valeur minimale.</p> +La date minimale qui peut être saisie dans le contrôle. Toute date saisie antérieure à celle-ci ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `min` n'est pas une chaîne de caractères qui suit le format `yyyy-MM-dd`, il n'y aura pas de valeur minimale. -<p>La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> +La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut `max`. -<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> +### {{htmlattrdef("step")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> +{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} -<p>Pour les champs <code>date</code>, la valeur de <code>step</code> est exprimée en jours avec un facteur de multiplication de 86 400 000 (soit le nombre de millisecondes en une journée). La valeur par défaut de <code>step</code> est 1.</p> +Pour les champs `date`, la valeur de `step` est exprimée en jours avec un facteur de multiplication de 86 400 000 (soit le nombre de millisecondes en une journée). La valeur par défaut de `step` est 1. -<div class="blockIndicator note"> -<p><strong>Note :</strong> Utiliser <code>any</code> comme valeur pour <code>step</code> produira le même effet que la valeur <code>1</code> pour les champs <code>date</code>.</p> -</div> +> **Note :** Utiliser `any` comme valeur pour `step` produira le même effet que la valeur `1` pour les champs `date`. -<h2 id="Utilisation_des_contrôles_de_saisie_des_dates">Utilisation des contrôles de saisie des dates</h2> +## Utilisation des contrôles de saisie des dates -<p>Les champs date paraissent pratiques de prime abord : ils fournissent une interface utilisateur simple qui permet de sélectionner des dates et normalisent le format des données envoyées au serveur quelle que soit la locale de l'utilisateur. Toutefois, il existe certains problèmes avec <code><input type="date"></code> en raison de la prise en charge limitée des navigateurs.</p> +Les champs date paraissent pratiques de prime abord : ils fournissent une interface utilisateur simple qui permet de sélectionner des dates et normalisent le format des données envoyées au serveur quelle que soit la locale de l'utilisateur. Toutefois, il existe certains problèmes avec `<input type="date">` en raison de la prise en charge limitée des navigateurs. -<p>Dans les exemples qui suivent, nous verrons comment utiliser <code><input type="date"></code> dans des cas simples et complexes en ajoutant des conseils quant à la prise en charge des navigateurs (en espérant que celle-ci s'améliore au fur et à mesure).</p> +Dans les exemples qui suivent, nous verrons comment utiliser `<input type="date">` dans des cas simples et complexes en ajoutant des conseils quant à la prise en charge des navigateurs (en espérant que celle-ci s'améliore au fur et à mesure). -<h3 id="Utilisation_simple">Utilisation simple</h3> +### Utilisation simple -<p>Dans son expression la plus simple <code><input type="date"></code> s'utilise avec un élément <code><input></code> et un élément {{htmlelement("label")}} :</p> +Dans son expression la plus simple `<input type="date">` s'utilise avec un élément `<input>` et un élément {{htmlelement("label")}} : -<pre class="brush: html"><form> - <div> - <label for="bday">Veuillez saisir votre date de naissance :</label> - <input type="date" id="bday" name="bday"> - </div> -</form></pre> +```html +<form> + <div> + <label for="bday">Veuillez saisir votre date de naissance :</label> + <input type="date" id="bday" name="bday"> + </div> +</form> +``` -<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p> +{{EmbedLiveSample('Utilisation_simple', 600, 40)}} -<h3 id="Paramétrer_une_date_maximale_et_une_date_minimale">Paramétrer une date maximale et une date minimale</h3> +### Paramétrer une date maximale et une date minimale -<p>On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates qui peuvent être saisies par l'utilisateur. Dans l'exemple suivant, on indique un date minimum au premier avril 2017 (<code>2017-04-01</code>) et une date maximale au 30 avril 2017 (<code>2017-04-30</code>) :</p> +On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates qui peuvent être saisies par l'utilisateur. Dans l'exemple suivant, on indique un date minimum au premier avril 2017 (`2017-04-01`) et une date maximale au 30 avril 2017 (`2017-04-30`) : -<pre class="brush: html"><form> - <div> - <label for="party">Veuillez choisir la meilleure date pour la soirée :</label> - <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> - </div> -</form></pre> +```html +<form> + <div> + <label for="party">Veuillez choisir la meilleure date pour la soirée :</label> + <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> + </div> +</form> +``` -<p>{{EmbedLiveSample('Paramétrer_une_date_maximale_et_une_date_minimale', 600, 40)}}</p> +{{EmbedLiveSample('Paramétrer_une_date_maximale_et_une_date_minimale', 600, 40)}} -<p>On ne peut donc ici que sélectionner une date en avril 2017. Seule la partie du contrôle consacrée aux jours sera éditable et on ne pourra pas sélectionner d'autres mois ou années..</p> +On ne peut donc ici que sélectionner une date en avril 2017. Seule la partie du contrôle consacrée aux jours sera éditable et on ne pourra pas sélectionner d'autres mois ou années.. -<div class="note"> -<p><strong>Note :</strong> On devrait également pouvoir utiliser l'attribut {{htmlattrxref("step", "input")}} afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes.</p> -</div> +> **Note :** On devrait également pouvoir utiliser l'attribut {{htmlattrxref("step", "input")}} afin de faire varier le nombre de jours pour l'incrément de la date (par exemple afin de ne pouvoir sélectionner que les samedis). Cependant, cette fonctionnalité ne semble être présente dans aucune implémentation au moment où nous écrivons ces lignes. -<h3 id="Contrôler_la_taille_du_champ_de_saisie">Contrôler la taille du champ de saisie</h3> +### Contrôler la taille du champ de saisie -<p><code><input type="date"></code> ne permet pas d'utiliser des attributs de dimensionnement tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> pour adresser ces aspects de mise en forme.</p> +`<input type="date">` ne permet pas d'utiliser des attributs de dimensionnement tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) pour adresser ces aspects de mise en forme. -<h2 id="Validation">Validation</h2> +## Validation -<p>Par défaut <code><input type="date"></code> n'applique pas de validation particulière aux valeurs saisies. Les interfaces utilisateur ne permettent généralement pas de saisir une valeur qui n'est pas une date ou qui est une date invalide (par exemple un 32 avril 2017).</p> +Par défaut `<input type="date">` n'applique pas de validation particulière aux valeurs saisies. Les interfaces utilisateur ne permettent généralement pas de saisir une valeur qui n'est pas une date ou qui est une date invalide (par exemple un 32 avril 2017). -<p>Si on utilise les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates possibles, les navigateurs qui prennent en charge cette fonctionnalité afficheront une erreur si la valeur saisie est en dehors de cet intervalle.</p> +Si on utilise les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre les dates possibles, les navigateurs qui prennent en charge cette fonctionnalité afficheront une erreur si la valeur saisie est en dehors de cet intervalle. -<p>De plus, si l'attribut {{htmlattrxref("required", "input")}} est actif, il sera obligatoire de saisir ce champ. Une erreur sera affichée si on essaie d'envoyer le formulaire avec un tel champ vide.</p> +De plus, si l'attribut {{htmlattrxref("required", "input")}} est actif, il sera obligatoire de saisir ce champ. Une erreur sera affichée si on essaie d'envoyer le formulaire avec un tel champ vide. -<p>Prenons un exemple où la date est contrainte entre deux dates et que le champ est obligatoire :</p> +Prenons un exemple où la date est contrainte entre deux dates et que le champ est obligatoire : -<pre class="brush: html"><form> - <div> - <label for="party">Sélectionner la meilleure date (entre le premier et le 20 avril) :</label> - <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required> - <span class="validity"></span> - </div> - <div> - <input type="submit"> - </div> -</form></pre> +```html +<form> + <div> + <label for="party">Sélectionner la meilleure date (entre le premier et le 20 avril) :</label> + <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form> +``` -<p>Si on essaie de soumettre le formulaire avec une date incomplète (ou en dehors de l'intervalle indiqué), le message affichera une erreur. Vous pouvez essayer ici :</p> +Si on essaie de soumettre le formulaire avec une date incomplète (ou en dehors de l'intervalle indiqué), le message affichera une erreur. Vous pouvez essayer ici : -<p>{{EmbedLiveSample('Validation', 600, 100)}}</p> +{{EmbedLiveSample('Validation', 600, 100)}} -<p>Voici la feuille de style utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme un indicateur selon que la valeur est valide ou non. On place cet indicateur dans un élément {{htmlelement("span")}} séparé car pour Chrome, le contenu généré dans les pseudo-classes est intégré dans le contrôle du formulaire et ne peut être mis en forme ou affiché correctement.</p> +Voici la feuille de style utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme un indicateur selon que la valeur est valide ou non. On place cet indicateur dans un élément {{htmlelement("span")}} séparé car pour Chrome, le contenu généré dans les pseudo-classes est intégré dans le contrôle du formulaire et ne peut être mis en forme ou affiché correctement. -<pre class="brush: css">div { +```css +div { margin-bottom: 10px; display: flex; align-items: center; @@ -175,46 +165,46 @@ input:invalid+span:after { input:valid+span:after { content: '✓'; padding-left: 5px; -}</pre> +} +``` -<div class="warning"> -<p><strong>Attention :</strong> La validation des valeurs du formulaire HTML par le client ne remplace pas la validation côté serveur afin de vérifier que le format est bien celui attendu. Il est tout à fait possible de modifier le code HTML afin d'outrepasser ces mécanismes de validation ou d'envoyer directement des données au serveur. Il est donc nécessaire de valider les données lorsque celles-ci parviennent au serveur afin d'éviter les effets indésirables entraînés par l'injection de données mal formatées ou malveillantes.</p> -</div> +> **Attention :** La validation des valeurs du formulaire HTML par le client ne remplace pas la validation côté serveur afin de vérifier que le format est bien celui attendu. Il est tout à fait possible de modifier le code HTML afin d'outrepasser ces mécanismes de validation ou d'envoyer directement des données au serveur. Il est donc nécessaire de valider les données lorsque celles-ci parviennent au serveur afin d'éviter les effets indésirables entraînés par l'injection de données mal formatées ou malveillantes. -<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> +## Gérer la prise en charge des navigateurs -<p>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est l'hétérogénéité de la prise en charge par les différents navigateurs.</p> +Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est l'hétérogénéité de la prise en charge par les différents navigateurs. -<p>Les navigateurs qui ne prennent pas en charge ces contrôles utiliseront à la place des champs texte. Toutefois, cette solution de contournement entraîne deux problèmes : le premier concerne l'homogénéité de l'interface utilisateur (le contrôle affiché ne sera pas le même) et le second concerne la gestion des données.</p> +Les navigateurs qui ne prennent pas en charge ces contrôles utiliseront à la place des champs texte. Toutefois, cette solution de contournement entraîne deux problèmes : le premier concerne l'homogénéité de l'interface utilisateur (le contrôle affiché ne sera pas le même) et le second concerne la gestion des données. -<p>C'est sur ce second point qu'il y a le plus de risques. Comme nous l'avons mentionné avant, un champ date est toujours normalisé sous la forme <code>yyyy-mm-dd</code> (les chiffres de l'année, un tiret, les chiffres du mois, un tiret, les chiffres du jour). Toutefois, pour un champ texte, les navigateurs ne reconnaissant pas le format dans lequel la date doit être écrite. Or, selon les langues, régions, pays, les personnes écrivent les dates de différentes façons. On pourrait ainsi avoir des dates écrites comme :</p> +C'est sur ce second point qu'il y a le plus de risques. Comme nous l'avons mentionné avant, un champ date est toujours normalisé sous la forme `yyyy-mm-dd` (les chiffres de l'année, un tiret, les chiffres du mois, un tiret, les chiffres du jour). Toutefois, pour un champ texte, les navigateurs ne reconnaissant pas le format dans lequel la date doit être écrite. Or, selon les langues, régions, pays, les personnes écrivent les dates de différentes façons. On pourrait ainsi avoir des dates écrites comme : -<ul> - <li><code>ddmmyyyy</code></li> - <li><code>dd/mm/yyyy</code></li> - <li><code>mm/dd/yyyy</code></li> - <li><code>dd-mm-yyyy</code></li> - <li><code>mm-dd-yyyy</code></li> -</ul> +- `ddmmyyyy` +- `dd/mm/yyyy` +- `mm/dd/yyyy` +- `dd-mm-yyyy` +- `mm-dd-yyyy` -<p>Une méthode permettant de parer à cette éventualité est d'utiliser l'attribut {{htmlattrxref("pattern", "input")}}. Bien que celui-ci ne soit pas utilisé pour les contrôles de saisie des dates, il peut être utilisé pour le champ texte. Voici un exemple que vous pouvez consulter dans un navigateur qui ne prend pas en charge cette fonctionnalité :</p> +Une méthode permettant de parer à cette éventualité est d'utiliser l'attribut {{htmlattrxref("pattern", "input")}}. Bien que celui-ci ne soit pas utilisé pour les contrôles de saisie des dates, il peut être utilisé pour le champ texte. Voici un exemple que vous pouvez consulter dans un navigateur qui ne prend pas en charge cette fonctionnalité : -<pre class="brush: html"><form> - <div> - <label for="bday">Veuillez saisir votre date de naissance :</label> - <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> - <span class="validity"></span> - </div> - <div> - <input type="submit"> - </div> -</form></pre> +```html +<form> + <div> + <label for="bday">Veuillez saisir votre date de naissance :</label> + <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form> +``` -<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p> +{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}} -<p>Si vous tentez d'envoyer ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en évidence la valeur invalide si la valeur saisie ne correspond pas au motif <code>nnnn-nn-nn</code> (avec <code>n</code> un chiffre entre 0 et 9). Bien entendu, cela n'empêche pas de saisir des dates invalides ou mal formatées (par exemple avec le motif <code>yyyy-dd-mm</code> alors qu'on souhaiterait avoir <code>yyyy-mm-dd</code>). Il reste donc un problème.</p> +Si vous tentez d'envoyer ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en évidence la valeur invalide si la valeur saisie ne correspond pas au motif `nnnn-nn-nn` (avec `n` un chiffre entre 0 et 9). Bien entendu, cela n'empêche pas de saisir des dates invalides ou mal formatées (par exemple avec le motif `yyyy-dd-mm` alors qu'on souhaiterait avoir `yyyy-mm-dd`). Il reste donc un problème. -<pre class="brush: css hidden">div { +```css hidden +div { margin-bottom: 10px; } @@ -236,59 +226,63 @@ input:valid + span:after { content: '✓'; position: absolute; right: -18px; -}</pre> - -<p>C'est pour cela que la meilleure solution consiste à avoir trois champs de saisie distincts à destination de l'utilisateur : un pour saisir les jours, le deuxième pour les mois et un troisième pour l'année (chacun avec un élément ({{htmlelement("select")}}). On peut également opter pour l'utilisation d'un bibliothèque JavaScript telle que <a href="https://jqueryui.com/datepicker/">le sélecteur de date jQuery (jQuery date picker)</a>.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif <code><input type="date"></code> et un second qui utilise trois éléments {{htmlelement("select")}} qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif.</p> - -<p>{{EmbedLiveSample('Exemples', 600, 100)}}</p> - -<p>Voici le code HTML utilisé :</p> - -<pre class="brush: html"><form> - <div class="nativeDatePicker"> - <label for="bday">Veuillez saisir votre date de naissance :</label> - <input type="date" id="bday" name="bday"> - <span class="validity"></span> - </div> - <p class="fallbackLabel">Veuillez saisir votre date de naissance :</p> - <div class="fallbackDatePicker"> - <span> - <label for="day">Jour :</label> - <select id="day" name="day"> - </select> - </span> - <span> - <label for="month">Mois :</label> - <select id="month" name="month"> - <option selected>Janvier</option> - <option>Février</option> - <option>Mars</option> - <option>Avril</option> - <option>Mai</option> - <option>Juin</option> - <option>Juillet</option> - <option>Août</option> - <option>Septembre</option> - <option>Octobre</option> - <option>Novembre</option> - <option>Décembre</option> - </select> - </span> - <span> - <label for="year">Année :</label> - <select id="year" name="year"> - </select> - </span> - </div> -</form></pre> - -<p>Les mois sont écrits « en dur » (ce sont toujours les mêmes) alors que les valeurs pour les jours et les années sont générées dynamiquement en fonction du mois et de l'année sélectionnées (voir les commentaires ci-après qui expliquent le détail des fonctions).</p> - -<pre class="brush: css hidden">input:invalid+span:after { +} +``` + +C'est pour cela que la meilleure solution consiste à avoir trois champs de saisie distincts à destination de l'utilisateur : un pour saisir les jours, le deuxième pour les mois et un troisième pour l'année (chacun avec un élément ({{htmlelement("select")}}). On peut également opter pour l'utilisation d'un bibliothèque JavaScript telle que [le sélecteur de date jQuery (jQuery date picker)](https://jqueryui.com/datepicker/). + +## Exemples + +Dans l'exemple qui suit, on crée deux éléments d'interface utilisateur afin de choisir une date : le premier qui utilise un sélecteur natif `<input type="date">` et un second qui utilise trois éléments {{htmlelement("select")}} qui permettra de choisir une date pour les anciens navigateurs qui ne prendraient pas en charge le contrôle natif. + +{{EmbedLiveSample('Exemples', 600, 100)}} + +Voici le code HTML utilisé : + +```html +<form> + <div class="nativeDatePicker"> + <label for="bday">Veuillez saisir votre date de naissance :</label> + <input type="date" id="bday" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Veuillez saisir votre date de naissance :</p> + <div class="fallbackDatePicker"> + <span> + <label for="day">Jour :</label> + <select id="day" name="day"> + </select> + </span> + <span> + <label for="month">Mois :</label> + <select id="month" name="month"> + <option selected>Janvier</option> + <option>Février</option> + <option>Mars</option> + <option>Avril</option> + <option>Mai</option> + <option>Juin</option> + <option>Juillet</option> + <option>Août</option> + <option>Septembre</option> + <option>Octobre</option> + <option>Novembre</option> + <option>Décembre</option> + </select> + </span> + <span> + <label for="year">Année :</label> + <select id="year" name="year"> + </select> + </span> + </div> +</form> +``` + +Les mois sont écrits « en dur » (ce sont toujours les mêmes) alors que les valeurs pour les jours et les années sont générées dynamiquement en fonction du mois et de l'année sélectionnées (voir les commentaires ci-après qui expliquent le détail des fonctions). + +```css hidden +input:invalid+span:after { content: '✖'; padding-left: 5px; } @@ -296,11 +290,13 @@ input:valid + span:after { input:valid+span:after { content: '✓'; padding-left: 5px; -}</pre> +} +``` -<p>Une autre partie intéressante est celle où on détecte si le navigateur prend charge la fonctionnalité native <code><input type="date"></code>. Pour cela, on crée un nouvelle élément {{htmlelement("input")}} et on change son type en <code>date</code> puis ensuite, on vérifie immédiatement la valeur de son type : pour les navigateurs qui ne prennent pas en charge l'élément natif, ils renverront la valeur <code>text</code> car l'élément natif aura été « converti ». Dans ce cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui qui contient les éléments {{htmlelement("select")}}).</p> +Une autre partie intéressante est celle où on détecte si le navigateur prend charge la fonctionnalité native `<input type="date">`. Pour cela, on crée un nouvelle élément {{htmlelement("input")}} et on change son type en `date` puis ensuite, on vérifie immédiatement la valeur de son type : pour les navigateurs qui ne prennent pas en charge l'élément natif, ils renverront la valeur `text` car l'élément natif aura été « converti ». Dans ce cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui qui contient les éléments {{htmlelement("select")}}). -<pre class="brush: js">// On définit les différentes variables +```js +// On définit les différentes variables var nativePicker = document.querySelector('.nativeDatePicker'); var fallbackPicker = document.querySelector('.fallbackDatePicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); @@ -313,15 +309,15 @@ var daySelect = document.querySelector('#day'); fallbackPicker.style.display = 'none'; fallbackLabel.style.display = 'none'; -// On teste si l'élément <input type="date"> -// se transforme en <input type="text"> +// On teste si l'élément <input type="date"> +// se transforme en <input type="text"> var test = document.createElement('input'); test.type = 'date'; // Si c'est le cas, cela signifie que l'élément // n'est pas pris en charge et if(test.type === 'text') { // On masque le sélecteur natif et on affiche - // le sélecteur avec les <select> + // le sélecteur avec les <select> nativePicker.style.display = 'none'; fallbackPicker.style.display = 'block'; fallbackLabel.style.display = 'block'; @@ -333,8 +329,8 @@ if(test.type === 'text') { } function populateDays(month) { - // On supprime les éléments <option> pour l'élément - // <select> des jours afin de pouvoir ajouter les prochains + // On supprime les éléments <option> pour l'élément + // <select> des jours afin de pouvoir ajouter les prochains while(daySelect.firstChild){ daySelect.removeChild(daySelect.firstChild); } @@ -356,9 +352,9 @@ function populateDays(month) { } // on ajoute le bon nombre de jours dans autant - // d'éléments <option> pour l'élément <select> + // d'éléments <option> pour l'élément <select> // pour la journée - for(i = 1; i <= dayNum; i++) { + for(i = 1; i <= dayNum; i++) { var option = document.createElement('option'); option.textContent = i; daySelect.appendChild(option); @@ -393,9 +389,9 @@ function populateYears() { var year = date.getFullYear(); // On affiche l'année courante et les 100 années - // précédentes pour l'élément <select> destiné à + // précédentes pour l'élément <select> destiné à // stocker l'année - for(var i = 0; i <= 100; i++) { + for(var i = 0; i <= 100; i++) { var option = document.createElement('option'); option.textContent = year-i; yearSelect.appendChild(option); @@ -420,71 +416,66 @@ var previousDay; // est utilisée cette valeur) daySelect.onchange = function() { previousDay = daySelect.value; -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p> -</div> +> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. -<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 une date ou qui est vide.</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("change")}} et {{event("input")}}</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères ({{domxref("DOMString")}}) qui + représente une date ou qui est vide. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{event("input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + {{htmlattrxref("autocomplete", "input")}}, + {{htmlattrxref("list", "input")}}, + {{htmlattrxref("readonly", "input")}} et + {{htmlattrxref("step", "input")}} + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td> + <code>list</code>, <code>value</code>, <code>valueAsDate</code>, + <code>valueAsNumber</code>. + </td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}}, + {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, + {{domxref("HTMLInputElement.stepUp", "stepUp()")}} + </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#date-state-(type=date)', '<input type="date">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-date")}}</p> +{{Compat("html.elements.input.input-date")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément générique {{HTMLElement("input")}} et l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}</li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#date">Un tutoriel sur les sélecteurs de date et d'heure</a></li> - <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> -</ul> +- L'élément générique {{HTMLElement("input")}} et l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}} +- [Un tutoriel sur les sélecteurs de date et d'heure](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#date) +- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML) diff --git a/files/fr/web/html/element/input/datetime-local/index.md b/files/fr/web/html/element/input/datetime-local/index.md index 23f0f7da9a..b5fc4e9260 100644 --- a/files/fr/web/html/element/input/datetime-local/index.md +++ b/files/fr/web/html/element/input/datetime-local/index.md @@ -10,189 +10,178 @@ tags: - Reference translation_of: Web/HTML/Element/input/datetime-local --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"datetime-local"</code></strong> permettent de créer des champs destinés à saisir simplement une date (définie par une année, un mois, et un jour) et une heure (définie par une heure et une minute). Il n'y a pas de secondes dans ce contrôle.</p> +Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`"datetime-local"`** permettent de créer des champs destinés à saisir simplement une date (définie par une année, un mois, et un jour) et une heure (définie par une heure et une minute). Il n'y a pas de secondes dans ce contrôle. -<div>{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}</div> +{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}} -<p>L'interface utilisateur du contrôle varie selon les navigateurs. La prise en charge de cette fonctionnalité est hétérogène : Chrome/Opera et Edge l'implémentent pour les navigateurs de bureau et la plupart des navigateurs mobiles l'implémentent. Pour les navigateurs qui n'implémentent pas cette fonctionnalité, le contrôle utilisé est celui de <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> +L'interface utilisateur du contrôle varie selon les navigateurs. La prise en charge de cette fonctionnalité est hétérogène : Chrome/Opera et Edge l'implémentent pour les navigateurs de bureau et la plupart des navigateurs mobiles l'implémentent. Pour les navigateurs qui n'implémentent pas cette fonctionnalité, le contrôle utilisé est celui de [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text). -<p>Les secondes ne sont pas prises en charge.</p> +Les secondes ne sont pas prises en charge. -<p>Le contrôle est spécifié afin de pouvoir représenter une heure et une date locales et <em>pas nécessairement la date et l'heure locale de l'utilisateur</em>. Autrement dit, une implémentation devrait autoriser toute combinaison valide (d'année / mois / jour / heure / minutes) même si cette combinaison n'est pas valide pour le fuseau horaire de l'utilisateur (par exemple pour les fuseaux horaires qui ne gèrent pas les heures d'été). Certains navigateurs mobiles (sur iOS par exemple) n'implémentent pas cette règle correctement.</p> +Le contrôle est spécifié afin de pouvoir représenter une heure et une date locales et _pas nécessairement la date et l'heure locale de l'utilisateur_. Autrement dit, une implémentation devrait autoriser toute combinaison valide (d'année / mois / jour / heure / minutes) même si cette combinaison n'est pas valide pour le fuseau horaire de l'utilisateur (par exemple pour les fuseaux horaires qui ne gèrent pas les heures d'été). Certains navigateurs mobiles (sur iOS par exemple) n'implémentent pas cette règle correctement. -<p>En raison du faible support pour <code>datetime-local</code> et des variations dans ses implémentations, mieux vaudra peut-être encore (juillet 2019) utiliser un <em>framework</em> ou une bibliothèque pour une telle saisie. Une autre option consiste à séparer les champs pour la date (<code>type="date"</code>) et pour l'heure (<code>type="heure"</code>) qui sont mieux pris en charge.</p> +En raison du faible support pour `datetime-local` et des variations dans ses implémentations, mieux vaudra peut-être encore (juillet 2019) utiliser un _framework_ ou une bibliothèque pour une telle saisie. Une autre option consiste à séparer les champs pour la date (`type="date"`) et pour l'heure (`type="heure"`) qui sont mieux pris en charge. -<p>Certains navigateurs pourront utiliser un contrôle avec un texte simple et vérifier que la valeur date/heure est correcte avant de l'envoyer au serveur. Toutefois, ce contrôle ayant lieu côté client, vous devrez nécessairement vérifier le bon format de la donnée côté serveur.</p> +Certains navigateurs pourront utiliser un contrôle avec un texte simple et vérifier que la valeur date/heure est correcte avant de l'envoyer au serveur. Toutefois, ce contrôle ayant lieu côté client, vous devrez nécessairement vérifier le bon format de la donnée côté serveur. -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la date saisie dans le contrôle. Le format utilisable est décrit dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales">cette section de l'article sur les formats</a>. Il est possible d'indiquer une date par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :</p> +Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la date saisie dans le contrôle. Le format utilisable est décrit dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_locales). Il est possible d'indiquer une date par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} : -<pre class="brush: html"><label for="party">Veuillez saisir une date et une heure pour la fête :</label> -<input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"></pre> +```html +<label for="party">Veuillez saisir une date et une heure pour la fête :</label> +<input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"> +``` -<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> +{{EmbedLiveSample('Valeur', 600, 60)}} -<p>On notera ici que le format de la date affichée n'est pas celui utilisé pour écrire la valeur de l'attribut <code>value</code>. Le format d'affichage de la date sera choisi en fonction de la locale du système d'exploitation de l'utilisateur. En revanche, l'attribut <code>value</code> sera toujours formaté de la façon suivante : <code>yyyy-MM-ddThh:mm</code>. Lorsque la valeur est envoyée au serveur, elle aura donc ce format : <code>partydate=2017-06-01T08:30</code>.</p> +On notera ici que le format de la date affichée n'est pas celui utilisé pour écrire la valeur de l'attribut `value`. Le format d'affichage de la date sera choisi en fonction de la locale du système d'exploitation de l'utilisateur. En revanche, l'attribut `value` sera toujours formaté de la façon suivante : `yyyy-MM-ddThh:mm`. Lorsque la valeur est envoyée au serveur, elle aura donc ce format : `partydate=2017-06-01T08:30`. -<div class="note"> -<p><strong>Note :</strong> Attention si les données sont envoyées avec la méthode HTTP <code><a href="/fr/docs/HTTP/Méthode/GET">GET</a></code>, les deux points (:) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra <code>partydate=2017-06-01T08%3A30</code>. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}.</p> -</div> +> **Note :** Attention si les données sont envoyées avec la méthode HTTP [`GET`](/fr/docs/HTTP/Méthode/GET), les deux points (:) devront être échappés pour être intégrés dans les paramètres de l'URL. Avec l'exemple précédent, cela signifie qu'on enverra `partydate=2017-06-01T08%3A30`. Si on souhaite échapper une chaîne de caractères de la même façon en JavaScript, on pourra utiliser {{jsxref("Objets_globaux/encodeURI", "encodeURI()")}}. -<p>En JavaScript, Il est également possible de définir la valeur de la date utilisée dans le contrôle via la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p> +En JavaScript, Il est également possible de définir la valeur de la date utilisée dans le contrôle via la propriété {{domxref("HTMLInputElement.value")}}. Par exemple : -<pre class="brush: js">var dateControl = document.querySelector('input[type="datetime-local"]'); -date.value = '2017-06-01T08:30';</pre> +```js +var dateControl = document.querySelector('input[type="datetime-local"]'); +date.value = '2017-06-01T08:30'; +``` -<p>Plusieurs méthodes, fournies par JavaScript (cf. {{jsxref("Date")}}), peuvent être utilisée afin de convertir des informations numériques en une telle chaîne de caractères (par exemple la méthode {{jsxref("Date.toISOString()")}}).</p> +Plusieurs méthodes, fournies par JavaScript (cf. {{jsxref("Date")}}), peuvent être utilisée afin de convertir des informations numériques en une telle chaîne de caractères (par exemple la méthode {{jsxref("Date.toISOString()")}}). -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> +## Attributs supplémentaires -<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"date"</code> gèrent les attributs suivants :</p> +En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"date"` gèrent les attributs suivants : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("max")}}</code></td> - <td>La date la plus avancée qui peut être saisie.</td> - </tr> - <tr> - <td><code>{{anch("min")}}</code></td> - <td>La date la plus reculée qui peut être saisie.</td> - </tr> - <tr> - <td><code>{{anch("step")}}</code></td> - <td>Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation.</td> - </tr> - </tbody> -</table> +| Attribut | Description | +| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("max")}}` | La date la plus avancée qui peut être saisie. | +| `{{anch("min")}}` | La date la plus reculée qui peut être saisie. | +| `{{anch("step")}}` | Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation. | -<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> +### {{htmlattrdef("max")}} -<p>La date/heure la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>max</code> n'est pas une chaîne de caractères qui suit le format <code>"yyyy-MM-ddThh:mm"</code>, il n'y aura pas de valeur maximale.</p> +La date/heure la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `max` n'est pas une chaîne de caractères qui suit le format `"yyyy-MM-ddThh:mm"`, il n'y aura pas de valeur maximale. -<p>La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> +La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut `min`. -<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> +### {{htmlattrdef("min")}} -<p>La date/heure minimale qui peut être saisie dans le contrôle. Toute date/heure saisie antérieure à celle-ci ne respectera pas <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">les contraintes de validation</a>. Si la valeur de l'attribut <code>min</code> n'est pas une chaîne de caractères qui suit le format <code>"yyyy-MM-ddThh:mm"</code>, il n'y aura pas de valeur minimale.</p> +La date/heure minimale qui peut être saisie dans le contrôle. Toute date/heure saisie antérieure à celle-ci ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `min` n'est pas une chaîne de caractères qui suit le format `"yyyy-MM-ddThh:mm"`, il n'y aura pas de valeur minimale. -<p>La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> +La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut `max`. -<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> +### {{htmlattrdef("step")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> +{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} -<p>Pour les champs <code>datetime-local</code>, la valeur de l'attribut <code>step</code> est exprimée en secondes avec un facteur d'amplification de 1000 (pour passer des millisecondes aux secondes). La valeur par défaut de <code>step</code> est 60 (soit 1 minute ou 60 000 millisecondes).</p> +Pour les champs `datetime-local`, la valeur de l'attribut `step` est exprimée en secondes avec un facteur d'amplification de 1000 (pour passer des millisecondes aux secondes). La valeur par défaut de `step` est 60 (soit 1 minute ou 60 000 millisecondes). -<p><em>À l'heure où ces lignes sont écrites, la signification de la valeur <code>any</code> pour l'attribut <code>step</code> pour les champs <code>datetime-local</code> n'est pas certaine. Cette information sera mise à jour dès que possible.</em></p> +_À l'heure où ces lignes sont écrites, la signification de la valeur `any` pour l'attribut `step` pour les champs `datetime-local` n'est pas certaine. Cette information sera mise à jour dès que possible._ -<h2 id="Utiliser_les_contrôles_datetime-local">Utiliser les contrôles <code>datetime-local</code></h2> +## Utiliser les contrôles `datetime-local` -<p>Ces contrôles sont pratiques : ils permettent d'utiliser une interface simple pour sélectionner une date et une heure et en plus, ils normalisent la valeur saisie avant de l'envoyer au sereveur, quelle que soit la locale de l'utilisateur. Toutefois, il existe actuellement des problèmes liés à la prise en charge partielle de <code><input type="datetime-local"></code> dans les différents navigateurs.</p> +Ces contrôles sont pratiques : ils permettent d'utiliser une interface simple pour sélectionner une date et une heure et en plus, ils normalisent la valeur saisie avant de l'envoyer au sereveur, quelle que soit la locale de l'utilisateur. Toutefois, il existe actuellement des problèmes liés à la prise en charge partielle de `<input type="datetime-local">` dans les différents navigateurs. -<p>Dans les exemples suivants, nous verrons certains cas d'utilisation plus complexes puis nous traiterons de l'adaptation nécessaire en fonction de la prise en charge des navigateurs.</p> +Dans les exemples suivants, nous verrons certains cas d'utilisation plus complexes puis nous traiterons de l'adaptation nécessaire en fonction de la prise en charge des navigateurs. -<h3 id="Utilisation_simple_de_datetime-local">Utilisation simple de <code>datetime-local</code></h3> +### Utilisation simple de `datetime-local` -<p>Dans sa forme la plus simple, <code><input type="datetime-local"></code> peut s'utilisere avec un élément <code><input></code> et un élément {{htmlelement("label")}} comme ceci :</p> +Dans sa forme la plus simple, `<input type="datetime-local">` peut s'utilisere avec un élément `<input>` et un élément {{htmlelement("label")}} comme ceci : -<pre class="brush: html"><form> - <label for="party">Veuillez choisir une date et une heure pour la fête :</label> - <input id="party" type="datetime-local" name="partydate"> -</form></pre> +```html +<form> + <label for="party">Veuillez choisir une date et une heure pour la fête :</label> + <input id="party" type="datetime-local" name="partydate"> +</form> +``` -<p>{{EmbedLiveSample('Utilisation_simple_de_datetime-local', 600, 40)}}</p> +{{EmbedLiveSample('Utilisation_simple_de_datetime-local', 600, 40)}} -<h3 id="Paramétrer_des_dates_et_heures_minimalesmaximales">Paramétrer des dates et heures minimales/maximales</h3> +### Paramétrer des dates et heures minimales/maximales -<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre la fenêtre de dates qu'il est possible de choisir. Dans l'exemple qui suit, on indique une date/heure minimale au <code>2017-06-01T08:30</code> et une date maximale au <code>2017-06-30T16:30</code>:</p> +Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre la fenêtre de dates qu'il est possible de choisir. Dans l'exemple qui suit, on indique une date/heure minimale au `2017-06-01T08:30` et une date maximale au `2017-06-30T16:30`: -<pre class="brush: html"> <form> - <label for="party">Veuillez choisir une date et une heure pour la fête :</label> - <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"> - </form></pre> +```html + <form> + <label for="party">Veuillez choisir une date et une heure pour la fête :</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"> + </form> +``` -<p>{{EmbedLiveSample('Paramétrer_des_dates_et_heures_minimales/maximales', 600, 40)}}</p> +{{EmbedLiveSample('Paramétrer_des_dates_et_heures_minimales/maximales', 600, 40)}} -<p>Par conséquent :</p> +Par conséquent : -<ul> - <li>Seuls les jours de juin 2017 peuvent être sélectionnés et seules les heures entre 08h30 et 16h30 pourront être sélectionnées..</li> - <li>Selon le navigateur utilisé, il est possible ou non de sélectionner des heures invalides (cf. {{anch("Validation")}}).</li> -</ul> +- Seuls les jours de juin 2017 peuvent être sélectionnés et seules les heures entre 08h30 et 16h30 pourront être sélectionnées.. +- Selon le navigateur utilisé, il est possible ou non de sélectionner des heures invalides (cf. {{anch("Validation")}}). -<div class="note"> -<p><strong>Note :</strong> L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité.</p> -</div> +> **Note :** L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin de faire varier l'incrément, en jours, pour sélectionner la date (par exemple afin de ne pouvoir sélectionner que les samedi). En revanche, à l'heure où nous rédigeons cet article, aucune implémentation ne semble proposer cette fonctionnalité. -<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> +### Contrôler la taille du champ -<p><code><input type="datetime-local"></code> ne prend pas en charge des attributs tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> pour les problèmes relatifs au dimensionnement.</p> +`<input type="datetime-local">` ne prend pas en charge des attributs tels que {{htmlattrxref("size", "input")}}. Il est nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) pour les problèmes relatifs au dimensionnement. -<h3 id="Paramétrer_le_fuseau_horaire">Paramétrer le fuseau horaire</h3> +### Paramétrer le fuseau horaire -<p>Les champs <code>datetime-local</code> ne permettent pas d'indiquer le fuseau horaire de la date/heure utilisée. Cette caractéristique était disponible pour les champs de type <code><a href="/fr/docs/Web/HTML/Element/input/datetime">datetime</a></code> qui est désormais obsolète (retiré de la spécification). Ce type de champ a été retiré en raison d'un manque d'implémentation de la part des navigateurs et des problèmes relatifs à l'ergonomie. Il est plus simple d'avoir un contrôle séparé pour indiquer le fuseau horaire.</p> +Les champs `datetime-local` ne permettent pas d'indiquer le fuseau horaire de la date/heure utilisée. Cette caractéristique était disponible pour les champs de type [`datetime`](/fr/docs/Web/HTML/Element/input/datetime) qui est désormais obsolète (retiré de la spécification). Ce type de champ a été retiré en raison d'un manque d'implémentation de la part des navigateurs et des problèmes relatifs à l'ergonomie. Il est plus simple d'avoir un contrôle séparé pour indiquer le fuseau horaire. -<p>Ainsi, si vous créez un système où l'utilisateur est déjà connecté et que le fuseau horaire est déjà connu, celui-ci peut être fourni via un champ de type <code><a href="/fr/docs/Web/HTML/Element/input/hidden">hidden</a></code>. Par exemple :</p> +Ainsi, si vous créez un système où l'utilisateur est déjà connecté et que le fuseau horaire est déjà connu, celui-ci peut être fourni via un champ de type [`hidden`](/fr/docs/Web/HTML/Element/input/hidden). Par exemple : -<pre class="brush: html"><input type="hidden" id="timezone" name="timezone" value="-08:00"></pre> +```html +<input type="hidden" id="timezone" name="timezone" value="-08:00"> +``` -<p>Sinon, on peut proposer la sélection d'un fuseau horaire grâce à un élément {{htmlelement("select")}} :</p> +Sinon, on peut proposer la sélection d'un fuseau horaire grâce à un élément {{htmlelement("select")}} : -<pre class="brush: html"><select name="timezone_offset" id="timezone-offset" class="span5"> - <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> - <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option> - <option value="-10:00">(GMT -10:00) Hawaii</option> - <option value="-09:50">(GMT -9:30) Taiohae</option> - <option value="-09:00">(GMT -9:00) Alaska</option> - <option value="-08:00">(GMT -8:00) Pacific Time (US &amp; Canada)</option> +```html +<select name="timezone_offset" id="timezone-offset" class="span5"> + <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> + <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option> + <option value="-10:00">(GMT -10:00) Hawaii</option> + <option value="-09:50">(GMT -9:30) Taiohae</option> + <option value="-09:00">(GMT -9:00) Alaska</option> + <option value="-08:00">(GMT -8:00) Pacific Time (US & Canada)</option> ... -</select></pre> - -<p>Dans ces deux situations, le fuseau horaire et la date sont transmis au serveur séparément (c'est côté serveur que le choix de la représentation pour le stockage est effectué).</p> +</select> +``` -<div class="note"> -<p><strong>Note :</strong> Le fragment de code précédent est tiré de <a href="https://gist.github.com/nodesocket/3919205">Tous les fuseaux horaires du monde dans un élément <code><select></code></a>.</p> -</div> +Dans ces deux situations, le fuseau horaire et la date sont transmis au serveur séparément (c'est côté serveur que le choix de la représentation pour le stockage est effectué). -<h2 id="Validation">Validation</h2> +> **Note :** Le fragment de code précédent est tiré de [Tous les fuseaux horaires du monde dans un élément `<select>`](https://gist.github.com/nodesocket/3919205). -<p>Par défaut, <code><input type="datetime-local"></code> n'applique pas de validation aux valeurs saisies. C'est l'interface utilisateur du contrôle qui ne permet pas de saisir autre chose qu'une date et une heure (ce qui est utile) mais il est toujours possible de ne saisir aucune valeur ou de saisir une valeur invalide (le 32 avril par exemple).</p> +## Validation -<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre les dates disponibles et {{htmlattrxref("required", "input")}} rend la date obligatoire. Dans ces cas, les navigateurs afficheront un message d'erreur si on essaie d'envoyer une date en dehors de l'intervalle ou une date vide.</p> +Par défaut, `<input type="datetime-local">` n'applique pas de validation aux valeurs saisies. C'est l'interface utilisateur du contrôle qui ne permet pas de saisir autre chose qu'une date et une heure (ce qui est utile) mais il est toujours possible de ne saisir aucune valeur ou de saisir une valeur invalide (le 32 avril par exemple). -<p>Prenons un exemple avec des dates mini/maxi et le champ obligatoire :</p> +Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de restreindre les dates disponibles et {{htmlattrxref("required", "input")}} rend la date obligatoire. Dans ces cas, les navigateurs afficheront un message d'erreur si on essaie d'envoyer une date en dehors de l'intervalle ou une date vide. -<pre class="brush: html"><form> - <div> - <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> - <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required> - <span class="validity"></span> - </div> - <div> - <input type="submit" value="Réserver !"> - </div> -</form></pre> +Prenons un exemple avec des dates mini/maxi et le champ obligatoire : -<p>Si vous essayez d'envoyer le formulaire avec une date incomplète ou en dehors de l'intervalle indiqué, le navigateur affichera une erreur. Voici le résultat :</p> +```html +<form> + <div> + <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Réserver !"> + </div> +</form> +``` -<p>{{EmbedLiveSample('Validation', 600, 120)}}</p> +Si vous essayez d'envoyer le formulaire avec une date incomplète ou en dehors de l'intervalle indiqué, le navigateur affichera une erreur. Voici le résultat : +{{EmbedLiveSample('Validation', 600, 120)}} -<p>Vous trouverez ensuite la feuille de style CSS utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que sa valeur est valide ou non. Les icônes indicatives sont placées dans un élément {{htmlelement("span")}} séparé car, sous Chrome, le contenu généré automatiquement est placé à l'intériur du contrôle et ne peut pas être affiché/mis en forme efficacement.</p> +Vous trouverez ensuite la feuille de style CSS utilisée pour l'exemple. On utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que sa valeur est valide ou non. Les icônes indicatives sont placées dans un élément {{htmlelement("span")}} séparé car, sous Chrome, le contenu généré automatiquement est placé à l'intériur du contrôle et ne peut pas être affiché/mis en forme efficacement. -<pre class="brush: css">div { +```css +div { margin-bottom: 10px; display: flex; align-items: center; @@ -211,57 +200,56 @@ input:invalid+span:after { input:valid+span:after { content: '✓'; padding-left: 5px; -}</pre> - -<div class="warning"> -<p><strong>Attention :</strong> La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application.</p> -</div> +} +``` -<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> +> **Attention :** La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application. -<p>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge.</p> +## Gérer la prise en charge des navigateurs +Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge. -<p>Les navigateurs qui n'implémentent pas cette fonctionnalité afficheront un contrôle de saisie textuelle. Toutefois, cela entraîne des problème de cohérence d'interface graphique d'une part et de représentation des données d'autre part.</p> +Les navigateurs qui n'implémentent pas cette fonctionnalité afficheront un contrôle de saisie textuelle. Toutefois, cela entraîne des problème de cohérence d'interface graphique d'une part et de représentation des données d'autre part. -<p>C'est ce second problème qui est le plus important. Comme nous l'avons mentionné avant, la valeur d'un contrôle <code>datetime-local</code> est toujours normalisée sous la forme <code>yyyy-mm-ddThh:mm</code>. En revanche, avec un champ texte, le navigateur n'utilise pas de formatage particulier et il existe différentes façon d'écrire des dates et heures selon les langues et les régions. On peut par exemple avoir les formats suivants :</p> +C'est ce second problème qui est le plus important. Comme nous l'avons mentionné avant, la valeur d'un contrôle `datetime-local` est toujours normalisée sous la forme `yyyy-mm-ddThh:mm`. En revanche, avec un champ texte, le navigateur n'utilise pas de formatage particulier et il existe différentes façon d'écrire des dates et heures selon les langues et les régions. On peut par exemple avoir les formats suivants : -<ul> - <li><code>ddmmyyyy</code></li> - <li><code>dd/mm/yyyy</code></li> - <li><code>mm/dd/yyyy</code></li> - <li><code>dd-mm-yyyy</code></li> - <li><code>mm-dd-yyyy</code></li> - <li><code>mm-dd-yyyy hh:mm</code> (heure exprimée sur 12 heures)</li> - <li><code>mm-dd-yyyy HH:mm</code> (heure exprimée sur 24 heures)</li> - <li>etc.</li> -</ul> +- `ddmmyyyy` +- `dd/mm/yyyy` +- `mm/dd/yyyy` +- `dd-mm-yyyy` +- `mm-dd-yyyy` +- `mm-dd-yyyy hh:mm` (heure exprimée sur 12 heures) +- `mm-dd-yyyy HH:mm` (heure exprimée sur 24 heures) +- etc. -<p>Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément <code><input type="</code><code>datetime-local"></code>. Bien que cet élément n'utilise pas cet attribut, s'il est converti en <code><input type="text"></code> par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge <code><input type="datetime-local"></code> :</p> +Une façon de contourner ce problème est de placer un attribut {{htmlattrxref("pattern", "input")}} dans l'élément ` <input type="``datetime-local"> `. Bien que cet élément n'utilise pas cet attribut, s'il est converti en `<input type="text">` par le navigateur, le motif sera alors utilisé. Vous pouvez par exemple essayer le code suivant dans un navigateur qui ne prend pas en charge `<input type="datetime-local">` : -<pre class="brush: html"><form> - <div> - <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> - <input id="party" type="datetime-local" name="partydate" +```html +<form> + <div> + <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> + <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" - pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required> - <span class="validity"></span> - </div> - <div> - <input type="submit" value="Réserver !"> - </div> - <input type="hidden" id="timezone" name="timezone" value="-08:00"> -</form></pre> + pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Réserver !"> + </div> + <input type="hidden" id="timezone" name="timezone" value="-08:00"> +</form> +``` -<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p> +{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}} -<p>Si vous essayer de soumettre ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en avant le champ invalide si la valeur saisie ne respecte pas la forme <code>nnnn-nn-nnTnn:nn</code> avec <code>n</code> qui est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates/heures invalides ou mal formatées.</p> +Si vous essayer de soumettre ce formulaire, vous pourrez voir que le navigateur affiche un message d'erreur et met en avant le champ invalide si la valeur saisie ne respecte pas la forme `nnnn-nn-nnTnn:nn` avec `n` qui est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates/heures invalides ou mal formatées. -<p>De plus, comment l'utilisateur doit-il comprendre la règle de format qui lui est imposée pour saisir une date et une heure ?</p> +De plus, comment l'utilisateur doit-il comprendre la règle de format qui lui est imposée pour saisir une date et une heure ? -<p>Bref, il y a toujours un problème.</p> +Bref, il y a toujours un problème. -<pre class="brush: css hidden">div { +```css hidden +div { margin-bottom: 10px; } @@ -283,73 +271,77 @@ input:valid + span:after { content: '✓'; position: absolute; right: -18px; -}</pre> - -<p>Actuellement, la meilleure façon de gérer les dates/heures d'une façon homogène pour les différents navigateurs est d'utiliser différents contrôles (via des éléments {{htmlelement("select")}}) pour sélectionner l'année, le jour, le mois, la date et l'heure. Il existe également des bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">le sélecteur de date jQuery</a> et <a href="https://timepicker.co/">le sélecteur d'heure jQuery</a>.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Dans cet exemple, on crée deux ensembles d'éléments pour sélectionner une date et une heure : un sélecteur natif <code><input type="datetime-local"></code> d'une part et un ensemble de cinq éléments {{htmlelement("select")}} d'autre part pour les navigateurs qui ne prennent pas en charge le contrôle natif.</p> - -<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p> - -<p>Voici le fragment de code HTML utilisé :</p> - -<pre class="brush: html"><form> - <div class="nativeDateTimePicker"> - <label for="party">Veuillez sélectionner une date et une heure pour la fête :</label> - <input type="datetime-local" id="party" name="bday"> - <span class="validity"></span> - </div> - <p class="fallbackLabel">Veuillez sélectionner une date et une heure pour la fête :</p> - <div class="fallbackDateTimePicker"> - <div> - <span> - <label for="day">Jour :</label> - <select id="day" name="day"> - </select> - </span> - <span> - <label for="month">Mois :</label> - <select id="month" name="month"> - <option selected>Janvier</option> - <option>Février</option> - <option>Mars</option> - <option>Avril</option> - <option>Mai</option> - <option>Juin</option> - <option>Juillet</option> - <option>Août</option> - <option>Septembre</option> - <option>Octobre</option> - <option>Novembre</option> - <option>Décembre</option> - </select> - </span> - <span> - <label for="year">Année :</label> - <select id="year" name="year"> - </select> - </span> - </div> - <div> - <span> - <label for="hour">Heure :</label> - <select id="hour" name="hour"> - </select> - </span> - <span> - <label for="minute">Minute :</label> - <select id="minute" name="minute"> - </select> - </span> - </div> - </div> -</form></pre> - -<p>Les mois disponibles sont codés de façon statique (ce sont toujours les mêmes). En revanche, les valeurs pour les jours et les années sont générées dynamiquement selon le mois et l'année courante (voir les commentaires du script ci-après). Les heures et les minutes sont également générées dynamiquement.</p> - -<pre class="brush: css hidden">div { +} +``` + +Actuellement, la meilleure façon de gérer les dates/heures d'une façon homogène pour les différents navigateurs est d'utiliser différents contrôles (via des éléments {{htmlelement("select")}}) pour sélectionner l'année, le jour, le mois, la date et l'heure. Il existe également des bibliothèques JavaScript telles que [le sélecteur de date jQuery](https://jqueryui.com/datepicker/) et [le sélecteur d'heure jQuery](https://timepicker.co/). + +## Exemples + +Dans cet exemple, on crée deux ensembles d'éléments pour sélectionner une date et une heure : un sélecteur natif `<input type="datetime-local">` d'une part et un ensemble de cinq éléments {{htmlelement("select")}} d'autre part pour les navigateurs qui ne prennent pas en charge le contrôle natif. + +{{EmbedLiveSample('Exemples', 600, 140)}} + +Voici le fragment de code HTML utilisé : + +```html +<form> + <div class="nativeDateTimePicker"> + <label for="party">Veuillez sélectionner une date et une heure pour la fête :</label> + <input type="datetime-local" id="party" name="bday"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Veuillez sélectionner une date et une heure pour la fête :</p> + <div class="fallbackDateTimePicker"> + <div> + <span> + <label for="day">Jour :</label> + <select id="day" name="day"> + </select> + </span> + <span> + <label for="month">Mois :</label> + <select id="month" name="month"> + <option selected>Janvier</option> + <option>Février</option> + <option>Mars</option> + <option>Avril</option> + <option>Mai</option> + <option>Juin</option> + <option>Juillet</option> + <option>Août</option> + <option>Septembre</option> + <option>Octobre</option> + <option>Novembre</option> + <option>Décembre</option> + </select> + </span> + <span> + <label for="year">Année :</label> + <select id="year" name="year"> + </select> + </span> + </div> + <div> + <span> + <label for="hour">Heure :</label> + <select id="hour" name="hour"> + </select> + </span> + <span> + <label for="minute">Minute :</label> + <select id="minute" name="minute"> + </select> + </span> + </div> + </div> +</form> +``` + +Les mois disponibles sont codés de façon statique (ce sont toujours les mêmes). En revanche, les valeurs pour les jours et les années sont générées dynamiquement selon le mois et l'année courante (voir les commentaires du script ci-après). Les heures et les minutes sont également générées dynamiquement. + +```css hidden +div { margin-bottom: 10px; position: relative; } @@ -372,11 +364,13 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> +} +``` -<p>Une partie intéressante du code est celle où on détecte la prise en charge de la fonctionnalité. Pour cela, dans le script, on crée un nouvel élément {{htmlelement("input")}} auquel on attribut le type <code>datetime-local</code> puis on vérifie son type juste après. Pour les navigateurs qui ne prennent pas en charge ce type de contrôle, le type aura changé et sera <code>text</code>. Si c'est le cas, on masque le contrôle natif et on utilise l'interface utilisateur alternative (composée avec les éléments ({{htmlelement("select")}})).</p> +Une partie intéressante du code est celle où on détecte la prise en charge de la fonctionnalité. Pour cela, dans le script, on crée un nouvel élément {{htmlelement("input")}} auquel on attribut le type `datetime-local` puis on vérifie son type juste après. Pour les navigateurs qui ne prennent pas en charge ce type de contrôle, le type aura changé et sera `text`. Si c'est le cas, on masque le contrôle natif et on utilise l'interface utilisateur alternative (composée avec les éléments ({{htmlelement("select")}})). -<pre class="brush: js">// On définit les différentes variables +```js +// On définit les différentes variables var nativePicker = document.querySelector('.nativeDateTimePicker'); var fallbackPicker = document.querySelector('.fallbackDateTimePicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); @@ -391,15 +385,15 @@ var minuteSelect = document.querySelector('#minute'); fallbackPicker.style.display = 'none'; fallbackLabel.style.display = 'none'; -// On teste si l'élément <input type="date"> -// se transforme en <input type="text"> +// On teste si l'élément <input type="date"> +// se transforme en <input type="text"> var test = document.createElement('input'); test.type = 'date'; // Si c'est le cas, cela signifie que l'élément // n'est pas pris en charge et if(test.type === 'text') { // On masque le sélecteur natif et on affiche - // le sélecteur avec les <select> + // le sélecteur avec les <select> nativePicker.style.display = 'none'; fallbackPicker.style.display = 'block'; fallbackLabel.style.display = 'block'; @@ -413,8 +407,8 @@ if(test.type === 'text') { } function populateDays(month) { - // On supprime les éléments <option> pour l'élément - // <select> des jours afin de pouvoir ajouter les prochains + // On supprime les éléments <option> pour l'élément + // <select> des jours afin de pouvoir ajouter les prochains while(daySelect.firstChild){ daySelect.removeChild(daySelect.firstChild); } @@ -436,9 +430,9 @@ function populateDays(month) { } // on ajoute le bon nombre de jours dans autant - // d'éléments <option> pour l'élément <select> + // d'éléments <option> pour l'élément <select> // pour la journée - for(i = 1; i <= dayNum; i++) { + for(i = 1; i <= dayNum; i++) { var option = document.createElement('option'); option.textContent = i; daySelect.appendChild(option); @@ -473,9 +467,9 @@ function populateYears() { var year = date.getFullYear(); // On affiche l'année courante et les 100 années - // précédentes pour l'élément <select> destiné à + // précédentes pour l'élément <select> destiné à // stocker l'année - for(var i = 0; i <= 100; i++) { + for(var i = 0; i <= 100; i++) { var option = document.createElement('option'); option.textContent = year-i; yearSelect.appendChild(option); @@ -483,21 +477,21 @@ function populateYears() { } function populateHours() { - // on crée 24 valeurs pour l'élément <select> + // on crée 24 valeurs pour l'élément <select> // associé aux heures - for(var i = 0; i <= 23; i++) { + for(var i = 0; i <= 23; i++) { var option = document.createElement('option'); - option.textContent = (i < 10) ? ("0" + i) : i; + option.textContent = (i < 10) ? ("0" + i) : i; hourSelect.appendChild(option); } } function populateMinutes() { - // On crée 60 valeurs pour l'élément <select> + // On crée 60 valeurs pour l'élément <select> // associé aux minutes - for(var i = 0; i <= 59; i++) { + for(var i = 0; i <= 59; i++) { var option = document.createElement('option'); - option.textContent = (i < 10) ? ("0" + i) : i; + option.textContent = (i < 10) ? ("0" + i) : i; minuteSelect.appendChild(option); } } @@ -520,72 +514,70 @@ var previousDay; // est utilisée cette valeur) daySelect.onchange = function() { previousDay = daySelect.value; -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p> -</div> +> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. -<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 une date et une heure (selon le fuseau horaire local) ou bien une chaîne de caractères 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("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code>.</td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères ({{domxref("DOMString")}}) qui + représente une date et une heure (selon le fuseau horaire local) ou bien + une chaîne de caractères 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("readonly", "input")}} et + {{htmlattrxref("step", "input")}}. + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td> + <code>list</code>, <code>value</code>, <code>valueAsNumber</code>. + </td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}}, + {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, + {{domxref("HTMLInputElement.stepUp", "stepUp()")}}. + </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#local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'forms.html#local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html##local-date-and-time-state-(type=datetime-local)', '<input type="datetime-local">')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-datetime-local")}}</p> +{{Compat("html.elements.input.input-datetime-local")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}}</li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/date"><input type="date"></a></code> and <code><a href="/fr/docs/Web/HTML/Element/input/time"><input type="time"></a></code></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire">Un tutoriel sur les sélecteurs de date et d'heure</a></li> - <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> -</ul> +- L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM qu'il implémente : {{domxref("HTMLInputElement")}} +- [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date) and [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time) +- [Un tutoriel sur les sélecteurs de date et d'heure](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire) +- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML) diff --git a/files/fr/web/html/element/input/datetime/index.md b/files/fr/web/html/element/input/datetime/index.md index e3ddf4012c..898c20a171 100644 --- a/files/fr/web/html/element/input/datetime/index.md +++ b/files/fr/web/html/element/input/datetime/index.md @@ -10,15 +10,13 @@ tags: - Web translation_of: Web/HTML/Element/input/datetime --- -<div>{{HTMLRef}}{{obsolete_header}}</div> +{{HTMLRef}}{{obsolete_header}} -<p>L'élément HTML <code><input type="datetime"></code> représentait un contrôle permettant de saisir une date, une heure (avec heures, minutes, secondes et fractions de seconde) ainsi qu'un fuseau horaire. <strong>Cette fonctionnalité a été <a href="https://github.com/whatwg/html/issues/336">retirée de la spécification HTML WHATWG</a></strong> et n'est plus prise en charge par les navigateurs.</p> +L'élément HTML `<input type="datetime">` représentait un contrôle permettant de saisir une date, une heure (avec heures, minutes, secondes et fractions de seconde) ainsi qu'un fuseau horaire. **Cette fonctionnalité a été [retirée de la spécification HTML WHATWG](https://github.com/whatwg/html/issues/336)** et n'est plus prise en charge par les navigateurs. -<p>Afin de remplacer cette fonctionnalité, les navigateurs implémentent (ou développent) l'élément <code><input></code> de type <code><a href="/fr/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> qui doit être utilisé à la place. Le format utilisé pour ces champs est décrit dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_universelles">cette section de l'article sur les formats</a>.</p> +Afin de remplacer cette fonctionnalité, les navigateurs implémentent (ou développent) l'élément `<input>` de type [`datetime-local`](/fr/docs/Web/HTML/Element/input/datetime-local) qui doit être utilisé à la place. Le format utilisé pour ces champs est décrit dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates_et_heures_universelles). -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>{{HTMLElement("input")}} element</li> - <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> -</ul> +- {{HTMLElement("input")}} element +- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML) diff --git a/files/fr/web/html/element/input/email/index.md b/files/fr/web/html/element/input/email/index.md index 2e6f223117..22250ac4cf 100644 --- a/files/fr/web/html/element/input/email/index.md +++ b/files/fr/web/html/element/input/email/index.md @@ -7,282 +7,227 @@ tags: - Reference translation_of: Web/HTML/Element/input/email --- -<div>{{HTMLRef}}</div> - -<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"email"</strong></code> permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut {{htmlattrxref("multiple", "input")}} 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 {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées automatiquement selon le cas.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}</div> - -<div class="note"> -<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type <code>"email"</code> emploieront un élément <code><input></code> <code><a href="/fr/docs/Web/HTML/Element/input/text">"text"</a></code> à la place.</p> -</div> - -<h2 id="Valeur">Valeur</h2> - -<p>La valeur d'un tel élément {{HTMLElement("input")}}, contenue dans l'attribut {{htmlattrxref("value", "input")}}, 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 :</p> - -<ol> - <li>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.</li> - <li>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 <code>"nom@domaine.tld"</code>. Cette règle est un peu plus complexe (cf. {{anch("Validation")}} pour l'algorithme exact).</li> - <li>Si et seulement si l'attribut {{htmlattrxref("multiple", "input")}} 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é.</li> -</ol> - -<p>Pour plus de détails, se référer à la section {{anch("Validation")}} sur la façon dont les adresses mails sont validées.</p> - -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> - -<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>email</code> prennent en charge les attributs suivants :</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 qui peut être écrit dans ce champ.</td> - </tr> - <tr> - <td><code>{{anch("minlength")}}</code></td> - <td>Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td> - </tr> - <tr> - <td><code>{{anch("multiple")}}</code></td> - <td>Un attribut booléen qui indique si plusieurs adresses électroniques peuvent être saisies et séparées par des virgules.</td> - </tr> - <tr> - <td><code>{{anch("pattern")}}</code></td> - <td>Une expression rationnelle à laquelle doit correspondre le texte 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> - <tr> - <td><code>{{anch("spellcheck")}}</code></td> - <td>Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.</td> - </tr> - </tbody> -</table> +{{HTMLRef}} -<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> +Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"email"`** permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut {{htmlattrxref("multiple", "input")}} 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 {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées automatiquement selon le cas. +{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}} +> **Note :** Les navigateurs qui ne prennent pas en charge le type `"email"` emploieront un élément `<input>` [`"text"`](/fr/docs/Web/HTML/Element/input/text) à la place. -<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> +## Valeur -<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte 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> +La valeur d'un tel élément {{HTMLElement("input")}}, contenue dans l'attribut {{htmlattrxref("value", "input")}}, 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. {{anch("Validation")}} pour l'algorithme exact). +3. Si et seulement si l'attribut {{htmlattrxref("multiple", "input")}} 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 {{anch("Validation")}} sur la façon dont les adresses mails sont validées. -<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> +## Attributs supplémentaires +En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `email` prennent en charge les attributs suivants : +| Attribut | Description | +| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `{{anch("maxlength")}}` | Le nombre de caractères maximal qui peut être écrit dans ce champ. | +| `{{anch("minlength")}}` | Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide. | +| `{{anch("multiple")}}` | Un attribut booléen qui indique si plusieurs adresses électroniques peuvent être saisies et séparées par des virgules. | +| `{{anch("pattern")}}` | Une expression rationnelle à laquelle doit correspondre le texte 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. | +| `{{anch("spellcheck")}}` | Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée. | -<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> +### {{htmlattrdef("maxlength")}} -<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte 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> +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`. +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) 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'utilisateur. +### {{htmlattrdef("minlength")}} -<h3 id="htmlattrdef(multiple)">{{htmlattrdef("multiple")}}</h3> +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`. -<p>A Boolean attribute which, if present, indicates that the user can enter a list of multiple e-mail addresses, separated by commas and, optionally, whitespace characters. See {{anch("Allowing multiple e-mail addresses")}} for details.</p> +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) 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'utilisateur. -<div class="note"> -<p><strong>Note:</strong> Normally, if you specify the {{htmlattrxref("required", "input")}} attribute, the user must enter a valid e-mail address for the field to be considered valid. However, if you add the <code>multiple</code> attribute, a list of zero e-mail addresses (an empty string, or one which is entirely whitespace) is a valid value. In other words, the user does not have to enter even one e-mail address when <code>multiple</code> is specified, regardless of the value of <code>required</code>.</p> -</div> +### {{htmlattrdef("multiple")}} -<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> +A Boolean attribute which, if present, indicates that the user can enter a list of multiple e-mail addresses, separated by commas and, optionally, whitespace characters. See {{anch("Allowing multiple e-mail addresses")}} for details. -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> +> **Note :** Normally, if you specify the {{htmlattrxref("required", "input")}} attribute, the user must enter a valid e-mail address for the field to be considered valid. However, if you add the `multiple` attribute, a list of zero e-mail addresses (an empty string, or one which is entirely whitespace) is a valid value. In other words, the user does not have to enter even one e-mail address when `multiple` is specified, regardless of the value of `required`. -<p>Voir la section sur la validation d'un motif ci-après pour plus de détails.</p> +### {{htmlattrdef("pattern")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> +Voir la section sur la validation d'un motif ci-après pour plus de détails. -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} -<h2 id="Attributs_non-standard">Attributs non-standard</h2> +{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}} -<p>Les attributs non-standard suivant sont disponibles pour les champs d'email dans certains navigateurs mais devraient ne pas être utilisés.</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}} -<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>Une chaîne de caractères qui 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> +## Attributs non-standard + +Les attributs non-standard suivant sont disponibles pour les champs d'email dans certains navigateurs mais devraient ne pas être utilisés. + +| Attribute | Description | +| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("autocorrect")}}` | Une chaîne de caractères qui 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.** | -<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> +### {{htmlattrdef("autocorrect")}} {{non-standard_inline}} -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}} -<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> +### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}} -<h2 id="Utiliser_les_champs_de_saisie_d'adresses_électroniques">Utiliser les champs de saisie d'adresses électroniques</h2> +## Utiliser les champs de saisie d'adresses électroniques -<p>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 <code>"email"</code> 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 <code>type</code> vaut <code>"email"</code>, 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.</p> +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. -<p>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.</p> +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. -<div class="note"> -<p><strong>Note :</strong> 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 <em>ne doit pas</em> reposer sur les mécanismes de validation du navigateur. Il est crucial de vérifier l'adresse électronique <em>côté serveur</em> 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.).</p> -</div> +> **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.). -<h3 id="Un_champ_email_simple">Un champ email simple</h3> +### Un champ email simple -<p>À 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 :</p> +À 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 : -<pre class="brush: html"><input id="emailAddress" type="email"></pre> +```html +<input id="emailAddress" type="email"> +``` -<p>{{EmbedLiveSample('Un_champ_email_simple', 600, 40)}}</p> +{{EmbedLiveSample('Un_champ_email_simple', 600, 40)}} -<p>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 {{htmlattrxref("required", "input")}}, seuls les adresses électroniques bien formées sont autorisées, il n'est plus possible de laisser la valeur vide.</p> +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 {{htmlattrxref("required", "input")}}, seuls les adresses électroniques bien formées sont autorisées, il n'est plus possible de laisser la valeur vide. -<h3 id="Gérer_plusieurs_adresses_mail">Gérer plusieurs adresses mail</h3> +### Gérer plusieurs adresses mail -<p>Grâce à l'attribut {{htmlattrxref("multiple", "input")}}, on peut configurer le champ afin de saisir plusieurs adresses mail.</p> +Grâce à l'attribut {{htmlattrxref("multiple", "input")}}, on peut configurer le champ afin de saisir plusieurs adresses mail. -<pre class="brush: html"><input id="emailAddress" type="email" multiple></pre> +```html +<input id="emailAddress" type="email" multiple> +``` -<p>{{EmbedLiveSample('Gérer_plusieurs_adresses_mail', 600, 40)}}</p> +{{EmbedLiveSample('Gérer_plusieurs_adresses_mail', 600, 40)}} -<p>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.</p> +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. -<p>Voici certains exemples de chaînes de caractères valides lorsque <code>"multiple"</code> est utilisé :</p> +Voici certains exemples de chaînes de caractères valides lorsque `"multiple"` est utilisé : -<ul> - <li><code>""</code></li> - <li><code>"me@example"</code></li> - <li><code>"me@example.org"</code></li> - <li><code>"me@example.org,you@example.org"</code></li> - <li><code>"me@example.org, you@example.org"</code></li> - <li><code>"me@example.org,you@example.org, us@example.org"</code></li> -</ul> +- `""` +- `"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"` -<p>En revanche, les exemples suivants sont considérés invalides :</p> +En revanche, les exemples suivants sont considérés invalides : -<ul> - <li><code>","</code></li> - <li><code>"me"</code></li> - <li><code>"me@example.org you@example.org"</code></li> -</ul> +- `","` +- `"me"` +- `"me@example.org you@example.org"` -<h3 id="Textes_indicatifs_(placeholders)">Textes indicatifs (<em>placeholders</em>)</h3> +### Textes indicatifs (_placeholders_) -<p>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 {{HTMLElement("input")}}. Pour fournir une telle indication, on peut fournir un <em>placeholder</em> qui sera affiché dans le champ lorsque la valeur est vide et qui disparaît dès que des données sont saisies.</p> +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 {{HTMLElement("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. -<p>Dans l'exemple qui suit, on utilise un élément <code><input></code> de type <code>"email"</code> avec le texte indicatif <code>"sophie@example.com"</code>. Vous pouvez manipuler l'exemple afin de voir comment ce texte disparaît/réapparaît lorsqu'on édite la valeur du champ.</p> +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. -<pre class="brush: html"><input type="email" placeholder="sophie@example.com"></pre> +```html +<input type="email" placeholder="sophie@example.com"> +``` -<p>{{EmbedLiveSample('Textes_indicatifs_(placeholders)', 600, 40)}}</p> +{{EmbedLiveSample('Textes_indicatifs_(placeholders)', 600, 40)}} -<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> +### Contrôler la taille du champ -<p>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.</p> +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. -<h4 id="Contrôler_la_taille_physique">Contrôler la taille physique</h4> +#### Contrôler la taille physique -<p>La taille physique de la boîte de saisie peut être paramétrée grâce à l'attribut {{htmlattrxref("size", "input")}}. 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 :</p> +La taille physique de la boîte de saisie peut être paramétrée grâce à l'attribut {{htmlattrxref("size", "input")}}. 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 : -<pre class="brush: html"><input type="email" size="15"></pre> +```html +<input type="email" size="15"> +``` -<p>{{ EmbedLiveSample('Contrôler_la_taille_physique', 600, 40)}}</p> +{{ EmbedLiveSample('Contrôler_la_taille_physique', 600, 40)}} -<h4 id="Contrôler_la_taille_de_la_valeur">Contrôler la taille de la valeur</h4> +#### Contrôler la taille de la valeur -<p>L'attribut <code>size</code> 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 {{htmlattrxref("minlength", "input")}} pour indiquer le nombre minimal de caractères et l'attribut {{htmlattrxref("maxlength", "input")}} pour indiquer le nombre maximal de caractères contenus dans l'adresse électronique.</p> +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 {{htmlattrxref("minlength", "input")}} pour indiquer le nombre minimal de caractères et l'attribut {{htmlattrxref("maxlength", "input")}} pour indiquer le nombre maximal de caractères contenus dans l'adresse électronique. -<p>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.</p> +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. -<pre class="brush: html"><input type="email" size="32" minlength="3" maxlength="64"></pre> +```html +<input type="email" size="32" minlength="3" maxlength="64"> +``` -<p>{{EmbedLiveSample("Contrôler_la_taille_de_la_valeur", 600, 40)}}</p> +{{EmbedLiveSample("Contrôler_la_taille_de_la_valeur", 600, 40)}} -<h3 id="Fournir_une_option_par_défaut">Fournir une option par défaut</h3> +### Fournir une option par défaut -<p>On peut également fournir une valeur par défaut en remplissant l'attribut {{htmlattrxref("value", "input")}} de l'élément :</p> +On peut également fournir une valeur par défaut en remplissant l'attribut {{htmlattrxref("value", "input")}} de l'élément : -<pre class="brush: html"><input type="email" value="default@example.com"></pre> +```html +<input type="email" value="default@example.com"> +``` -<p>{{EmbedLiveSample("Fournir_une_option_par_défaut", 600, 40)}}</p> +{{EmbedLiveSample("Fournir_une_option_par_défaut", 600, 40)}} -<h4 id="Proposer_des_suggestions">Proposer des suggestions</h4> +#### Proposer des suggestions -<p>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 {{htmlattrxref("list", "input")}} dont la valeur est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient différents éléments {{HTMLElement("option")}} dont les valeurs des attributs <code>value</code> fournissent les adresses suggérées. L'utilisateur n'est pas contraint à saisir une valeur parmi celles-ci, elles sont uniquement fournies à titre indicatif.</p> +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 {{htmlattrxref("list", "input")}} dont la valeur est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient différents éléments {{HTMLElement("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. -<pre class="brush: html"><input type="email" size="40" list="defaultEmails"> +```html +<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></pre> +<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> +``` -<p>{{EmbedLiveSample("Proposer_des_suggestions", 600, 40)}}</p> +{{EmbedLiveSample("Proposer_des_suggestions", 600, 40)}} -<p>Lorsqu'on utilise l'élément {{HTMLElement("datalist")}} et l'élément {{HTMLElement("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.</p> +Lorsqu'on utilise l'élément {{HTMLElement("datalist")}} et l'élément {{HTMLElement("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. -<h2 id="Validation">Validation</h2> +## Validation -<p>Il existe deux niveaux de validation pour les champs de saisie de type <code>"email"</code>. 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.</p> +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. -<div class="warning"> -<p><strong>Attention :</strong> 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é.</p> -</div> +> **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é. -<h3 id="Validation_simple">Validation simple</h3> +### Validation simple -<p>Les navigateurs qui implémentent le type <code>"email"</code> fournissent une validation automatique afin de vérifier que la valeur saisie respecte le format d'une adresse électronique valide. Les navigateurs utilisent <a href="https://dxr.mozilla.org/mozilla-central/source/dom/html/input/SingleLineTextInputTypes.cpp?q=%2Bfunction%3A%22EmailInputType%3A%3AIsValidEmailAddressList%28const+nsAString+%26%29%22&redirect_type=single#184">un algorithme</a> pour respecter <a href="https://w3c.github.io/html/sec-forms.html#email-state-typeemail">la spécification</a>.</p> +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](https://dxr.mozilla.org/mozilla-central/source/dom/html/input/SingleLineTextInputTypes.cpp?q=%2Bfunction%3A%22EmailInputType%3A%3AIsValidEmailAddressList%28const+nsAString+%26%29%22&redirect_type=single#184) pour respecter [la spécification](https://w3c.github.io/html/sec-forms.html#email-state-typeemail). -<p>Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} peuvent être utilisées afin de mettre en forme la valeur selon qu'elle est valide ou non.</p> +Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} peuvent être utilisées afin de mettre en forme la valeur selon qu'elle est valide ou non. -<div class="note"> -<p><strong>Note :</strong> 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 <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489">le bug n°15489 du W3C</a>.</p> -</div> +> **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](https://www.w3.org/Bugs/Public/show_bug.cgi?id=15489). -<h3 id="Validation_grâce_à_une_expression_rationnelle">Validation grâce à une expression rationnelle</h3> +### Validation grâce à une expression rationnelle -<p>S'il est nécessaire que l'adresse saisie respecte plus de critères, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">une expression rationnelle</a> contre laquelle la valeur sera vérifiée. Si l'attribut {{htmlattrxref("multiple", "input")}} est actif, chaque élément de la liste devra respecter cette expression rationnelle.</p> +S'il est nécessaire que l'adresse saisie respecte plus de critères, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer [une expression rationnelle](/fr/docs/Web/JavaScript/Guide/Expressions_régulières) contre laquelle la valeur sera vérifiée. Si l'attribut {{htmlattrxref("multiple", "input")}} est actif, chaque élément de la liste devra respecter cette expression rationnelle. -<p>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.</p> +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. -<p>Le navigateur vérifie d'une part que l'adresse électronique est une adresse correctement formatée <em>et</em> que celle-ci respecte l'expression rationnelle indiquée avec {{htmlattrxref("pattern", "input")}}. Voici un exemple d'application :</p> +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 {{htmlattrxref("pattern", "input")}}. Voici un exemple d'application : -<pre class="brush: css hidden">body { +```css hidden +body { font: 16px sans-serif; } @@ -300,128 +245,129 @@ label { label::after { content: ":"; -}</pre> +} +``` -<pre class="brush: html"><form> - <div class="emailBox"> - <label for="emailAddress">Votre adresse email</label><br> - <input id="emailAddress" type="email" size="64" maxLength="64" required +```html +<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> + 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> -</pre> + <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> +``` -<p>{{EmbedLiveSample("Validation_grâce_à_une_expression_rationnelle", 700, 275)}}</p> +{{EmbedLiveSample("Validation_grâce_à_une_expression_rationnelle", 700, 275)}} -<p>Le formulaire ({{HTMLElement("form")}}) contient un élément {{HTMLElement("input")}} de type <code>"email"</code> pour saisir l'adresse de l'utilisateur, un élément {{HTMLElement("textarea")}} permettant de saisir le message et un élément <code><input></code> de type <code><a href="/fr/docs/Web/HTML/Element/input/submit">"submit"</a></code> qui formera un bouton permettant d'envoyer le formulaire. Chaque champ possède un élément {{HTMLElement("label")}} associé qui permet d'indiquer ce qui est attendu.</p> +Le formulaire ({{HTMLElement("form")}}) contient un élément {{HTMLElement("input")}} de type `"email"` pour saisir l'adresse de l'utilisateur, un élément {{HTMLElement("textarea")}} permettant de saisir le message et un élément `<input>` de type [`"submit"`](/fr/docs/Web/HTML/Element/input/submit) qui formera un bouton permettant d'envoyer le formulaire. Chaque champ possède un élément {{HTMLElement("label")}} associé qui permet d'indiquer ce qui est attendu. -<p>Si on regarde le champ de saisie pour l'adresse électronique, on voit que les deux attributs {{htmlattrxref("size", "input")}} et {{htmlattrxref("maxlength", "input")}} 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 {{htmlattrxref("required", "input")}} est présent et l'adresse électronique est donc obligatoire pour l'envoi du formulaire.</p> +Si on regarde le champ de saisie pour l'adresse électronique, on voit que les deux attributs {{htmlattrxref("size", "input")}} et {{htmlattrxref("maxlength", "input")}} 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 {{htmlattrxref("required", "input")}} est présent et l'adresse électronique est donc obligatoire pour l'envoi du formulaire. -<p>L'attribut {{htmlattrxref("placeholder", "input")}} indique qu'une valeur semblable à <code>"nomutilisateur@beststartupever.com"</code> 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 <code>"email"</code> 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é :</p> +L'attribut {{htmlattrxref("placeholder", "input")}} 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é : -<p><img alt="" src="enter-valid-email-address.png"></p> + -<p>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 "<em>nomutilisateur</em>@beststartupever.com". C'est pourquoi on utilise l'attribut {{htmlattrxref("pattern", "input")}} avec la valeur <code>".+@beststartupever.com"</code>. 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".</p> +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 {{htmlattrxref("pattern", "input")}} 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". -<p>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 <strong>et</strong> que l'adresse est valide. Autrement dit, avec le type <code>"email"</code> et cette valeur pour l'attribut <code>pattern</code>, 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".</p> +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". -<p>Lorsqu'on utilise l'attribut <code>pattern</code> Il est conseillé d'utilisé l'attribut {{htmlattrxref("title")}} afin de décrire le motif de l'expression ratioennelle. Autrement dit, dans ce cas, l'attribut <code>title</code> 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 <code>title</code>. Par exemple si l'attribut <code>title</code> vaut "Adresse email", le message affiché serait "Le texte saisi ne correspond pas au motif requis. Adresse email" ce qui n'est pas correct.</p> +Lorsqu'on utilise l'attribut `pattern` Il est conseillé d'utilisé l'attribut {{htmlattrxref("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. -<p>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."</p> +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." -<p><img alt="" src="email-pattern-match-bad.png"></p> + -<div class="note"> -<p><strong>Note :</strong> 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.</p> -</div> +> **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. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>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 <code>"user@example.gov"</code> comme indication lorsque le champ est vide. On trouve également l'attribut {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur.</p> +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 {{htmlattrxref("multiple", "input")}} qui permet de saisir zéro ou plusieurs adresses séparées par des virgules (cf. ci-avant). Enfin, l'attribut {{htmlattrxref("list", "input")}} utilisé indique un identifiant d'un élément {{HTMLElement("datalist")}} dont les éléments {{HTMLElement("option")}} déterminent les valeurs suggérées qui peuvent être sélectionnées par l'utilisateur. -<p>L'élément {{HTMLElement("label")}} qui précède l'élément <code><input></code> permettra d'afficher un libellé avant la boîte de saisie. Le lien entre les deux est fait grâce à l'attribut <code>for</code> qui contient <code>"emailAddress"</code> qui est l'identifiant de l'élément {{HTMLElement("input")}}. Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie.</p> +L'élément {{HTMLElement("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 {{HTMLElement("input")}}. Grâce à cette association, cliquer sur l'étiquette permettra de placer le focus sur le champ de saisie. -<pre class="brush: html"><label for="emailAddress">Email</label><br/> -<input id="emailAddress" type="email" placeholder="user@example.gov" - list="defaultEmails" size="64" maxlength="256" multiple> +```html +<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></pre> +<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> +``` -<p>{{EmbedLiveSample('Exemples', 600, 50)}}</p> +{{EmbedLiveSample('Exemples', 600, 50)}} -<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")}}) représentant une adresse électronique ou une chaîne 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("multiple", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>list</code> et <code>value</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères ({{domxref("DOMString")}}) représentant + une adresse électronique ou une chaîne 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("multiple", "input")}}, + {{htmlattrxref("pattern", "input")}}, + {{htmlattrxref("placeholder", "input")}}, + {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} + et {{htmlattrxref("size", "input")}} + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}} + </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#e-mail-state-(type=email)', '<input type="email">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '<input type="email">')}}</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#e-mail-state-(type=email)', '<input type="email">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | +| {{SpecName('HTML5.1', 'sec-forms.html#email-state-typeemail', '<input type="email">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-email")}}</p> +{{Compat("html.elements.input.input-email")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Le guide relatif aux formulaires HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li><code><a href="/fr/docs/Web/HTML/Element/input"><input type="tel"></a></code></li> -</ul> +- [Le guide relatif aux formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) +- {{HTMLElement("input")}} +- [`<input type="tel">`](/fr/docs/Web/HTML/Element/input) diff --git a/files/fr/web/html/element/input/file/index.md b/files/fr/web/html/element/input/file/index.md index 924ba06e65..8d329673d4 100644 --- a/files/fr/web/html/element/input/file/index.md +++ b/files/fr/web/html/element/input/file/index.md @@ -7,257 +7,218 @@ tags: - Reference translation_of: Web/HTML/Element/input/file --- -<div>{{HTMLRef}}</div> - -<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"file"</code></strong> permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les <em>uploader</em> vers un serveur via <a href="/fr/docs/Web/Guide/HTML/Formulaires">un formulaire</a> ou grâce à du code JavaScript <a href="/fr/docs/Using_files_from_web_applications">via l'API <em>File</em></a>.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div> - -<h2 id="Valeur">Valeur</h2> - -<p>L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du/des fichier(s) sélectionné(s). Les autres fichiers peuvent être identifiés grâce à la propriété <code>HTMLInputElement.files</code>.</p> - -<div class="note"> - <p><strong>Note :</strong></p> -<ol> - <li>Si plusieurs fichiers sont sélectionnés, la chaîne de caractères représente le chemin du premier fichier sélectionné. Il est possible d'accéder aux autres fichiers en JavaScript <a href="/en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file(s)">grâce à la propriété <code>FileList</code></a>.</li> - <li>Si aucun fichier n'est sélectionné, la chaîne de caractères sera vide (<code>""</code>).</li> - <li>La chaîne de caractères <a href="https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly">est préfixée avec <code>C:\fakepath\</code></a> afin d'éviter la fuite d'informations sensibles concernant la structure des fichiers de l'utilisateur.</li> -</ol> -</div> - -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> - -<p>En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>file</code> peuvent également utiliser les attributs suivants :</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("accept")}}</code></td> - <td>Un ou plusieurs identifiants de type de fichier décrivants les types de fichier autorisés.</td> - </tr> - <tr> - <td><code>{{anch("capture")}}</code></td> - <td>La source à utiliser pour capturer des images ou des vidéos.</td> - </tr> - <tr> - <td><code>{{anch("files")}}</code></td> - <td>Un objet {{domxref("FileList")}} qui liste les fichiers choisis</td> - </tr> - <tr> - <td><code>{{anch("multiple")}}</code></td> - <td>Un attribut booléen qui, lorsqu'il est présent, indique que plusieurs fichiers peuvent être sélectionnés.</td> - </tr> - </tbody> -</table> +{{HTMLRef}} -<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3> +Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"file"`** permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les _uploader_ vers un serveur via [un formulaire](/fr/docs/Web/Guide/HTML/Formulaires) ou grâce à du code JavaScript [via l'API _File_](/fr/docs/Using_files_from_web_applications). -<p>Une chaîne de caractères qui définit les types de fichier qui devraient être acceptés. Cette chaîne est une liste d'identifiants de type de fichier (cf. ci-après) séparés par des virgules. Un fichier pouvant avoir un format selon différentes extensions et types MIME, il est souvent utile de cibler plusieurs identifiants pour la bonne sélection du fichier.</p> +{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}} -<p>Les fichiers Microsoft Word, par exemple, peuvent être identifiés de différentes façons et, dans un site avec un champ qui accepte les fichiers Word, on pourra écrire :</p> +## Valeur -<pre class="brush: html"><input type="file" id="docpicker" - accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre> +L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente le chemin du/des fichier(s) sélectionné(s). Les autres fichiers peuvent être identifiés grâce à la propriété `HTMLInputElement.files`. -<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3> +> **Note :** +> +> 1. Si plusieurs fichiers sont sélectionnés, la chaîne de caractères représente le chemin du premier fichier sélectionné. Il est possible d'accéder aux autres fichiers en JavaScript [grâce à la propriété `FileList`](</en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file(s)>). +> 2. Si aucun fichier n'est sélectionné, la chaîne de caractères sera vide (`""`). +> 3. La chaîne de caractères [est préfixée avec `C:\fakepath\`](https://html.spec.whatwg.org/multipage/input.html#fakepath-srsly) afin d'éviter la fuite d'informations sensibles concernant la structure des fichiers de l'utilisateur. -<p>Une chaîne de caractères qui indique la caméra à utiliser pour capturer des photos et des vidéos si l'attribut <code>accept</code> indique que le fichier est de ce type. Lorsque <code>capture</code> vaut <code>"user"</code>, cela indique que la caméra qui fait face à l'utilisateur devrait être utilisée. Si l'attribut vaut <code>"environment"</code>, c'est la caméra qui est tournée vers l'extérieur devrait être utilisée. Si l'attribut est absent, l'agent utilisateur pourra décider de laquelle utiliser. Si la caméra souhaitée par l'attribut n'est pas disponible, l'agent utilisateur pourra utiliser une autre caméra de l'appareil.</p> +## Attributs supplémentaires -<div class="note"> - <p><strong>Note :</strong> <code>capture</code> était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier.</p> -</div> +En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `file` peuvent également utiliser les attributs suivants : -<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3> +| Attribut | Description | +| ------------------------------ | --------------------------------------------------------------------------------------------------------- | +| `{{anch("accept")}}` | Un ou plusieurs identifiants de type de fichier décrivants les types de fichier autorisés. | +| `{{anch("capture")}}` | La source à utiliser pour capturer des images ou des vidéos. | +| `{{anch("files")}}` | Un objet {{domxref("FileList")}} qui liste les fichiers choisis | +| `{{anch("multiple")}}` | Un attribut booléen qui, lorsqu'il est présent, indique que plusieurs fichiers peuvent être sélectionnés. | -<p>Un objet {{domxref("FileList")}} qui liste chaque fichier sélectionné. Cette liste n'a qu'un seul élément, sauf si {{htmlattrxref("multiple", "input/file")}} est indiqué.</p> +### {{htmlattrdef("accept")}} -<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3> +Une chaîne de caractères qui définit les types de fichier qui devraient être acceptés. Cette chaîne est une liste d'identifiants de type de fichier (cf. ci-après) séparés par des virgules. Un fichier pouvant avoir un format selon différentes extensions et types MIME, il est souvent utile de cibler plusieurs identifiants pour la bonne sélection du fichier. -<p>Lorsque cet attribut booléen est indiqué, le champ peut être utilisé afin de sélectionner plus d'un fichier.</p> +Les fichiers Microsoft Word, par exemple, peuvent être identifiés de différentes façons et, dans un site avec un champ qui accepte les fichiers Word, on pourra écrire : -<h2 id="Attribut_non-standard">Attribut non-standard</h2> +```html +<input type="file" id="docpicker" + accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"> +``` -<p>En complément des attributs précédents, les éléments <code><input type="file"></code> peuvent utiliser les attributs spécifiques suivants. Ces attributs ne sont pas standard et ne devraient donc pas être utilisés.</p> +### {{htmlattrdef("capture")}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("webkitdirectory")}}</code></td> - <td>Un attribut booléen qui indique si l'utilisateur peut choisir un répertoire (ou plusieurs si <code>{{anch("multiple")}}</code> est présent).</td> - </tr> - </tbody> -</table> +Une chaîne de caractères qui indique la caméra à utiliser pour capturer des photos et des vidéos si l'attribut `accept` indique que le fichier est de ce type. Lorsque `capture` vaut `"user"`, cela indique que la caméra qui fait face à l'utilisateur devrait être utilisée. Si l'attribut vaut `"environment"`, c'est la caméra qui est tournée vers l'extérieur devrait être utilisée. Si l'attribut est absent, l'agent utilisateur pourra décider de laquelle utiliser. Si la caméra souhaitée par l'attribut n'est pas disponible, l'agent utilisateur pourra utiliser une autre caméra de l'appareil. + +> **Note :** `capture` était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier. + +### {{htmlattrdef("files")}} + +Un objet {{domxref("FileList")}} qui liste chaque fichier sélectionné. Cette liste n'a qu'un seul élément, sauf si {{htmlattrxref("multiple", "input/file")}} est indiqué. + +### {{htmlattrdef("multiple")}} + +Lorsque cet attribut booléen est indiqué, le champ peut être utilisé afin de sélectionner plus d'un fichier. + +## Attribut non-standard -<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3> +En complément des attributs précédents, les éléments `<input type="file">` peuvent utiliser les attributs spécifiques suivants. Ces attributs ne sont pas standard et ne devraient donc pas être utilisés. -<p>L'attribut booléen <code>webkitdirectory</code>, lorsqu'il est présent, indique que le contrôle permet de sélectionner un/des répertoires plutôt qu'un/des fichiers. Voir {{domxref("HTMLInputElement.webkitdirectory")}} pour plus de détails et d'exemples.</p> +| Attribut | Description | +| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("webkitdirectory")}}` | Un attribut booléen qui indique si l'utilisateur peut choisir un répertoire (ou plusieurs si `{{anch("multiple")}}` est présent). | -<div class="note"> -<p><strong>Note :</strong> Bien que cet attribut ait initialement été implémenté pour les navigateurs WebKit, <code>webkitdirectory</code> est utilisable avec Microsoft Edge et pour Firefox 50 et supérieurs. Toutefois, bien que la prise en charge soit assez vaste, cet attribut reste non-standard et ne doit pas être utilisé.</p> -</div> +### {{htmlattrdef("webkitdirectory")}} {{non-standard_inline}} -<h2 id="Identifiants_de_type_de_fichier">Identifiants de type de fichier</h2> +L'attribut booléen `webkitdirectory`, lorsqu'il est présent, indique que le contrôle permet de sélectionner un/des répertoires plutôt qu'un/des fichiers. Voir {{domxref("HTMLInputElement.webkitdirectory")}} pour plus de détails et d'exemples. -<p>Un identifiant de type de fichier est une chaîne de caractères qui décrit le type de fichier qui peut être sélectionné par un utilisateur via un élément {{HTMLElement("input")}} de type <code>file</code>. Chaque identifiant peut prendre une des formes suivantes :</p> +> **Note :** Bien que cet attribut ait initialement été implémenté pour les navigateurs WebKit, `webkitdirectory` est utilisable avec Microsoft Edge et pour Firefox 50 et supérieurs. Toutefois, bien que la prise en charge soit assez vaste, cet attribut reste non-standard et ne doit pas être utilisé. -<ul> - <li>Une extension de fichier valide, sensible à la casse et qui commence par un point (« . »). Par exemple : <code>.jpg</code>, <code>.pdf</code> ou <code>.doc</code>.</li> - <li>Un type MIME valide, sans extension.</li> - <li>La chaîne de caractères <code>audio/*</code> qui indique « n'importe quel fichier audio »</li> - <li>La chaîne de caractères <code>video/*</code> qui indique « n'importe quel fichier vidéo »</li> - <li>La chaîne de caractères <code>image/*</code> qui indique « n'importe quel fichier image ».</li> -</ul> +## Identifiants de type de fichier -<p>L'attribut <code>accept</code> prend comme valeur une chaîne de caractères composée d'un ou plusieurs identifiants de type, séparés par des virgules. Ainsi, si un sélecteur de fichier doit permettre de sélectionner des images ou des documents PDF, on pourra écrire :</p> +Un identifiant de type de fichier est une chaîne de caractères qui décrit le type de fichier qui peut être sélectionné par un utilisateur via un élément {{HTMLElement("input")}} de type `file`. Chaque identifiant peut prendre une des formes suivantes : -<pre class="brush: html"><input type="file" accept="image/*,.pdf"></pre> +- Une extension de fichier valide, sensible à la casse et qui commence par un point (« . »). Par exemple : `.jpg`, `.pdf` ou `.doc`. +- Un type MIME valide, sans extension. +- La chaîne de caractères `audio/*` qui indique « n'importe quel fichier audio » +- La chaîne de caractères `video/*` qui indique « n'importe quel fichier vidéo » +- La chaîne de caractères `image/*` qui indique « n'importe quel fichier image ». -<h2 id="Utiliser_<input_typefile>">Utiliser <code><input type="file"></code></h2> +L'attribut `accept` prend comme valeur une chaîne de caractères composée d'un ou plusieurs identifiants de type, séparés par des virgules. Ainsi, si un sélecteur de fichier doit permettre de sélectionner des images ou des documents PDF, on pourra écrire : -<h3 id="Un_exemple_simple">Un exemple simple</h3> +```html +<input type="file" accept="image/*,.pdf"> +``` -<pre class="brush: html"><form method="post" enctype="multipart/form-data"> - <div> - <label for="file">Sélectionner le fichier à envoyer</label> - <input type="file" id="file" name="file" multiple> - </div> - <div> - <button>Envoyer</button> - </div> -</form></pre> +## Utiliser `<input type="file">` -<pre class="brush: css hidden">div { +### Un exemple simple + +```html +<form method="post" enctype="multipart/form-data"> + <div> + <label for="file">Sélectionner le fichier à envoyer</label> + <input type="file" id="file" name="file" multiple> + </div> + <div> + <button>Envoyer</button> + </div> +</form> +``` + +```css hidden +div { margin-bottom: 10px; -}</pre> +} +``` -<p>Ce fragment de code HTML produira le résultat suivant :</p> +Ce fragment de code HTML produira le résultat suivant : -<p>{{EmbedLiveSample('Un_exemple_simple', 650, 60)}}</p> +{{EmbedLiveSample('Un_exemple_simple', 650, 60)}} -<div class="note"> -<p><strong>Note :</strong> Vous pouvez également trouver cet exemple sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html">avec le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html">la démonstration</a>.</p> -</div> +> **Note :** Vous pouvez également trouver cet exemple sur GitHub — [avec le code source](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/simple-file.html) et [la démonstration](https://mdn.github.io/learning-area/html/forms/file-examples/simple-file.html). -<p>Quel que soit l'appareil ou le système d'exploitation de l'utilisateur, l'élément <code><input type="file"></code> fournit un bouton qui ouvre un sélecteur de fichier permettant de choisir un fichier.</p> +Quel que soit l'appareil ou le système d'exploitation de l'utilisateur, l'élément `<input type="file">` fournit un bouton qui ouvre un sélecteur de fichier permettant de choisir un fichier. -<p>Lorsque l'attribut {{htmlattrxref("multiple", "input")}} est utilisé (comme dans l'exemple précédent), cela signifie que plusieurs fichiers peuvent être sélectionnés de façon simultanée. L'utilisateur doit alors pouvoir choisir plusieurs fichiers depuis le sélecteur de fichier (par exemple en maintenant la touche <kbd>Shift</kbd> ou <kbd>Control</kbd> puis en cliquant). Si on souhaite qu'un seul fichier puisse être envoyé, il suffit de ne pas utiliser l'attribut <code>multiple</code>.</p> +Lorsque l'attribut {{htmlattrxref("multiple", "input")}} est utilisé (comme dans l'exemple précédent), cela signifie que plusieurs fichiers peuvent être sélectionnés de façon simultanée. L'utilisateur doit alors pouvoir choisir plusieurs fichiers depuis le sélecteur de fichier (par exemple en maintenant la touche <kbd>Shift</kbd> ou <kbd>Control</kbd> puis en cliquant). Si on souhaite qu'un seul fichier puisse être envoyé, il suffit de ne pas utiliser l'attribut `multiple`. -<p>Lorsqu'on envoie le formulaire de l'exemple, le nom de chaque fichier sera ajouté aux paramètres de l'URL de la façon suivante : <code>?file=fichier1.txt&file=fichier2.txt</code></p> +Lorsqu'on envoie le formulaire de l'exemple, le nom de chaque fichier sera ajouté aux paramètres de l'URL de la façon suivante : `?file=fichier1.txt&file=fichier2.txt` -<h3 id="Obtenir_des_informations_sur_les_fichiers_sélectionnés">Obtenir des informations sur les fichiers sélectionnés</h3> +### Obtenir des informations sur les fichiers sélectionnés -<p>Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété <code>HTMLInputElement.files</code> de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet <code>FileList</code> se comporte comme un tableau et on peut donc consulter sa longueur (la propriété <code>length</code>) afin de connaître le nombre de fichiers sélectionnés.</p> +Les fichiers sélectionnés peuvent être obtenus sous la forme d'un objet {{domxref("FileList")}} renvoyé par la propriété `HTMLInputElement.files` de l'élement du DOM. Cet objet est une liste d'objets {{domxref("File")}}. Un objet `FileList` se comporte comme un tableau et on peut donc consulter sa longueur (la propriété `length`) afin de connaître le nombre de fichiers sélectionnés. -<p>Chaque objet <code>File</code> contient les informations suivantes :</p> +Chaque objet `File` contient les informations suivantes : -<ul> - <li><code>name</code> : le nom du fichier.</li> - <li><code>lastModified</code> : un nombre représentant la date à laquelle le fichier a été modifié pour la dernière fois (sous la forme d'un horodatage UNIX).</li> - <li><code>lastModifiedDate</code> : un objet {{domxref("Date")}} qui représente la date et l'heure à laquelle le fichier a été modifié pour la dernière fois.</li> - <li><code>size</code> : un nombre qui représente la taille du fichier en octets.</li> - <li><code>type</code> : une chaîne de caractères ({{domxref("DOMString")}}) qui représente <a href="/fr/docs/Glossaire/Type_MIME">le type MIME</a> du fichier.</li> - <li><code>webkitRelativePath</code>{{non-standard_inline}} : une chaîne de caractères qui indique l'emplacement relatif du fichier par rapport au dossier de base indiqué par l'attribut {{htmlattrxref("webkitdirectory", "input")}}. <em>Attention, cette fonctionnalité est non-standard et doit être utilisée avec précaution.</em></li> -</ul> +- `name` : le nom du fichier. +- `lastModified` : un nombre représentant la date à laquelle le fichier a été modifié pour la dernière fois (sous la forme d'un horodatage UNIX). +- `lastModifiedDate` : un objet {{domxref("Date")}} qui représente la date et l'heure à laquelle le fichier a été modifié pour la dernière fois. +- `size` : un nombre qui représente la taille du fichier en octets. +- `type` : une chaîne de caractères ({{domxref("DOMString")}}) qui représente [le type MIME](/fr/docs/Glossaire/Type_MIME) du fichier. +- `webkitRelativePath`{{non-standard_inline}} : une chaîne de caractères qui indique l'emplacement relatif du fichier par rapport au dossier de base indiqué par l'attribut {{htmlattrxref("webkitdirectory", "input")}}. _Attention, cette fonctionnalité est non-standard et doit être utilisée avec précaution._ -<div class="note"> -<p><strong>Note :</strong> Dans la plupart des navigateurs récents, il est possible de récupérer et de modifier l'attribut IDL <code>HTMLInputElement.files</code>. Pour Firefox, cela a été ajouté avec la version 57 (cf. {{bug(1384030)}}).</p> -</div> +> **Note :** Dans la plupart des navigateurs récents, il est possible de récupérer et de modifier l'attribut IDL `HTMLInputElement.files`. Pour Firefox, cela a été ajouté avec la version 57 (cf. {{bug(1384030)}}). -<h3 id="Restreindre_les_types_de_fichiers_acceptés">Restreindre les types de fichiers acceptés</h3> +### Restreindre les types de fichiers acceptés -<p>Il arrive souvent qu'on souhaite sélectionner certains types de fichiers. Par exemple, si on souhaite fournir une image de profil, on restreindra probablemnt les formats à ceux des formats d'image compatibles pour le Web comme <a href="/fr/docs/Glossaire/jpeg">JPEG</a> ou <a href="/fr/docs/Glossaire/PNG">PNG</a>.</p> +Il arrive souvent qu'on souhaite sélectionner certains types de fichiers. Par exemple, si on souhaite fournir une image de profil, on restreindra probablemnt les formats à ceux des formats d'image compatibles pour le Web comme [JPEG](/fr/docs/Glossaire/jpeg) ou [PNG](/fr/docs/Glossaire/PNG). -<p>Pour cela, on peut utiliser l'attribut {{htmlattrxref("accept","input")}} afin d'indiquer les formats de fichier acceptés (sous la forme d'une liste d'extensions de fichier ou de types MIME séparés par des virgules). Par exemple :</p> +Pour cela, on peut utiliser l'attribut {{htmlattrxref("accept","input")}} afin d'indiquer les formats de fichier acceptés (sous la forme d'une liste d'extensions de fichier ou de types MIME séparés par des virgules). Par exemple : -<ul> - <li><code>accept="image/png"</code> ou <code>accept=".png"</code> permettra de n'accepter que les fichiers PNG.</li> - <li><code>accept="image/png, image/jpeg"</code> ou <code>accept=".png, .jpg, .jpeg"</code> permettra de n'accepter que les fichiers PNG ou JPEG.</li> - <li><code>accept="image/*"</code> permettra d'accepter n'importe quel fichier dont le type MIME est <code>image/*</code> (pour de nombreux appareils mobiles, cette valeur permet d'utiliser l'appareil photo de l'appareil afin de prendre une photo qui sera utilisée comme fichier à envoyer).</li> - <li><code>accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"</code> permettra d'accepter un fichier ressemblant à un document Word.</li> -</ul> +- `accept="image/png"` ou `accept=".png"` permettra de n'accepter que les fichiers PNG. +- `accept="image/png, image/jpeg"` ou `accept=".png, .jpg, .jpeg"` permettra de n'accepter que les fichiers PNG ou JPEG. +- `accept="image/*"` permettra d'accepter n'importe quel fichier dont le type MIME est `image/*` (pour de nombreux appareils mobiles, cette valeur permet d'utiliser l'appareil photo de l'appareil afin de prendre une photo qui sera utilisée comme fichier à envoyer). +- `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` permettra d'accepter un fichier ressemblant à un document Word. -<p>Prenons un exemple :</p> +Prenons un exemple : -<pre class="brush: html"><form method="post" enctype="multipart/form-data"> - <div> - <label for="profile_pic">Sélectionnez le fichier à utiliser</label> - <input type="file" id="profile_pic" name="profile_pic" - accept=".jpg, .jpeg, .png"> - </div> - <div> - <button>Envoyer</button> - </div> -</form></pre> +```html +<form method="post" enctype="multipart/form-data"> + <div> + <label for="profile_pic">Sélectionnez le fichier à utiliser</label> + <input type="file" id="profile_pic" name="profile_pic" + accept=".jpg, .jpeg, .png"> + </div> + <div> + <button>Envoyer</button> + </div> +</form> +``` -<pre class="brush: css hidden">div { +```css hidden +div { margin-bottom: 10px; -}</pre> +} +``` -<p>Voici le résultat produit :</p> +Voici le résultat produit : -<p>{{EmbedLiveSample('Restreindre_les_types_de_fichiers_acceptés', 650, 60)}}</p> +{{EmbedLiveSample('Restreindre_les_types_de_fichiers_acceptés', 650, 60)}} -<div class="note"> -<p><strong>Note :</strong> Vous pouvez également consulter cet exemple sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html">voir le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html">la démonstration <em>live</em></a>.</p> -</div> +> **Note :** Vous pouvez également consulter cet exemple sur GitHub — [voir le code source](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-with-accept.html) et [la démonstration _live_](https://mdn.github.io/learning-area/html/forms/file-examples/file-with-accept.html). -<p>Le résultat peut sembler similaire à l'exemple précédent mais lorsque vous essayer de sélectionner un fichier, vous verrez que le sélecteur ne permet de sélectionner que les fichiers du/des type(s) indiqué(s) (il peut y avoir certaines différences selons les navigateurs et les systèmes d'exploitation).</p> +Le résultat peut sembler similaire à l'exemple précédent mais lorsque vous essayer de sélectionner un fichier, vous verrez que le sélecteur ne permet de sélectionner que les fichiers du/des type(s) indiqué(s) (il peut y avoir certaines différences selons les navigateurs et les systèmes d'exploitation). -<p>L'attribut <code>accept</code> ne permet pas de valider/contrôler le type réel du/des fichier(s) sélectionné(s). Il fournit simplement une indication au navigateur pour aider l'utilisateur à sélectionner les bons fichiers. Toutefois, dans la plupart des cas, l'utilisateur peut toujours choisir une option dans le sélecteur afin de pouvoir choisir un fichier d'un autre type.</p> +L'attribut `accept` ne permet pas de valider/contrôler le type réel du/des fichier(s) sélectionné(s). Il fournit simplement une indication au navigateur pour aider l'utilisateur à sélectionner les bons fichiers. Toutefois, dans la plupart des cas, l'utilisateur peut toujours choisir une option dans le sélecteur afin de pouvoir choisir un fichier d'un autre type. -<p>Dans tous les cas (et comme pour les autres éléments envoyés au serveur), il est nécessaire de contrôler les données reçues par un mécanisme de validation côté serveur.</p> +Dans tous les cas (et comme pour les autres éléments envoyés au serveur), il est nécessaire de contrôler les données reçues par un mécanisme de validation côté serveur. -<h3 id="Notes">Notes</h3> +### Notes -<ol> - <li>À partir de {{Gecko("2.0")}}, appeler la méthode <code>click()</code> sur un élément de type <code>file</code> ouvre le sélecteur de fichier et permet à un utilisateur de sélectionner les fichiers sur son système d'opération. Pour plus d'exemples, voir Utiliser des fichiers avec des applications web.</li> - <li> - <p>Il n'est pas possible de définir la valeur du sélecteur de fichier via un script. Le code suivant n'aura aucun effet :</p> +1. À partir de {{Gecko("2.0")}}, appeler la méthode `click()` sur un élément de type `file` ouvre le sélecteur de fichier et permet à un utilisateur de sélectionner les fichiers sur son système d'opération. Pour plus d'exemples, voir Utiliser des fichiers avec des applications web. +2. Il n'est pas possible de définir la valeur du sélecteur de fichier via un script. Le code suivant n'aura aucun effet : - <pre class="brush: js">const input = document.querySelector("input[type=file]"); -input.value = "toto"; -</pre> - </li> - <li>Lorsqu'on choisit un fichier via <code><input type="file"></code>, le chemin réel du fichier source n'est pas transmis dans la valeur de l'attribut <code>value</code> pour des raisons de sécurité. À la place, on a le nom du fichier précédé du chemin <code>C:\fakepath\</code>. Cela provient de raisons historiques, est pris en charge par la plupart des navigateurs modernes. Cela a même été <a href="https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly">inscrit dans la spécification</a>.</li> -</ol> + ```js + const input = document.querySelector("input[type=file]"); + input.value = "toto"; + ``` -<h2 id="Exemples">Exemples</h2> +3. Lorsqu'on choisit un fichier via `<input type="file">`, le chemin réel du fichier source n'est pas transmis dans la valeur de l'attribut `value` pour des raisons de sécurité. À la place, on a le nom du fichier précédé du chemin `C:\fakepath\`. Cela provient de raisons historiques, est pris en charge par la plupart des navigateurs modernes. Cela a même été [inscrit dans la spécification](https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly). -<p>Dans l'exemple qui suit, on présente sélecteur de fichiers plus avancé, qui tire parti des informations disponibles grâce à la propriété <code>HTMLInputElement.files</code>. On montre aussi quelques astuces.</p> +## Exemples -<div class="note"> -<p><strong>Note :</strong> Le code source complet de cet exemple est disponible sur GitHub — <a href="https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html">file-example.html</a> (<a href="https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html">voir la démonstration <em>live</em> associée</a>). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique.</p> -</div> +Dans l'exemple qui suit, on présente sélecteur de fichiers plus avancé, qui tire parti des informations disponibles grâce à la propriété `HTMLInputElement.files`. On montre aussi quelques astuces. -<p>Tout d'abord, voici le fragment de code HTML utilisé :</p> +> **Note :** Le code source complet de cet exemple est disponible sur GitHub — [file-example.html](https://github.com/mdn/learning-area/blob/master/html/forms/file-examples/file-example.html) ([voir la démonstration _live_ associée](https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html)). Nous n'expliquerons pas ici la feuille de style CSS mais plutôt le code JavaScript qui contient la logique. -<pre class="brush: html"><form method="post" enctype="multipart/form-data"> - <div> - <label for="image_uploads">Sélectionner des images à uploader (PNG, JPG)</label> - <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> - </div> - <div class="preview"> - <p>Aucun fichier sélectionné pour le moment</p> - </div> - <div> - <button>Envoyer</button> - </div> -</form></pre> +Tout d'abord, voici le fragment de code HTML utilisé : -<pre class="brush: css hidden">html { +```html +<form method="post" enctype="multipart/form-data"> + <div> + <label for="image_uploads">Sélectionner des images à uploader (PNG, JPG)</label> + <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple> + </div> + <div class="preview"> + <p>Aucun fichier sélectionné pour le moment</p> + </div> + <div> + <button>Envoyer</button> + </div> +</form> +``` + +```css hidden +html { font-family: sans-serif; } @@ -273,7 +234,7 @@ form ol { padding-left: 0; } -form li, div > p { +form li, div > p { background: #eee; display: flex; justify-content: space-between; @@ -309,51 +270,48 @@ form label:hover, form button:hover { form label:active, form button:active { background-color: #0D3F8F; color: white; -}</pre> +} +``` -<p>Pour l'instant, le fragment HTML ressemble à ce que nous avons déjà vu avant, rien de spécial.</p> +Pour l'instant, le fragment HTML ressemble à ce que nous avons déjà vu avant, rien de spécial. -<p>Voyons maintenant le code JavaScript utilisé :</p> +Voyons maintenant le code JavaScript utilisé : -<p>Pour les premières lignes du script, on récupère des références au formulaire et à l'élément {{htmlelement("div")}} qui possède la classe <code>.preview</code>. Ensuite, on masque l'élément {{htmlelement("input")}} car leur apparence peut être incohérente entre les navigateurs et qu'il est difficile de les mettre en forme. Cliquer sur l'élément {{htmlelement("label")}} suffit à ouvrir le sélecteur et nous mettons donc en forme cet élément à la façon d'un bouton. Ainsi, l'utilisateur saura comment interagir avec le document pour <em>uploader</em> des fichiers.</p> +Pour les premières lignes du script, on récupère des références au formulaire et à l'élément {{htmlelement("div")}} qui possède la classe `.preview`. Ensuite, on masque l'élément {{htmlelement("input")}} car leur apparence peut être incohérente entre les navigateurs et qu'il est difficile de les mettre en forme. Cliquer sur l'élément {{htmlelement("label")}} suffit à ouvrir le sélecteur et nous mettons donc en forme cet élément à la façon d'un bouton. Ainsi, l'utilisateur saura comment interagir avec le document pour _uploader_ des fichiers. -<pre class="brush: js">var input = document.querySelector('input'); +```js +var input = document.querySelector('input'); var preview = document.querySelector('.preview'); -input.style.opacity = 0;</pre> - -<div class="note"> -<p><strong>Note :</strong> La propriété <a href="/fr/docs/Web/CSS/opacity"><code>opacity</code></a> est utilisée pour masquer l'élément <code><input></code> plutôt que <a href="/fr/docs/Web/CSS/visibility"><code>visibility: hidden</code></a> ou <a href="/fr/docs/Web/CSS/display"><code>display: none</code></a>. En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé.</p> -</div> - -<p>Ensuite, on ajoute <a href="/fr/docs/Web/API/EventTarget/addEventListener">un gestionnaire d'évènement</a> à l'élément <code><input></code> afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction <code>updateImageDisplay()</code> que nous décrirons juste après.</p> - -<pre class="brush: js">input.addEventListener('change', updateImageDisplay);</pre> - -<p>À chaque fois que la fonction <code>updateImageDisplay()</code> est appelée :</p> - -<ul> - <li>On lance une boucle <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/while">while</a></code> afin de vider le contenu qui pourrait être dans l'élément <code><div></code> servant à la prévisualisation.</li> - <li>On récupère l'objet {{domxref("FileList")}} qui contient les informations sur les fichiers sélectionnés et on le stocke dans une variable intitulée <code>curFiles</code>.</li> - <li>On vérifie si aucun fichier n'a été sélectionné (ce qui se traduit par vérifier si <code>curFiles.length</code> vaut 0). Si c'est le cas, on place un message dans le <code><div></code> de prévisualisation pour indiquer qu'aucun fichier n'a été sélectionné.</li> - <li>Si des fichiers ont été sélectionnés, on les parcourt afin d'afficher des informations sur ces fichiers dans l'élément <code><div></code>. Quelques notes : - <ul> - <li>On utilise une fonction <code>validFileType()</code> afin de vérifier si le fichier est bien du bon type (c'est-à-dire qu'il respecte les extensions d'image indiquées dans l'attribut <code>accept</code>). - <ul> - <li>Si c'est le cas : - <ul> - <li>On affiche le nom et la taille du fichier dans une liste à l'intérieur du <code><div></code> (obtenus à partir de <code>curFiles[i].name</code> et <code>curFiles[i].size</code>). La fonction <code>returnFileSize()</code> est utilisée ici afin d'afficher la taille de façon lisible (en octets, kilo-octets ou mega-octets plutôt que toujours en octets).</li> - <li>On génère un aperçu de l'image en appelant la méthode <code>window.<a href="/fr/docs/Web/API/URL/createObjectURL">URL.createObjectURL</a>(curFiles[i])</code> et en réduisant l'image grâce à du CSS puis on insère cette image dans la liste.</li> - </ul> - </li> - <li>Si le type de fichier est invalide, on affiche un message dans la liste afin d'indiquer à l'utilisateur qu'il est nécessaire de sélectionner un autre type de fichier.</li> - </ul> - </li> - </ul> - </li> -</ul> - -<pre class="brush: js">function updateImageDisplay() { +input.style.opacity = 0; +``` + +> **Note :** La propriété [`opacity`](/fr/docs/Web/CSS/opacity) est utilisée pour masquer l'élément `<input>` plutôt que [`visibility: hidden`](/fr/docs/Web/CSS/visibility) ou [`display: none`](/fr/docs/Web/CSS/display). En effet, avec ces derniers les technologies d'assistance (lecteurs d'écran par exemple) comprendraient que l'élément n'est pas interactif et ne peut pas être utilisé. + +Ensuite, on ajoute [un gestionnaire d'évènement](/fr/docs/Web/API/EventTarget/addEventListener) à l'élément `<input>` afin de réaliser certaines actions lorsque sa valeur (c'est-à-dire les fichiers sélectionnés) change. Ici, le gestionnaire d'évènement appelle la fonction `updateImageDisplay()` que nous décrirons juste après. + +```js +input.addEventListener('change', updateImageDisplay); +``` + +À chaque fois que la fonction `updateImageDisplay()` est appelée : + +- On lance une boucle [`while`](/en-US/docs/Web/JavaScript/Reference/Statements/while) afin de vider le contenu qui pourrait être dans l'élément `<div>` servant à la prévisualisation. +- On récupère l'objet {{domxref("FileList")}} qui contient les informations sur les fichiers sélectionnés et on le stocke dans une variable intitulée `curFiles`. +- On vérifie si aucun fichier n'a été sélectionné (ce qui se traduit par vérifier si `curFiles.length` vaut 0). Si c'est le cas, on place un message dans le `<div>` de prévisualisation pour indiquer qu'aucun fichier n'a été sélectionné. +- Si des fichiers ont été sélectionnés, on les parcourt afin d'afficher des informations sur ces fichiers dans l'élément `<div>`. Quelques notes : + + - On utilise une fonction `validFileType()` afin de vérifier si le fichier est bien du bon type (c'est-à-dire qu'il respecte les extensions d'image indiquées dans l'attribut `accept`). + + - Si c'est le cas : + + - On affiche le nom et la taille du fichier dans une liste à l'intérieur du `<div>` (obtenus à partir de `curFiles[i].name` et `curFiles[i].size`). La fonction `returnFileSize()` est utilisée ici afin d'afficher la taille de façon lisible (en octets, kilo-octets ou mega-octets plutôt que toujours en octets). + - On génère un aperçu de l'image en appelant la méthode `window.URL.createObjectURL(curFiles[i])` et en réduisant l'image grâce à du CSS puis on insère cette image dans la liste. + + - Si le type de fichier est invalide, on affiche un message dans la liste afin d'indiquer à l'utilisateur qu'il est nécessaire de sélectionner un autre type de fichier. + +```js +function updateImageDisplay() { while(preview.firstChild) { preview.removeChild(preview.firstChild); } @@ -366,7 +324,7 @@ input.style.opacity = 0;</pre> } else { var list = document.createElement('ol'); preview.appendChild(list); - for(var i = 0; i < curFiles.length; i++) { + for(var i = 0; i < curFiles.length; i++) { var listItem = document.createElement('li'); var para = document.createElement('p'); if(validFileType(curFiles[i])) { @@ -385,108 +343,112 @@ input.style.opacity = 0;</pre> list.appendChild(listItem); } } -}</pre> +} +``` -<p>La fonction <code>validFileType()</code> prend un objet {{domxref("File")}} en entrée puis parcourt la liste des types de fichier autorisés pour les comparer à la propriété <code>type</code> du fichier. Si on trouve une correspondance (ce qui signifie que le type est bien autorisé), la fonction renvoie <code>true</code>, sinon, elle renvoie <code>false</code>.</p> +La fonction `validFileType()` prend un objet {{domxref("File")}} en entrée puis parcourt la liste des types de fichier autorisés pour les comparer à la propriété `type` du fichier. Si on trouve une correspondance (ce qui signifie que le type est bien autorisé), la fonction renvoie `true`, sinon, elle renvoie `false`. -<pre class="brush: js">var fileTypes = [ +```js +var fileTypes = [ 'image/jpeg', 'image/pjpeg', 'image/png' ] function validFileType(file) { - for(var i = 0; i < fileTypes.length; i++) { + for(var i = 0; i < fileTypes.length; i++) { if(file.type === fileTypes[i]) { return true; } } return false; -}</pre> +} +``` -<p>La fonction <code>returnFileSize()</code> prend en entrée un nombre d'octets (dans notre exemple, celui-ci provient de la propriété <code>size</code> du fichier) et le transforme en une chaîne de caractères plus compréhensible avec une taille en octets/Ko/Mo.</p> +La fonction `returnFileSize()` prend en entrée un nombre d'octets (dans notre exemple, celui-ci provient de la propriété `size` du fichier) et le transforme en une chaîne de caractères plus compréhensible avec une taille en octets/Ko/Mo. -<pre class="brush: js">function returnFileSize(number) { - if(number < 1024) { +```js +function returnFileSize(number) { + if(number < 1024) { return number + ' octets'; - } else if(number >= 1024 && number < 1048576) { + } else if(number >= 1024 && number < 1048576) { return (number/1024).toFixed(1) + ' Ko'; - } else if(number >= 1048576) { + } else if(number >= 1048576) { return (number/1048576).toFixed(1) + ' Mo'; } -}</pre> +} +``` -<p>Et voici le résultat :</p> +Et voici le résultat : -<p>{{EmbedLiveSample('Exemples', '100%', 200)}}</p> +{{EmbedLiveSample('Exemples', '100%', 200)}} -<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 le chemin du fichier sélectionné.</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("accept", "input/file")}}, {{htmlattrxref("capture", "input/file")}}, {{htmlattrxref("files", "input/file")}}, {{htmlattrxref("multiple", "input/file")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>files</code> et <code>value</code></td> - </tr> - <tr> - <td><strong>Interface DOM</strong></td> - <td>{{domxref("HTMLInputElement")}}</td> - </tr> - <tr> - <td><strong>Propriétés</strong></td> - <td><a href="/fr/docs/Web/API/HTMLInputElement#Properties_file">Propriétés pour les éléments <code>HTMLInputElement</code> de type <code>file</code></a></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères ({{domxref("DOMString")}}) qui + représente le chemin du fichier sélectionné. + </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("accept", "input/file")}}, + {{htmlattrxref("capture", "input/file")}}, + {{htmlattrxref("files", "input/file")}}, + {{htmlattrxref("multiple", "input/file")}} + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>files</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Interface DOM</strong></td> + <td>{{domxref("HTMLInputElement")}}</td> + </tr> + <tr> + <td><strong>Propriétés</strong></td> + <td> + <a href="/fr/docs/Web/API/HTMLInputElement#Properties_file" + >Propriétés pour les éléments <code>HTMLInputElement</code> de type + <code>file</code></a + > + </td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}} + </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', 'input.html#file-upload-state-(type=file)', '<input type="file">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '<input type="file">')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', 'input.html#file-upload-state-(type=file)', '<input type="file">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | +| {{SpecName('HTML5.1', 'sec-forms.html#file-upload-state-typefile', '<input type="file">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-file")}}</p> +{{Compat("html.elements.input.input-file")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Using_files_from_web_applications">Manipuler des fichiers à partir d'applications web</a> contient différents exemples d'applications relatifs à <code><input type="file"></code></li> - <li><a href="/fr/docs/Web/API/File">L'API <em>File</em></a>.</li> -</ul> +- [Manipuler des fichiers à partir d'applications web](/fr/docs/Using_files_from_web_applications) contient différents exemples d'applications relatifs à `<input type="file">` +- [L'API _File_](/fr/docs/Web/API/File). diff --git a/files/fr/web/html/element/input/hidden/index.md b/files/fr/web/html/element/input/hidden/index.md index 5ec54ea676..88af11be58 100644 --- a/files/fr/web/html/element/input/hidden/index.md +++ b/files/fr/web/html/element/input/hidden/index.md @@ -7,117 +7,101 @@ tags: - Reference translation_of: Web/HTML/Element/input/hidden --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments {{HTMLElement("input")}} de type <code><strong>"hidden"</strong></code> permettent aux développeurs web d'inclure des données qui ne peuvent pas être vues ou modifiées lorsque le formulaire est envoyé. Cela permet par exemple d'envoyer l'identifiant d'une commande ou un jeton de sécurité unique. Les champs de ce type sont invisibles sur la page.</p> +Les éléments {{HTMLElement("input")}} de type **`"hidden"`** permettent aux développeurs web d'inclure des données qui ne peuvent pas être vues ou modifiées lorsque le formulaire est envoyé. Cela permet par exemple d'envoyer l'identifiant d'une commande ou un jeton de sécurité unique. Les champs de ce type sont invisibles sur la page. -<div class="note"> -<p><strong>Note :</strong> La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :)</p> -</div> +> **Note :** La ligne de code suivante est suivie du rendu associé... si l'exemple fonctionne correctement, vous ne devriez rien voir :) -<h2>Exemple simple</h2> +## Exemple simple -<pre class="brush: html"><input id="prodId" name="prodId" type="hidden" value="xm234jq"></pre> +```html +<input id="prodId" name="prodId" type="hidden" value="xm234jq"> +``` -<p>{{EmbedLiveSample('Exemple_simple', 600, 40)}}</p> +{{EmbedLiveSample('Exemple_simple', 600, 40)}} -<div class="note"> -<p><strong>Note :</strong> Attention, les évènements DOM <code><a href="/fr/docs/Web/API/HTMLElement/input_event">input</a></code> et <code><a href="/fr/docs/Web/API/HTMLElement/change_event">change</a></code> ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec <code>hiddenInput.focus()</code>).</p> -</div> +> **Note :** Attention, les évènements DOM [`input`](/fr/docs/Web/API/HTMLElement/input_event) et [`change`](/fr/docs/Web/API/HTMLElement/change_event) ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec `hiddenInput.focus()`). -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>L'attribut {{htmlattrxref("value", "input")}} de l'élément contient une chaîne de caractères masquée qui est envoyée au serveur avec le formulaire. Cette valeur ne peut pas directement être éditée par l'utilisateur sur la page (mais elle est toujours accessible et modifiable via les outils de développement intégrés au navigateur).</p> +L'attribut {{htmlattrxref("value", "input")}} de l'élément contient une chaîne de caractères masquée qui est envoyée au serveur avec le formulaire. Cette valeur ne peut pas directement être éditée par l'utilisateur sur la page (mais elle est toujours accessible et modifiable via les outils de développement intégrés au navigateur). -<div class="warning"> -<p><strong>Attention :</strong> Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type <code>hidden</code> ne doit donc pas être utilisé comme mécanisme de sécurité.</p> -</div> +> **Attention :** Bien que la valeur ne soit pas affichée sur la page, elle est visible et modifiable par l'utilisateur si ce dernier utilise les outils de développements intégrés aux navigateurs (par exemple "Afficher la source"). Le type `hidden` ne doit donc pas être utilisé comme mécanisme de sécurité. -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> +## Attributs supplémentaires -<p>En complément des attributs communs à l'ensemble des éléments <code><input></code>, les champs masqués peuvent utiliser les attributs suivants :</p> +En complément des attributs communs à l'ensemble des éléments `<input>`, les champs masqués peuvent utiliser les attributs suivants : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("name")}}</code></td> - <td>À l'instar de l'ensemble des champs de saisie, ce sera le nom auquel associer la donnée lors de l'envoi du formulaire. Si la valeur spéciale <code>"_charset_"</code> est utilisée pour cet attribut, la valeur du champ sera l'encodage utilisé pour l'envoi du formulaire.</td> - </tr> - </tbody> -</table> +| Attribut | Description | +| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("name")}}` | À l'instar de l'ensemble des champs de saisie, ce sera le nom auquel associer la donnée lors de l'envoi du formulaire. Si la valeur spéciale `"_charset_"` est utilisée pour cet attribut, la valeur du champ sera l'encodage utilisé pour l'envoi du formulaire. | -<h3 id="htmlattrdef(name)">{{htmlattrdef("name")}}</h3> +### {{htmlattrdef("name")}} -<p>Cet attribut fait partie des attributs communs à l'ensemble des éléments <code><input></code> mais il possède un comportement particulier pour les champs masqués. En effet, si cet attribut utilise la valeur spéciale <code>"_charset_"</code>, la valeur du champ envoyée avec le formulaire sera l'encodage utilisé pour l'envoi du formulaire.</p> +Cet attribut fait partie des attributs communs à l'ensemble des éléments `<input>` mais il possède un comportement particulier pour les champs masqués. En effet, si cet attribut utilise la valeur spéciale `"_charset_"`, la valeur du champ envoyée avec le formulaire sera l'encodage utilisé pour l'envoi du formulaire. -<h2 id="Utiliser_les_valeurs_masquées_dans_les_formulaires">Utiliser les valeurs masquées dans les formulaires</h2> +## Utiliser les valeurs masquées dans les formulaires -<p>Comme évoqué ci-avant, les éléments <code><input type="hidden"</code>> peuvent être utilisés lorsque le formulaire sert à transmettre des données avec lesquelles l'utilisateur n'est pas censé intéragir.</p> +Comme évoqué ci-avant, les éléments `<input type="hidden"`> peuvent être utilisés lorsque le formulaire sert à transmettre des données avec lesquelles l'utilisateur n'est pas censé intéragir. -<h3 id="Suivre_les_modifications_apportées_au_contenu">Suivre les modifications apportées au contenu</h3> +### Suivre les modifications apportées au contenu -<p>Un usage fréquent de ces éléments est de garder un registre des données qui doivent être mises à jour dans une base de données lorsque le formulaire est envoyé. Le processus est généralement le suivant :</p> +Un usage fréquent de ces éléments est de garder un registre des données qui doivent être mises à jour dans une base de données lorsque le formulaire est envoyé. Le processus est généralement le suivant : -<ol> - <li>L'utilisateur édite du contenu (un billet de blog, une fiche d'un produit) en commençant par cliquer sur le bouton Éditer.</li> - <li>Le contenu à modifier est extrait de la base de données et est chargé dans le formulaire HTML afin que l'utilisateur puis appliquer les modifications voulues.</li> - <li>Après avoir éditer, l'utilisateur envoie le formulaire et les données mises à jour sont envoyées au serveur qui se charge d'appliquer cette mise à jour en base de données.</li> -</ol> +1. L'utilisateur édite du contenu (un billet de blog, une fiche d'un produit) en commençant par cliquer sur le bouton Éditer. +2. Le contenu à modifier est extrait de la base de données et est chargé dans le formulaire HTML afin que l'utilisateur puis appliquer les modifications voulues. +3. Après avoir éditer, l'utilisateur envoie le formulaire et les données mises à jour sont envoyées au serveur qui se charge d'appliquer cette mise à jour en base de données. -<p>Ici, lors de la deuxième étape, on peut récupérer l'identifiant de l'enregistrement et le placer dans un champ caché du formulaire. Lorsque le formulaire est envoyé à l'étape 3, l'identifiant est automatiquement envoyé au serveur avec le contenu. L'identifiant permet alors au serveur de connaître l'enregistrement de la base de données qui doit être mis à jour.</p> +Ici, lors de la deuxième étape, on peut récupérer l'identifiant de l'enregistrement et le placer dans un champ caché du formulaire. Lorsque le formulaire est envoyé à l'étape 3, l'identifiant est automatiquement envoyé au serveur avec le contenu. L'identifiant permet alors au serveur de connaître l'enregistrement de la base de données qui doit être mis à jour. -<p>Pour un exemple complet, voir la section {{anch("Exemples")}} ci-après.</p> +Pour un exemple complet, voir la section {{anch("Exemples")}} ci-après. -<h3 id="Contribuer_à_la_sécurité_d'un_site_web">Contribuer à la sécurité d'un site web</h3> +### Contribuer à la sécurité d'un site web -<p>Les champs masqués sont également employés afin de stocker des jetons de sécurité (aussi appelés « secrets ») afin d'améliorer la sécurité d'un site. Pour un formulaire sensible (par exemple le transfert d'argent d'un compte à un autre sur un site bancaire), le secret est généré par le serveur et intégré sur la page afin de prouver l'identité de l'utilisateur et que c'est bien le bon formulaire qui est utilisé pour effectuer le transfert.</p> +Les champs masqués sont également employés afin de stocker des jetons de sécurité (aussi appelés « secrets ») afin d'améliorer la sécurité d'un site. Pour un formulaire sensible (par exemple le transfert d'argent d'un compte à un autre sur un site bancaire), le secret est généré par le serveur et intégré sur la page afin de prouver l'identité de l'utilisateur et que c'est bien le bon formulaire qui est utilisé pour effectuer le transfert. -<p>Cela permet d'éviter le cas où quelqu'un crée un faux site et un faux formulaire pour transférer de l'argent sur le mauvais compte (c'est ce qu'on appelle <a href="https://fr.wikipedia.org/wiki/Cross-Site_Request_Forgery">Cross Site Request Forgery (CSRF)</a>).</p> +Cela permet d'éviter le cas où quelqu'un crée un faux site et un faux formulaire pour transférer de l'argent sur le mauvais compte (c'est ce qu'on appelle [Cross Site Request Forgery (CSRF)](https://fr.wikipedia.org/wiki/Cross-Site_Request_Forgery)). -<div class="note"> -<p><strong>Note :</strong> Comme indiqué précédemment, placer le secret dans un champ masqué ne le rend pas plus sécurisé. La composition, l'encodage de la clé et la vérification par le serveur sont autant d'étapes cruciales pour garantir la qualité du secret utilisé. Le champ masqué n'est finalement qu'un outil qui simplifie l'envoi de cette information au serveur lorsque l'utilisateur envoie le formulaire.</p> -</div> +> **Note :** Comme indiqué précédemment, placer le secret dans un champ masqué ne le rend pas plus sécurisé. La composition, l'encodage de la clé et la vérification par le serveur sont autant d'étapes cruciales pour garantir la qualité du secret utilisé. Le champ masqué n'est finalement qu'un outil qui simplifie l'envoi de cette information au serveur lorsque l'utilisateur envoie le formulaire. -<h2 id="Validation">Validation</h2> +## Validation -<p>Aucune contrainte de validation n'est appliquée sur ces valeurs.</p> +Aucune contrainte de validation n'est appliquée sur ces valeurs. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Voyons comment implémenter une version simple du formulaire d'édition décrit précédemment : on utilise un champ masqué pour mémoriser l'identifiant de la donnée qui est modifiée.</p> +Voyons comment implémenter une version simple du formulaire d'édition décrit précédemment : on utilise un champ masqué pour mémoriser l'identifiant de la donnée qui est modifiée. -<h3 id="HTML">HTML</h3> +### HTML -<p>Voici le fragment HTML pour le formulaire :</p> +Voici le fragment HTML pour le formulaire : -<pre class="brush: html"><form> - <div> - <label for="title">Titre du billet :</label> - <input type="text" id="title" name="title" value="Mon meilleur billet"> - </div> - <div> - <label for="content">Contenu :</label> - <textarea id="content" name="content" cols="60" rows="5"> +```html +<form> + <div> + <label for="title">Titre du billet :</label> + <input type="text" id="title" name="title" value="Mon meilleur billet"> + </div> + <div> + <label for="content">Contenu :</label> + <textarea id="content" name="content" cols="60" rows="5"> Voici le contenu de mon meilleur billet, j'espère que ça vous plaît ! - </textarea> - </div> - <div> - <button type="submit">Mettre à jour le billet</button> - </div> - <input type="hidden" id="postId" name="postId" value="34657"> -</form></pre> + </textarea> + </div> + <div> + <button type="submit">Mettre à jour le billet</button> + </div> + <input type="hidden" id="postId" name="postId" value="34657"> +</form> +``` -<h3 id="CSS">CSS</h3> +### CSS -<p>Ajoutons quelques éléments de mise en forme :</p> +Ajoutons quelques éléments de mise en forme : -<pre class="brush: css">html { +```css +html { font-family: sans-serif; } @@ -146,85 +130,69 @@ input, textarea { textarea { height: 60px; -}</pre> +} +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<p>Le serveur génèrera la page HTML avec l'identifiant <code>"postID"</code> qui contient l'identifiant du billet de la base de données. Lorsque l'utilisateur termine l'édition, c'est le navigateur qui envoie cette donnée au serveur ainsi que les autres données du formulaire. Aucun code JavaScript n'est nécessaire pour gérer cela.</p> +Le serveur génèrera la page HTML avec l'identifiant `"postID"` qui contient l'identifiant du billet de la base de données. Lorsque l'utilisateur termine l'édition, c'est le navigateur qui envoie cette donnée au serveur ainsi que les autres données du formulaire. Aucun code JavaScript n'est nécessaire pour gérer cela. -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample('Exemples', '100%', 200)}}</p> +{{EmbedLiveSample('Exemples', '100%', 200)}} -<div class="note"> -<p><strong>Note :</strong> Vous pouvez consulter l'exemple sur GitHub (cf. <a href="https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html">le code source</a> et <a href="https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html">la démonstration <em>live</em></a>).</p> -</div> +> **Note :** Vous pouvez consulter l'exemple sur GitHub (cf. [le code source](https://github.com/mdn/learning-area/blob/master/html/forms/hidden-input-example/index.html) et [la démonstration _live_](https://mdn.github.io/learning-area/html/forms/hidden-input-example/index.html)). -<p>Lorsque le formulaire est envoyé, les données envoyées au serveur ressembleront à :</p> +Lorsque le formulaire est envoyé, les données envoyées au serveur ressembleront à : -<p><code>title=Mon+meilleur+billet&content=Le+contenu+de+mon+meilleur+article.+J'espère+qu'il+vous+plaît!&postId=34657</code></p> +`title=Mon+meilleur+billet&content=Le+contenu+de+mon+meilleur+article.+J'espère+qu'il+vous+plaît!&postId=34657` -<p>Bien que le champ masqué soit invisible sur la page, il fait toujours partie des données envoyées.</p> +Bien que le champ masqué soit invisible sur la page, il fait toujours partie des données envoyées. -<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 la valeur de la donnée masquée qu'on souhaite envoyer au serveur.</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>Aucun.</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td>{{htmlattrxref("autocomplete", "input")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>value</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>Aucune.</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères ({{domxref("DOMString")}}) qui + représente la valeur de la donnée masquée qu'on souhaite envoyer au + serveur. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>Aucun.</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>Aucune.</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#hidden-state-(type=hidden)', '<input type="hidden">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.2', 'sec-forms.html#hidden-state-typehidden', '<input type="hidden">')}}</td> - <td>{{Spec2('HTML5.2')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', 'forms.html#hidden-state-(type=hidden)', '<input type="hidden">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | +| {{SpecName('HTML5.2', 'sec-forms.html#hidden-state-typehidden', '<input type="hidden">')}} | {{Spec2('HTML5.2')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-hidden")}}</p> +{{Compat("html.elements.input.input-hidden")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li>L'interface DOM {{domxref("HTMLInputElement")}}</li> -</ul> +- [Guide sur les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) +- {{HTMLElement("input")}} +- L'interface DOM {{domxref("HTMLInputElement")}} diff --git a/files/fr/web/html/element/input/image/index.md b/files/fr/web/html/element/input/image/index.md index 4d3fac19f5..03ffa06680 100644 --- a/files/fr/web/html/element/input/image/index.md +++ b/files/fr/web/html/element/input/image/index.md @@ -9,277 +9,223 @@ tags: - Web translation_of: Web/HTML/Element/input/image --- -<div>{{HTMLRef}}</div> - -<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>image</strong></code> sont utilisés afin de créer des boutons graphiques pour l'envoi de formulaire. Autrement dit, le bouton d'envoi aura la forme d'une image plutôt que de contenir un texte.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}}</div> - -<h2 id="Valeur">Valeur</h2> - -<p>Les éléments <code><input type="image"></code> n'acceptent pas de valeur pour l'attribut <code>value</code>. Le chemin vers l'image à afficher est indiqué grâce à l'attribut <code>src</code>.</p> - -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> - -<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons <code>image</code> permettent d'utiliser les attributs suivants :</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribute</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("alt")}}</code></td> - <td>Texte de remplacement lorsque l'image ne peut pas être affichée</td> - </tr> - <tr> - <td><code>{{anch("formaction")}}</code></td> - <td>L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.</td> - </tr> - <tr> - <td><code>{{anch("formenctype")}}</code></td> - <td>Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.</td> - </tr> - <tr> - <td><code>{{anch("formmethod")}}</code></td> - <td>La méthode HTTP à utiliser pour envoyer le formulaire.</td> - </tr> - <tr> - <td><code>{{anch("formnovalidate")}}</code></td> - <td>Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">aux contraintes de validation</a> avant l'envoi des données au serveur.</td> - </tr> - <tr> - <td><code>{{anch("formtarget")}}</code></td> - <td>Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.</td> - </tr> - <tr> - <td><code>{{anch("height")}}</code></td> - <td>La hauteur, en pixels CSS, à laquelle dessiner l'image</td> - </tr> - <tr> - <td><code>{{anch("src")}}</code></td> - <td>L'URL à partir de laquelle charger l'image</td> - </tr> - <tr> - <td><code>{{anch("width")}}</code></td> - <td>La largeur, en pixels CSS, à laquelle dessiner l'image</td> - </tr> - </tbody> -</table> +{{HTMLRef}} -<h3 id="htmlattrdefalt">{{htmlattrdef("alt")}}</h3> +Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`image`** sont utilisés afin de créer des boutons graphiques pour l'envoi de formulaire. Autrement dit, le bouton d'envoi aura la forme d'une image plutôt que de contenir un texte. -<p>L'attribut <code>alt</code> fournit un texte alternatif à utiliser comme libellé pour le bouton lorsque l'image ne peut être chargée ou affichée (que ce soit en raison d'une erreur ou de la configuration de l'agent utilisateur). Si cet attribut est fourni, ce doit être une chaîne de caractères non vide et qui décrit clairement le rôle du bouton.</p> +{{EmbedInteractiveExample("pages/tabbed/input-image.html", "tabbed-standard")}} -<p>Ainsi, si on a un bouton graphique avec une image et/ou une incône avec le texte <em>Se connecter</em>. Le texte alternatif porté par <code>alt</code> devrait être proche de <code>"Se connecter"</code>.</p> +## Valeur -<div class="note"> -<p><strong>Note :</strong> Bien que, d'un point de vue technique, l'attribut <code>alt</code> soit optionnel. Il faut toujours en inclure un afin d'améliorer l'accessibilité et l'utilisabilité du bouton.</p> -</div> +Les éléments `<input type="image">` n'acceptent pas de valeur pour l'attribut `value`. Le chemin vers l'image à afficher est indiqué grâce à l'attribut `src`. -<p>D'un point de vue fonctionnel, l'attribut <code>alt</code> pour <code><input type="image"></code> fonctionne de la même façon que l'attribut {{htmlattrdef("alt", "img")}} associé aux éléments {{HTMLElement("img")}}.</p> +## Attributs supplémentaires -<h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3> +En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons `image` permettent d'utiliser les attributs suivants : -<p>Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ <code><input></code>.</p> +| Attribute | Description | +| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("alt")}}` | Texte de remplacement lorsque l'image ne peut pas être affichée | +| `{{anch("formaction")}}` | L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini. | +| `{{anch("formenctype")}}` | Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire. | +| `{{anch("formmethod")}}` | La méthode HTTP à utiliser pour envoyer le formulaire. | +| `{{anch("formnovalidate")}}` | Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis [aux contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) avant l'envoi des données au serveur. | +| `{{anch("formtarget")}}` | Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire. | +| `{{anch("height")}}` | La hauteur, en pixels CSS, à laquelle dessiner l'image | +| `{{anch("src")}}` | L'URL à partir de laquelle charger l'image | +| `{{anch("width")}}` | La largeur, en pixels CSS, à laquelle dessiner l'image | -<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> et {{HTMLElement("button")}}.</p> +### {{htmlattrdef("alt")}} -<h3 id="htmlattrdefformenctype">{{htmlattrdef("formenctype")}}</h3> +L'attribut `alt` fournit un texte alternatif à utiliser comme libellé pour le bouton lorsque l'image ne peut être chargée ou affichée (que ce soit en raison d'une erreur ou de la configuration de l'agent utilisateur). Si cet attribut est fourni, ce doit être une chaîne de caractères non vide et qui décrit clairement le rôle du bouton. -<p>Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :</p> +Ainsi, si on a un bouton graphique avec une image et/ou une incône avec le texte _Se connecter_. Le texte alternatif porté par `alt` devrait être proche de `"Se connecter"`. -<dl> - <dt><code>application/x-www-form-urlencoded</code></dt> - <dd>Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. <strong>Cette valeur est la valeur par défaut.</strong></dd> - <dt><code>multipart/form-data</code></dt> - <dd>Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'<em>uploader</em>des fichiers. Cet encodage <em>doit</em> être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} <code>"file"</code> (<code><a href="/fr/docs/Web/HTML/Element/input/file"><input type="file"></a></code>).</dd> - <dt><code>text/plain</code></dt> - <dd>Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.</dd> -</dl> +> **Note :** Bien que, d'un point de vue technique, l'attribut `alt` soit optionnel. Il faut toujours en inclure un afin d'améliorer l'accessibilité et l'utilisabilité du bouton. -<p>Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.</p> +D'un point de vue fonctionnel, l'attribut `alt` pour `<input type="image">` fonctionne de la même façon que l'attribut {{htmlattrdef("alt", "img")}} associé aux éléments {{HTMLElement("img")}}. -<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> et {{HTMLElement("button")}}.</p> +### {{htmlattrdef("formaction")}} -<h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3> +Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ `<input>`. -<p>Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :</p> +Cet attribut est également disponible pour les éléments [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}. -<dl> - <dt><code>get</code></dt> - <dd>Une URL est construite en commençant avec l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec <code>formenctype</code> ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. <strong>C'est la valeur par défaut.</strong></dd> - <dt><code>post</code></dt> - <dd>Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour <code>get</code>) et les pièces jointes sous forme de fichiers.</dd> - <dt><code>dialog</code></dt> - <dd>Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.</dd> -</dl> +### {{htmlattrdef("formenctype")}} -<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> et {{HTMLElement("button")}}.</p> +Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées : -<h3 id="htmlattrdefformnovalidate">{{htmlattrdef("formnovalidate")}}</h3> +- `application/x-www-form-urlencoded` + - : Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. **Cette valeur est la valeur par défaut.** +- `multipart/form-data` + - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). +- `text/plain` + - : Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées. -<p>Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.</p> +Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire. -<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> et {{HTMLElement("button")}}.</p> +Cet attribut est également disponible pour les éléments [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}. -<h3 id="htmlattrdefformtarget">{{htmlattrdef("formtarget")}}</h3> +### {{htmlattrdef("formmethod")}} -<p>Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom <strong>d'un contexte de navigation</strong> (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.</p> +Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont : -<p>En complément des noms des onglets, fenêtres, <em>iframes</em>, quelques mots-clés spéciaux peuvent être utilisés :</p> +- `get` + - : Une URL est construite en commençant avec l'URL fournie par l'attribut `formaction` ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec `formenctype` ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. **C'est la valeur par défaut.** +- `post` + - : Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut `formaction` ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour `get`) et les pièces jointes sous forme de fichiers. +- `dialog` + - : Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise. -<dl> - <dt><code>_self</code></dt> - <dd>La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. <strong>Cette valeur est la valeur par défaut.</strong></dd> - <dt><code>_blank</code></dt> - <dd>La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.</dd> - <dt><code>_parent</code></dt> - <dd>La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de <code>_self</code>.</dd> - <dt><code>_top</code></dt> - <dd>La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de <code>_self</code>.</dd> -</dl> +Cet attribut est également disponible pour les éléments [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}. -<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/submit"><input type="submit"></a></code> et {{HTMLElement("button")}}.</p> +### {{htmlattrdef("formnovalidate")}} -<h3 id="htmlattrdefheight">{{htmlattrdef("height")}}</h3> +Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent. -<p>Une valeur numérique qui indique la hauteur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut <code>src</code>.</p> +Cet attribut est également disponible pour les éléments [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}. -<h3 id="htmlattrdefsrc">{{htmlattrdef("src")}}</h3> +### {{htmlattrdef("formtarget")}} -<p>Une chaîne de caractères qui définit l'URL du fichier image à afficher pour le bouton. Lorsque l'utilisateur interagit avec l'image, le champ est géré comme tout autre bouton <code><input></code>.</p> +Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom **d'un contexte de navigation** (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent. -<h3 id="htmlattrdefwidth">{{htmlattrdef("width")}}</h3> +En complément des noms des onglets, fenêtres, _iframes_, quelques mots-clés spéciaux peuvent être utilisés : -<p>Une valeur numérique qui indique la largeur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut <code>src</code>.</p> +- `_self` + - : La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. **Cette valeur est la valeur par défaut.** +- `_blank` + - : La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur. +- `_parent` + - : La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de `_self`. +- `_top` + - : La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de `_self`. -<h2 id="Attributs_obsolètes">Attributs obsolètes</h2> +Cet attribut est également disponible pour les éléments [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) et {{HTMLElement("button")}}. -<p>L'attribut suivant a été défini en HTML4 pour les champs de type <code>image</code> mais n'a pas été implémenté par l'ensemble des navigateurs et a été déprécié depuis :</p> +### {{htmlattrdef("height")}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribute</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("usemap")}}</code></td> - <td>Le nom d'une carte d'images cliquables ({{HTMLElement("map")}}) à utiliser pour l'image. Cet élément est obsolète et c'est l'élément {{HTMLElement("img")}} qui devrait être utilisé pour créer des cartes à la place.</td> - </tr> - </tbody> -</table> +Une valeur numérique qui indique la hauteur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut `src`. + +### {{htmlattrdef("src")}} + +Une chaîne de caractères qui définit l'URL du fichier image à afficher pour le bouton. Lorsque l'utilisateur interagit avec l'image, le champ est géré comme tout autre bouton `<input>`. + +### {{htmlattrdef("width")}} + +Une valeur numérique qui indique la largeur, exprimée en pixels CSS, pour dessiner l'image fournie par l'attribut `src`. + +## Attributs obsolètes + +L'attribut suivant a été défini en HTML4 pour les champs de type `image` mais n'a pas été implémenté par l'ensemble des navigateurs et a été déprécié depuis : + +| Attribute | Description | +| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("usemap")}}` | Le nom d'une carte d'images cliquables ({{HTMLElement("map")}}) à utiliser pour l'image. Cet élément est obsolète et c'est l'élément {{HTMLElement("img")}} qui devrait être utilisé pour créer des cartes à la place. | + +### {{htmlattrdef("usemap")}} + +Lorsque l'attribut `usemap` est utilisé, sa valeur doit être le nom d'un élément {{HTMLElement("map")}} qui définit l'image avec des régions cliquables à utiliser. Cette utilisation est obsolète et l'élément {{HTMLElement("img")}} devrait être utilisé pour les images avec des zones cliquables. -<h3 id="htmlattrdefusemap">{{htmlattrdef("usemap")}}</h3> +## Utiliser les contrôles `<input type="image">` -<p>Lorsque l'attribut <code>usemap</code> est utilisé, sa valeur doit être le nom d'un élément {{HTMLElement("map")}} qui définit l'image avec des régions cliquables à utiliser. Cette utilisation est obsolète et l'élément {{HTMLElement("img")}} devrait être utilisé pour les images avec des zones cliquables.</p> +Un élément `<input type="image">` est [un élément remplacé](/fr/docs/Web/CSS/Élément_remplacé) (c'est-à-dire un élément dont le contenu n'est pas généré ou géré par le CSS) et se comporte comme un élément {{htmlelement("img")}} tout en permettant [d'envoyer un formulaire (comme un élément `<input type="submit">`)](/fr/docs/Web/HTML/Element/Input/submit). -<h2 id="Utiliser_les_contrôles_<input_typeimage>">Utiliser les contrôles <code><input type="image"></code></h2> +### Les fonctionnalités essentielles -<p>Un élément <code><input type="image"></code> est <a href="/fr/docs/Web/CSS/Élément_remplacé">un élément remplacé</a> (c'est-à-dire un élément dont le contenu n'est pas généré ou géré par le CSS) et se comporte comme un élément {{htmlelement("img")}} tout en permettant <a href="/fr/docs/Web/HTML/Element/Input/submit">d'envoyer un formulaire (comme un élément <code><input type="submit"></code>)</a>.</p> +Prenons un exemple simple qui utilise les attributs strictement nécessaires (qui fonctionnent de la même façon que pour un élément `<img>`) : -<h3 id="Les_fonctionnalités_essentielles">Les fonctionnalités essentielles</h3> +```html +<input id="image" type="image" width="100" height="30" alt="Login" + src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"> +``` -<p>Prenons un exemple simple qui utilise les attributs strictement nécessaires (qui fonctionnent de la même façon que pour un élément <code><img></code>) :</p> +{{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}} -<pre class="brush: html"><input id="image" type="image" width="100" height="30" alt="Login" - src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"></pre> +- L'attribut {{htmlattrxref("src", "input")}} indique le chemin de l'image qu'on souhaite afficher sur le bouton. +- L'attribut {{htmlattrxref("alt", "input")}} fournit un texte alternatif à l'image qui peut notamment être utilisé par un lecteur d'écran pour indiquer ce à quoi correspond l'image. Ce texte sera également affiché si l'image ne peut pas être affichée (par exemple si le chemin est incorrect). Si possible, il est préférable d'utiliser le texte que vous auriez utilisé si vous aviez mis en place un élément \<input type="`submit">`. +- Les attributs {{htmlattrxref("width", "input")}} et {{htmlattrxref("height", "input")}} sont utilisés afin d'indiquer la largeur et la hauteur, exprimées en pixels, avec lesquelles représenter l'image. Le bouton aura la même taille que l'image. S'il est nécessaire que le bouton soit plus gros que l'image, on pourra utiliser des règles CSS (par exemple avec la propriété {{cssxref("padding")}}). Si un seul des deux attributs est fourni, la seconde dimension sera automatiquement ajustée afin que l'image conserve ses proportions originelles. -<p>{{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}}</p> +### Surcharger le comportement par défaut -<ul> - <li>L'attribut {{htmlattrxref("src", "input")}} indique le chemin de l'image qu'on souhaite afficher sur le bouton.</li> - <li>L'attribut {{htmlattrxref("alt", "input")}} fournit un texte alternatif à l'image qui peut notamment être utilisé par un lecteur d'écran pour indiquer ce à quoi correspond l'image. Ce texte sera également affiché si l'image ne peut pas être affichée (par exemple si le chemin est incorrect). Si possible, il est préférable d'utiliser le texte que vous auriez utilisé si vous aviez mis en place un élément <input type="<code>submit"></code>.</li> - <li>Les attributs {{htmlattrxref("width", "input")}} et {{htmlattrxref("height", "input")}} sont utilisés afin d'indiquer la largeur et la hauteur, exprimées en pixels, avec lesquelles représenter l'image. Le bouton aura la même taille que l'image. S'il est nécessaire que le bouton soit plus gros que l'image, on pourra utiliser des règles CSS (par exemple avec la propriété {{cssxref("padding")}}). Si un seul des deux attributs est fourni, la seconde dimension sera automatiquement ajustée afin que l'image conserve ses proportions originelles.</li> -</ul> +Les éléments `<input type="image">` — comme les boutons [`<input type="submit">`](/fr/docs/Web/HTML/Element/input/submit) — prennent en charge différents attributs qui permettent d'adapter le compotement du formulaire : -<h3 id="Surcharger_le_comportement_par_défaut">Surcharger le comportement par défaut</h3> +- {{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}} + - : Cet attribut indique l'URI d'un programme qui traite les informations envoyées par l'élément `<input>`. Cet attribut surcharge l'attribut {{htmlattrxref("action","form")}} du formulaire associé. -<p>Les éléments <code><input type="image"></code> — comme les boutons <a href="/fr/docs/Web/HTML/Element/input/submit"><code><input type="submit"></code></a> — prennent en charge différents attributs qui permettent d'adapter le compotement du formulaire :</p> +<!----> -<dl> - <dt>{{htmlattrdef("formaction")}} {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut indique l'URI d'un programme qui traite les informations envoyées par l'élément <code><input></code>. Cet attribut surcharge l'attribut {{htmlattrxref("action","form")}} du formulaire associé.</dd> -</dl> +- {{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}} -<dl> - <dt>{{htmlattrdef("formenctype")}} {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut définit le type de contenu utilisé pour envoyer le formulaire au serveur. Les valeurs possibles sont : - <ul> - <li><code>application/x-www-form-urlencoded</code> : la valur par défaut si l'attribut n'est pas utilisé.</li> - <li><code>text/plain</code>.</li> - </ul> + - : Cet attribut définit le type de contenu utilisé pour envoyer le formulaire au serveur. Les valeurs possibles sont : - <p>Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("enctype","form")}} du formulaire associé.</p> - </dd> - <dt>{{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}}</dt> - <dd>Cet attribut indique la méthode HTTP utilisée par le navigateur afin d'envoyer le formulaire. Les valeurs possibles sont : - <ul> - <li><code>post</code> : les données du formulaire sont incluses dans le corps du formulaire puis envoyées au serveur.</li> - <li><code>get</code> : les données du formulaire sont ajoutées après l'URI de l'attribut <code><strong>form</strong></code> avec un point d'interrogation (« ? ») comme séparateur. L'URI alors obtenue est envoyée au serveur. Cette méthode doit uniquement être utilisée lorsque le formulaire n'entraîne aucun effet de bord et que les données ne contiennent que des caractères ASCII.</li> - </ul> + - `application/x-www-form-urlencoded` : la valur par défaut si l'attribut n'est pas utilisé. + - `text/plain`. - <p>Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("method","form")}} du formulaire associé.</p> - </dd> - <dt>{{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}}</dt> - <dd>Un attribut booléen qui indique si le formulaire ne doit pas être validé avant d'être envoyé. Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("novalidate","form")}} du formulaire associé.</dd> - <dt>{{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}}</dt> - <dd>Un nom ou un mot-clé qui indique où la réponse doit être affichée après que le formulaire a été envoyé. Cette valeur est le nom ou un mot-clé qui désigne un contexte de navigation (par exemple un onglet, une fenêtre ou une <em>iframe</em>). Si cet attribut est indiqué, il surcharge l'attribut {{htmlattrxref("target", "form")}} du formulaire associé. Les mots-clés suivants ont des significations particulières : - <ul> - <li>_<code>self</code> : la réponse est chargée dans le même contexte de navigation que le contexte courant. C'est la valeur par défaut si l'attribut n'est pas utilisé.</li> - <li><code>_blank</code> : la réponse est chargée dans un nouveau contexte de navigation anonyme.</li> - <li><code>_parent</code> : la réponse est chargée dans le contexte navigation qui est le parent du contexte courant. S'il n'y a aucun contexte parent, cette valeur se comportera comme la valeur <code>_self</code>.</li> - <li><code>_top</code> : la réponse est chargée dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte qui est un ancêtre du contexte courant et qui n'a pas de contexte parent). Si le contexte courant n'a pas de parent, cette valeur se comportera comme <code>_self</code>.</li> - </ul> - </dd> -</dl> + Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("enctype","form")}} du formulaire associé. -<h3 id="Utiliser_les_coordonnées_x_et_y">Utiliser les coordonnées <code>x</code> et <code>y</code></h3> +- {{htmlattrdef("formmethod")}} {{HTMLVersionInline("5")}} -<p>Lorsqu'on envoie un formulaire avec un bouton <code><input type="image"></code>, les coordonnées (<code>x</code> et <code>y</code>) du clic sur l'image sont également envoyées au serveur (<a href="https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html">voir cet exemple</a>).</p> + - : Cet attribut indique la méthode HTTP utilisée par le navigateur afin d'envoyer le formulaire. Les valeurs possibles sont : -<p>Lorsqu'on clique sur l'image pour envoyer le formulaire, vous pourrez voir que l'URL contient deux autres paramètres (par exemple <code>"?x=52&y=55"</code>). Si le contrôle possède un attribut {{htmlattrxref("name", "input")}}, ce nom sera utilisé comme préfixe. Ainsi, si <code>name</code> vaut <code>"position"</code>, les coordonnées du clic seront envoyées dans l'URL avec le format suivant : <code>"?position.x=52&position.y=55"</code>. Ce préfixe est également appliqué aux autres attributs.</p> + - `post` : les données du formulaire sont incluses dans le corps du formulaire puis envoyées au serveur. + - `get` : les données du formulaire sont ajoutées après l'URI de l'attribut **`form`** avec un point d'interrogation (« ? ») comme séparateur. L'URI alors obtenue est envoyée au serveur. Cette méthode doit uniquement être utilisée lorsque le formulaire n'entraîne aucun effet de bord et que les données ne contiennent que des caractères ASCII. -<p>Les coordonnées X et Y sont calculées en pixels à partir du coin en haut à gauche de l'image ete peuvent être utilisées lorsque l'emplacement du clic possède une quelconque importance (par exemple une carte). Ces coordonnées peuvent donc être utilisées côté serveur afin de renvoyer des informations pertinentes (par exemple des informations quant aux lieux alentour).</p> + Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("method","form")}} du formulaire associé. -<h3 id="Ajuster_la_position_et_léchelle_de_limage">Ajuster la position et l'échelle de l'image</h3> +- {{htmlattrdef("formnovalidate")}} {{HTMLVersionInline("5")}} + - : Un attribut booléen qui indique si le formulaire ne doit pas être validé avant d'être envoyé. Si cet attribut est utilisé, il surcharge l'attribut {{htmlattrxref("novalidate","form")}} du formulaire associé. +- {{htmlattrdef("formtarget")}} {{HTMLVersionInline("5")}} -<p>Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster la position de l'image au sein de la boîte fournie par l'élément <code><input></code>. La propriété CSS {{cssxref("object-fit")}} peut être utilisée afin de contrôler la façon dont l'image est redimensionnée pour tenir dans la boîte. On peut donc ajuster le cadre grâce aux attributs <code>width</code> et <code>height</code> afin de créer un espace fixe sur le document puis ajuster la façon dont l'image occupe cet espace.</p> + - : Un nom ou un mot-clé qui indique où la réponse doit être affichée après que le formulaire a été envoyé. Cette valeur est le nom ou un mot-clé qui désigne un contexte de navigation (par exemple un onglet, une fenêtre ou une _iframe_). Si cet attribut est indiqué, il surcharge l'attribut {{htmlattrxref("target", "form")}} du formulaire associé. Les mots-clés suivants ont des significations particulières : -<h2 id="Exemples">Exemples</h2> + - \_`self` : la réponse est chargée dans le même contexte de navigation que le contexte courant. C'est la valeur par défaut si l'attribut n'est pas utilisé. + - `_blank` : la réponse est chargée dans un nouveau contexte de navigation anonyme. + - `_parent` : la réponse est chargée dans le contexte navigation qui est le parent du contexte courant. S'il n'y a aucun contexte parent, cette valeur se comportera comme la valeur `_self`. + - `_top` : la réponse est chargée dans le contexte de navigation de plus haut niveau (c'est-à-dire le contexte qui est un ancêtre du contexte courant et qui n'a pas de contexte parent). Si le contexte courant n'a pas de parent, cette valeur se comportera comme `_self`. -<h3 id="Un_formulaire_de_connexion">Un formulaire de connexion</h3> +### Utiliser les coordonnées `x` et `y` -<p>Dans l'exemple suivant, on insère le bouton vu précedemment dans un formulaire de connexion.</p> +Lorsqu'on envoie un formulaire avec un bouton `<input type="image">`, les coordonnées (`x` et `y`) du clic sur l'image sont également envoyées au serveur ([voir cet exemple](https://mdn.github.io/learning-area/html/forms/image-type-example/xy-coordinates-example.html)). -<p>{{EmbedLiveSample('Un_formulaire_de_connexion', 600, 170)}}</p> +Lorsqu'on clique sur l'image pour envoyer le formulaire, vous pourrez voir que l'URL contient deux autres paramètres (par exemple `"?x=52&y=55"`). Si le contrôle possède un attribut {{htmlattrxref("name", "input")}}, ce nom sera utilisé comme préfixe. Ainsi, si `name` vaut `"position"`, les coordonnées du clic seront envoyées dans l'URL avec le format suivant : `"?position.x=52&position.y=55"`. Ce préfixe est également appliqué aux autres attributs. -<p>Voici le fragment de code HTML utilisé :</p> +Les coordonnées X et Y sont calculées en pixels à partir du coin en haut à gauche de l'image ete peuvent être utilisées lorsque l'emplacement du clic possède une quelconque importance (par exemple une carte). Ces coordonnées peuvent donc être utilisées côté serveur afin de renvoyer des informations pertinentes (par exemple des informations quant aux lieux alentour). -<pre class="brush: html"><form> - <p>Connectez-vous</p> - <div> - <label for="userId">Identifiant</label> - <input type="text" id="userId" name="userId"> - </div> - <div> - <label for="pwd">Mot de passe</label> - <input type="password" id="pwd" name="pwd"> - </div> - <div> - <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"> - </div> -</form></pre> +### Ajuster la position et l'échelle de l'image -<p>Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :</p> +Il est possible d'utiliser la propriété CSS {{cssxref("object-position")}} afin d'ajuster la position de l'image au sein de la boîte fournie par l'élément `<input>`. La propriété CSS {{cssxref("object-fit")}} peut être utilisée afin de contrôler la façon dont l'image est redimensionnée pour tenir dans la boîte. On peut donc ajuster le cadre grâce aux attributs `width` et `height` afin de créer un espace fixe sur le document puis ajuster la façon dont l'image occupe cet espace. -<pre class="brush: css">div { +## Exemples + +### Un formulaire de connexion + +Dans l'exemple suivant, on insère le bouton vu précedemment dans un formulaire de connexion. + +{{EmbedLiveSample('Un_formulaire_de_connexion', 600, 170)}} + +Voici le fragment de code HTML utilisé : + +```html +<form> + <p>Connectez-vous</p> + <div> + <label for="userId">Identifiant</label> + <input type="text" id="userId" name="userId"> + </div> + <div> + <label for="pwd">Mot de passe</label> + <input type="password" id="pwd" name="pwd"> + </div> + <div> + <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"> + </div> +</form> +``` + +Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments : + +```css +div { margin-bottom: 10px; } @@ -288,34 +234,38 @@ label { width: 70px; text-align: right; padding-right: 10px; -}</pre> +} +``` -<h3 id="Ajuster_la_position_et_l’échelle_de_l’image">Ajuster la position et l’échelle de l’image</h3> +### Ajuster la position et l’échelle de l’image -<p>Dans l'exemple qui suit, on adapte l'exemple précédent afin de disposer de plus d'espace pour l'image et on ajuste la taille et la position de l'image grâce à {{cssxref("object-fit")}} et {{cssxref("object-position")}}.</p> +Dans l'exemple qui suit, on adapte l'exemple précédent afin de disposer de plus d'espace pour l'image et on ajuste la taille et la position de l'image grâce à {{cssxref("object-fit")}} et {{cssxref("object-position")}}. -<p>{{EmbedLiveSample("Ajuster_la_position_et_l’échelle_de_l’image", 600, 300)}}</p> +{{EmbedLiveSample("Ajuster_la_position_et_l’échelle_de_l’image", 600, 300)}} -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><form> - <p>Connectez-vous</p> - <div> - <label for="userId">Identifiant</label> - <input type="text" id="userId" name="userId"> - </div> - <div> - <label for="pwd">Mot de passe</label> - <input type="password" id="pwd" name="pwd"> - </div> - <div> - <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"> - </div> -</form></pre> +```html +<form> + <p>Connectez-vous</p> + <div> + <label for="userId">Identifiant</label> + <input type="text" id="userId" name="userId"> + </div> + <div> + <label for="pwd">Mot de passe</label> + <input type="password" id="pwd" name="pwd"> + </div> + <div> + <input id="image" type="image" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png" alt="Login" width="100"> + </div> +</form> +``` -<h4 id="CSS">CSS</h4> +#### CSS -<pre class="brush: css">div { +```css +div { margin-bottom: 10px; } @@ -331,65 +281,60 @@ label { object-fit: contain; background-color: #ddd; } -</pre> +``` -<p>On voit ici <code>object-position</code> qui permet de dessiner l'image à paritr du coin supérieur droit de l'élément et <code>object-fit</code> qui vaut <code>contain</code> : l'image est ainsi dessinée avec la taille la plus grande possible tout en respectant ses proportions et en ne dépassant pas de la boîte. L'arrière-plan de l'image sera visible s'il y a des zones non-couvertes.</p> +On voit ici `object-position` qui permet de dessiner l'image à paritr du coin supérieur droit de l'élément et `object-fit` qui vaut `contain` : l'image est ainsi dessinée avec la taille la plus grande possible tout en respectant ses proportions et en ne dépassant pas de la boîte. L'arrière-plan de l'image sera visible s'il y a des zones non-couvertes. -<h2 id="Résumé_technique">Résumé technique</h2> +## Résumé technique <table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td>Aucune, l'attribut <code>value</code> ne devrait pas être utilisé.</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>Aucun.</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td>{{htmlattrxref("alt", "input")}}, {{htmlattrxref("src", "input")}}, {{htmlattrxref("width", "input")}}, {{htmlattrxref("height", "input")}}, {{htmlattrxref("formaction", "input")}}, {{htmlattrxref("formenctype", "input")}}, {{htmlattrxref("formmethod", "input")}}, {{htmlattrxref("formnovalidate", "input")}}, {{htmlattrxref("formtarget", "input")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td>Aucun.</td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>Aucune.</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Aucune, l'attribut <code>value</code> ne devrait pas être utilisé. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>Aucun.</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + {{htmlattrxref("alt", "input")}}, + {{htmlattrxref("src", "input")}}, + {{htmlattrxref("width", "input")}}, + {{htmlattrxref("height", "input")}}, + {{htmlattrxref("formaction", "input")}}, + {{htmlattrxref("formenctype", "input")}}, + {{htmlattrxref("formmethod", "input")}}, + {{htmlattrxref("formnovalidate", "input")}}, + {{htmlattrxref("formtarget", "input")}} + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td>Aucun.</td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>Aucune.</td> + </tr> + </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '<input type="image">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '<input type="image">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'forms.html#image-button-state-(type=image)', '<input type="image">')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#image-button-state-%28type=image%29', '<input type="image">')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-image")}}</p> +{{Compat("html.elements.input.input-image")}} -<h2 id="Voir_ausi">Voir ausi</h2> +## Voir ausi -<ul> - <li>L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente.</li> -</ul> +- L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente. diff --git a/files/fr/web/html/element/input/index.md b/files/fr/web/html/element/input/index.md index 54df76bc7d..0d528c5c9a 100644 --- a/files/fr/web/html/element/input/index.md +++ b/files/fr/web/html/element/input/index.md @@ -10,449 +10,405 @@ tags: - Web translation_of: Web/HTML/Element/input --- -<div>{{HTMLRef}}</div> - -<p>L'élément HTML <strong><code><input></code></strong> est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l'utilisateur de saisir des données. Les saisies possibles et le comportement de l'élément <code><input></code> dépend fortement de la valeur indiquée dans son attribut <code>type</code>.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}}</div> - -<h2 id="Les_différents_types_de_champs_<input>">Les différents types de champs <code><input></code></h2> - -<p>La façon dont un élément <code><input></code> fonctionne dépend grandement de la valeur de son attribut <code>type</code>. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut <code>type</code> n'est pas présent, il aura la valeur implicite <code>text</code>.</p> - -<p>Les types de champs disponibles sont :</p> - -<ul> - <li><code>{{HTMLElement("input/button", "button")}}</code> : un bouton sans comportement défini.</li> - <li><code>{{HTMLElement("input/checkbox", "checkbox")}}</code> : une case à cocher qui permet de sélectionner/déselectionner une valeur</li> - <li><code>{{HTMLElement("input/color", "color")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de définir une couleur.</li> - <li><code>{{HTMLElement("input/date", "date")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une année).</li> - <li><code>{{HTMLElement("input/datetime-local", "datetime-local")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date et une heure (sans fuseau horaire).</li> - <li><code>{{HTMLElement("input/email", "email")}}</code> : {{HTMLVersionInline("5")}} un champ qui permet de saisir une adresse éléctronique.</li> - <li><code>{{HTMLElement("input/file", "file")}}</code> : un contrôle qui permet de sélectionner un fichier. L'attribut <code><strong>accept</strong></code> définit les types de fichiers qui peuvent être sélectionnés.</li> - <li><code>{{HTMLElement("input/hidden", "hidden")}}</code> : un contrôle qui n'est pas affiché mais dont la valeur est envoyée au serveur.</li> - <li><code>{{HTMLElement("input/image", "image")}}</code> : un bouton graphique d'envoi du formulaire. L'attribut <code>src</code> doit être défini avec la source de l'image et l'attribut <code>alt</code> doit être défini avec le texte alternatif. Les attributs <code>height</code> et <code>width</code> permettent de définir la taille de l'image en pixels.</li> - <li><code>{{HTMLElement("input/month", "month")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un mois et une année (sans fuseau horaire).</li> - <li><code>{{HTMLElement("input/number", "number")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre.</li> - <li><code>{{HTMLElement("input/password", "password")}}</code> : un champ texte sur une seule ligne dont la valeur est masquée. Les attributs <code>maxlength</code> et <code>minlength</code> définissent la taille maximale et minimale de la valeur à saisir dans le champ. - <div class="note"> - <p><strong>Note :</strong> Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.</p></div> - </li> - <li><code>{{HTMLElement("input/radio", "radio")}}</code> : un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs.</li> - <li><code>{{HTMLElement("input/range", "range")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante.</li> - <li><code>{{HTMLElement("input/reset", "reset")}}</code> : un bouton qui réinitialise le contenu du formulaire avec les valeurs par défaut.</li> - <li><code>{{HTMLElement("input/search", "search")}}</code> : {{HTMLVersionInline("5")}} un champ texte sur une ligne pour des termes de recherche. Les sauts de ligne sont automatiquement retirés.</li> - <li><code>{{HTMLElement("input/submit", "submit")}}</code> : un bouton qui envoie le formulaire.</li> - <li><code>{{HTMLElement("input/tel", "tel")}}</code> : {{HTMLVersionInline("5")}} un contrôle pour saisir un numéro de téléphone.</li> - <li><code>{{HTMLElement("input/text", "text")}}</code> : un champ texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés.</li> - <li><code>{{HTMLElement("input/time", "time")}}</code> : {{HTMLVersionInline("5")}} A control for entering a time value with no time zone.</li> - <li><code>{{HTMLElement("input/url", "url")}}</code> : {{HTMLVersionInline("5")}} un champ permettant de saisir une URL.</li> - <li><code>{{HTMLElement("input/week", "week")}}</code> : {{HTMLVersionInline("5")}} un contrôle permettant de saisir une date représentée par un numéro de semaine et une année (sans indication de fuseau horaire).</li> -</ul> - -<p>Certains types sont désormais obsolètes :</p> - -<ul> - <li><code>{{HTMLElement("input/datetime", "datetime")}}</code> : {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} un contrôle pour saisir une date et une heure selon un fuseau horaire UTC. <strong>Cette fonctionnalité a été <a href="https://github.com/whatwg/html/issues/336">retirée du standard WHATWG HTML.</a></strong></li> -</ul> - -<h2 id="Attributs">Attributs</h2> - -<p>L'élément <code><input></code> est l'un des éléments HTML les plus complexes et puissants et il peut utiliser de nombreux types et attributs. Chaque élément <code><input></code> étant basé sur l'interface DOM {{domxref("HTMLInputElement")}}, ils partagent tous, techniquement, les mêmes attributs. Toutefois, certains attributs ne fonctionnent que pour certains types de champs et certains attributs fonctionnent spécifiquement selon le type de champ.</p> - -<p>Sur cette page, vous trouverez des informations sur les attributs communs à l'ensemble des types d'éléments <code><input></code> ainsi que la description de quelques attributs notables.</p> - -<h3 id="Attributs_communs_à_l'ensemble_des_types">Attributs communs à l'ensemble des types</h3> - -<p>This section lists the attributes which are used by all form <code><input></code> types. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages.</p> - -<div class="note"> -<p><strong>Note :</strong> Les éléments <code><input></code> peuvent bien entendu utiliser les <a href="/fr/docs/Web/HTML/Attributs_universels">attributs universels</a>.</p> -</div> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("autocomplete")}}</code></td> - <td>Une chaîne de caractères qui indique le type d'autocomplétion à utiliser.</td> - </tr> - <tr> - <td><code>{{anch("autofocus")}}</code></td> - <td>Un attribut booléen qui passe le focus sur le champ lorsque le formulaire est affiché.</td> - </tr> - <tr> - <td><code>{{anch("disabled")}}</code></td> - <td>Un attribut booléen qui indique si le champ doit être désactivé.</td> - </tr> - <tr> - <td><code>{{anch("form")}}</code></td> - <td>L'identifiant du formulaire (la valeur de l'attribut <code>id</code> de l'élément {{HTMLElement("form")}}) auquel le champ est rattaché. Si cet attribut est absent, le champ sera rattaché au formulaire le plus proche qui le contient s'il existe.</td> - </tr> - <tr> - <td><code>{{anch("list")}}</code></td> - <td>L'identifiant (valeur de l'attribut <code>id</code>) d'un élément {{HTMLElement("datalist")}} qui fournit une liste de suggestions.</td> - </tr> - <tr> - <td><code>{{anch("name")}}</code></td> - <td>Le nom du champ qui sera rattaché à la donnée envoyée via le formulaire.</td> - </tr> - <tr> - <td><code>{{anch("readonly")}}</code></td> - <td>Un attribut booléen qui indique si le champ peut être édité ou non.</td> - </tr> - <tr> - <td><code>{{anch("required")}}</code></td> - <td>Un attribut booléen qui indique que le champ doit être renseigné avant de pouvoir envoyer le formulaire.</td> - </tr> - <tr> - <td><code>{{anch("tabindex")}}</code></td> - <td>Une valeur numérique qui indique à l'agent utilisateur l'ordre selon lequel naviguer au clavier grâce à la touche <kbd>Tab</kbd>.</td> - </tr> - <tr> - <td><code>{{anch("type")}}</code></td> - <td>Une chaîne de caractère qui indique l<a href="#types">e type de champ représenté par l'élément <code><input></code></a>.</td> - </tr> - <tr> - <td><code>{{anch("value")}}</code></td> - <td>La valeur du champ.</td> - </tr> - </tbody> -</table> +{{HTMLRef}} + +L'élément HTML **`<input>`** est utilisé pour créer un contrôle interactif dans un formulaire web qui permet à l'utilisateur de saisir des données. Les saisies possibles et le comportement de l'élément `<input>` dépend fortement de la valeur indiquée dans son attribut `type`. + +{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-shorter")}} + +## Les différents types de champs `<input>` + +La façon dont un élément `<input>` fonctionne dépend grandement de la valeur de son attribut `type`. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut `type` n'est pas présent, il aura la valeur implicite `text`. + +Les types de champs disponibles sont : + +- `{{HTMLElement("input/button", "button")}}` : un bouton sans comportement défini. +- `{{HTMLElement("input/checkbox", "checkbox")}}` : une case à cocher qui permet de sélectionner/déselectionner une valeur +- `{{HTMLElement("input/color", "color")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de définir une couleur. +- `{{HTMLElement("input/date", "date")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date (composé d'un jour, d'un mois et d'une année). +- `{{HTMLElement("input/datetime-local", "datetime-local")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir une date et une heure (sans fuseau horaire). +- `{{HTMLElement("input/email", "email")}}` : {{HTMLVersionInline("5")}} un champ qui permet de saisir une adresse éléctronique. +- `{{HTMLElement("input/file", "file")}}` : un contrôle qui permet de sélectionner un fichier. L'attribut **`accept`** définit les types de fichiers qui peuvent être sélectionnés. +- `{{HTMLElement("input/hidden", "hidden")}}` : un contrôle qui n'est pas affiché mais dont la valeur est envoyée au serveur. +- `{{HTMLElement("input/image", "image")}}` : un bouton graphique d'envoi du formulaire. L'attribut `src` doit être défini avec la source de l'image et l'attribut `alt` doit être défini avec le texte alternatif. Les attributs `height` et `width` permettent de définir la taille de l'image en pixels. +- `{{HTMLElement("input/month", "month")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un mois et une année (sans fuseau horaire). +- `{{HTMLElement("input/number", "number")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre. +- `{{HTMLElement("input/password", "password")}}` : un champ texte sur une seule ligne dont la valeur est masquée. Les attributs `maxlength` et `minlength` définissent la taille maximale et minimale de la valeur à saisir dans le champ. + + > **Note :** Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP. + +- `{{HTMLElement("input/radio", "radio")}}` : un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs. +- `{{HTMLElement("input/range", "range")}}` : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante. +- `{{HTMLElement("input/reset", "reset")}}` : un bouton qui réinitialise le contenu du formulaire avec les valeurs par défaut. +- `{{HTMLElement("input/search", "search")}}` : {{HTMLVersionInline("5")}} un champ texte sur une ligne pour des termes de recherche. Les sauts de ligne sont automatiquement retirés. +- `{{HTMLElement("input/submit", "submit")}}` : un bouton qui envoie le formulaire. +- `{{HTMLElement("input/tel", "tel")}}` : {{HTMLVersionInline("5")}} un contrôle pour saisir un numéro de téléphone. +- `{{HTMLElement("input/text", "text")}}` : un champ texte sur une seule ligne. Les sauts de ligne sont automatiquement retirés. +- `{{HTMLElement("input/time", "time")}}` : {{HTMLVersionInline("5")}} A control for entering a time value with no time zone. +- `{{HTMLElement("input/url", "url")}}` : {{HTMLVersionInline("5")}} un champ permettant de saisir une URL. +- `{{HTMLElement("input/week", "week")}}` : {{HTMLVersionInline("5")}} un contrôle permettant de saisir une date représentée par un numéro de semaine et une année (sans indication de fuseau horaire). + +Certains types sont désormais obsolètes : + +- `{{HTMLElement("input/datetime", "datetime")}}` : {{HTMLVersionInline("5")}} {{deprecated_inline}} {{obsolete_inline}} un contrôle pour saisir une date et une heure selon un fuseau horaire UTC. **Cette fonctionnalité a été [retirée du standard WHATWG HTML.](https://github.com/whatwg/html/issues/336)** + +## Attributs + +L'élément `<input>` est l'un des éléments HTML les plus complexes et puissants et il peut utiliser de nombreux types et attributs. Chaque élément `<input>` étant basé sur l'interface DOM {{domxref("HTMLInputElement")}}, ils partagent tous, techniquement, les mêmes attributs. Toutefois, certains attributs ne fonctionnent que pour certains types de champs et certains attributs fonctionnent spécifiquement selon le type de champ. -<h4 id="htmlattrdef(autocomplete)">{{htmlattrdef("autocomplete")}}</h4> +Sur cette page, vous trouverez des informations sur les attributs communs à l'ensemble des types d'éléments `<input>` ainsi que la description de quelques attributs notables. -<p>Une chaîne de caractères qui décrit si le champ doit fournir des fonctionnalités d'autocomplétion. Cette autocomplétion peut notamment provenir des valeurs précédemment saisies dans le champ. D'autres méthodes plus complexes peuvent être utilisées : un navigateur pourra par exemple interagir avec la liste des contacts de l'appareil afin de proposer l'autocomplétion pour les adresses électroniques. Voir {{SectionOnPage("/fr/docs/Web/HTML/Attributs/autocomplete", "Valeurs")}} pour les valeurs qui peuvent être utilisées avec cet attribut.</p> +### Attributs communs à l'ensemble des types -<p>Cet attribut n'aura aucun effet sur les champs qui ne renvoient pas de valeurs numériques ou de textes (les champs <code>checkbox</code> ou <code>image</code> par exemple).</p> +This section lists the attributes which are used by all form `<input>` types. Attributes that are unique to particular input types—or attributes which are common to all input types but have special behaviors when used on a given input type—are instead documented on those types' pages. -<p>Pour plus d'informations, voir <a href="/fr/docs/Web/HTML/Attributs/autocomplete">la page de documentation sur l'attribut HTML <code>autocomplete</code></a>.</p> +> **Note :** Les éléments `<input>` peuvent bien entendu utiliser les [attributs universels](/fr/docs/Web/HTML/Attributs_universels). -<h4 id="htmlattrdef(autofocus)">{{htmlattrdef("autofocus")}}</h4> +| Attribut | Description | +| ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("autocomplete")}}` | Une chaîne de caractères qui indique le type d'autocomplétion à utiliser. | +| `{{anch("autofocus")}}` | Un attribut booléen qui passe le focus sur le champ lorsque le formulaire est affiché. | +| `{{anch("disabled")}}` | Un attribut booléen qui indique si le champ doit être désactivé. | +| `{{anch("form")}}` | L'identifiant du formulaire (la valeur de l'attribut `id` de l'élément {{HTMLElement("form")}}) auquel le champ est rattaché. Si cet attribut est absent, le champ sera rattaché au formulaire le plus proche qui le contient s'il existe. | +| `{{anch("list")}}` | L'identifiant (valeur de l'attribut `id`) d'un élément {{HTMLElement("datalist")}} qui fournit une liste de suggestions. | +| `{{anch("name")}}` | Le nom du champ qui sera rattaché à la donnée envoyée via le formulaire. | +| `{{anch("readonly")}}` | Un attribut booléen qui indique si le champ peut être édité ou non. | +| `{{anch("required")}}` | Un attribut booléen qui indique que le champ doit être renseigné avant de pouvoir envoyer le formulaire. | +| `{{anch("tabindex")}}` | Une valeur numérique qui indique à l'agent utilisateur l'ordre selon lequel naviguer au clavier grâce à la touche <kbd>Tab</kbd>. | +| `{{anch("type")}}` | Une chaîne de caractère qui indique l[e type de champ représenté par l'élément `<input>`](#types). | +| `{{anch("value")}}` | La valeur du champ. | -<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ doit recevoir le focus lorsque le chargement de la page est terminé (ou que la boîte de dialogue ({{HTMLElement("dialog")}}) contenant l'élément est affichée).</p> +#### {{htmlattrdef("autocomplete")}} -<div class="note"> -<p><strong>Note :</strong> Un élément ayant l'attribut <code>autofocus</code> peut avoir le focus avant que l'évènement {{domxref("DOMContentLoaded")}} soit déclenché.</p> -</div> +Une chaîne de caractères qui décrit si le champ doit fournir des fonctionnalités d'autocomplétion. Cette autocomplétion peut notamment provenir des valeurs précédemment saisies dans le champ. D'autres méthodes plus complexes peuvent être utilisées : un navigateur pourra par exemple interagir avec la liste des contacts de l'appareil afin de proposer l'autocomplétion pour les adresses électroniques. Voir {{SectionOnPage("/fr/docs/Web/HTML/Attributs/autocomplete", "Valeurs")}} pour les valeurs qui peuvent être utilisées avec cet attribut. -<p>Seul un élément du document peut avoir l'attribut <code>autofocus</code>. Il n'est pas possible d'utiliser l'attribut <code>autofocus</code> sur les champs de type <code>hidden</code> car ces derniers, masqués, ne peuvent pas avoir le focus.</p> +Cet attribut n'aura aucun effet sur les champs qui ne renvoient pas de valeurs numériques ou de textes (les champs `checkbox` ou `image` par exemple). -<div class="warning"> -<p><strong>Attention :</strong> Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque <code>autofocus</code> est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement.</p> -</div> +Pour plus d'informations, voir [la page de documentation sur l'attribut HTML `autocomplete`](/fr/docs/Web/HTML/Attributs/autocomplete). -<h4 id="htmlattrdef(disabled)">{{htmlattrdef("disabled")}}</h4> +#### {{htmlattrdef("autofocus")}} -<p>Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir interagir avec le champ. Les champs désactivés sont généralement affichés avec une couleur plus pale et/ou avec d'autres indications.</p> +Un attribut booléen qui, lorsqu'il est présent, indique que le champ doit recevoir le focus lorsque le chargement de la page est terminé (ou que la boîte de dialogue ({{HTMLElement("dialog")}}) contenant l'élément est affichée). -<p>Les champs désactivés avec cet attribut ne reçoivent pas l'évènement {{event("click")}} et ne sont pas envoyés avec le formulaire.</p> +> **Note :** Un élément ayant l'attribut `autofocus` peut avoir le focus avant que l'évènement {{domxref("DOMContentLoaded")}} soit déclenché. -<div class="note"> -<p><strong>Note :</strong> Bien que ce ne soit pas indiqué dans la spécification, Firefox conserver l'état désactivé des champs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">y compris si cet état a été obtenu dynamiquement</a>, lors des rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} pourra être utilisé afin de contrôler cette fonctionnalité.</p> -</div> +Seul un élément du document peut avoir l'attribut `autofocus`. Il n'est pas possible d'utiliser l'attribut `autofocus` sur les champs de type `hidden` car ces derniers, masqués, ne peuvent pas avoir le focus. -<h4 id="htmlattrdef(form)">{{htmlattrdef("form")}}</h4> +> **Attention :** Le focus automatique sur un champ de formulaire peut être source de confusion, notamment pour les personnes qui utilisent des lecteurs d'écran. En effet, lorsque `autofocus` est utilisé, les lecteurs d'écran « téléportent » l'utilisateur sur le contrôle du champ, sans aucun avertissement. -<p>Une chaîne de caractères qui indique l'élément {{HTMLElement("form")}} auquel le champ est associé (on parle de « formulaire propriétaire »). La valeur de cette chaîne de caractères doit correspondre à la valeur de l'attribut {{htmlattrxref("id")}} d'un élément <code><form></code> du document. Si cet attribut n'est pas utilisé, l'élément <code><input></code> est rattaché au formulaire le plus proche qui le contient (si un tel formulaire existe).</p> +#### {{htmlattrdef("disabled")}} -<p>Grâce à cet attribut, on peut placer un champ n'importe où dans le document et avoir un lien entre le champ et un formulaire situé ailleurs.</p> +Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir interagir avec le champ. Les champs désactivés sont généralement affichés avec une couleur plus pale et/ou avec d'autres indications. -<div class="note"> -<p><strong>Note :</strong> Un champ ne peut être associé qu'à un seul formulaire.</p> -</div> +Les champs désactivés avec cet attribut ne reçoivent pas l'évènement {{event("click")}} et ne sont pas envoyés avec le formulaire. -<h4 id="htmlattrdef(list)">{{htmlattrdef("list")}}</h4> +> **Note :** Bien que ce ne soit pas indiqué dans la spécification, Firefox conserver l'état désactivé des champs, [y compris si cet état a été obtenu dynamiquement](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing), lors des rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} pourra être utilisé afin de contrôler cette fonctionnalité. -<p>Cet attribut est une chaîne de caractères qui correspond à l'identifiant ({{domxref("Element.id", "id")}}) d'un élément {{HTMLElement("datalist")}} du document et qui fournit une liste de valeurs à suggérer à l'utilisateur pour ce champ. Les valeurs de cette liste qui ne sont pas compatibles avec ce type de champ ne seront pas incluses dans les suggestions.</p> +#### {{htmlattrdef("form")}} -<p>L'attribut <code>list</code> n'est pas pris en charge pour les types <code>hidden</code>, <code>password</code>, <code>checkbox</code>, <code>radio</code>, <code>file</code> ou pour les boutons.</p> +Une chaîne de caractères qui indique l'élément {{HTMLElement("form")}} auquel le champ est associé (on parle de « formulaire propriétaire »). La valeur de cette chaîne de caractères doit correspondre à la valeur de l'attribut {{htmlattrxref("id")}} d'un élément `<form>` du document. Si cet attribut n'est pas utilisé, l'élément `<input>` est rattaché au formulaire le plus proche qui le contient (si un tel formulaire existe). -<h4 id="htmlattrdef(name)">{{htmlattrdef("name")}}</h4> +Grâce à cet attribut, on peut placer un champ n'importe où dans le document et avoir un lien entre le champ et un formulaire situé ailleurs. -<p>Une chaîne de caractères qui définit le nom associé au champ. Ce nom sera envoyé avec la valeur lors de l'envoi du formulaire.</p> +> **Note :** Un champ ne peut être associé qu'à un seul formulaire. -<p>Lorsqu'un champ a un nom, cette valeur devient une propriété de {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut <code>name</code> qui vaut <code>hat-size</code> :</p> +#### {{htmlattrdef("list")}} -<pre class="brush: js">let form = document.querySelector("form"); +Cet attribut est une chaîne de caractères qui correspond à l'identifiant ({{domxref("Element.id", "id")}}) d'un élément {{HTMLElement("datalist")}} du document et qui fournit une liste de valeurs à suggérer à l'utilisateur pour ce champ. Les valeurs de cette liste qui ne sont pas compatibles avec ce type de champ ne seront pas incluses dans les suggestions. + +L'attribut `list` n'est pas pris en charge pour les types `hidden`, `password`, `checkbox`, `radio`, `file` ou pour les boutons. + +#### {{htmlattrdef("name")}} + +Une chaîne de caractères qui définit le nom associé au champ. Ce nom sera envoyé avec la valeur lors de l'envoi du formulaire. + +Lorsqu'un champ a un nom, cette valeur devient une propriété de {{domxref("HTMLFormElement.elements")}} qu'on pourra utiliser en JavaScript (ex. si on a un attribut `name` qui vaut `hat-size` : + +```js +let form = document.querySelector("form"); let guestName = form.elements.guest; let hatSize = form.elements["hat-size"]; -</pre> +``` + +Avec ce code, la variable `guestName` correspondra à l'élément {{domxref("HTMLInputElement")}} du champ `guest` et `hatSize` à l'objet pour le champ `hat-size`. + +> **Attention :** Il est préférable de ne pas utiliser de valeurs pour `name` qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné. -<p>Avec ce code, la variable <code>guestName</code> correspondra à l'élément {{domxref("HTMLInputElement")}} du champ <code>guest</code> et <code>hatSize</code> à l'objet pour le champ <code>hat-size</code>.</p> +Le nom `_charset_` possède une signification spéciale. Si cette valeur est utilisée comme nom pour un élément `<input>` de type [`hidden`](/fr/docs/Web/HTML/Element/Input/hidden), la valeur du champ (l'attribut `value`) sera automatiquememnt renseignée par l'agent utilisateur et correspondra à l'encodage utilisé pour envoyer le formulaire. -<div class="warning"> -<p><strong>Attention :</strong> Il est préférable de ne pas utiliser de valeurs pour <code>name</code> qui correspondent à une propriété native de l'objet du DOM car cela surchargerait la propriété préexistante avec une référence au champ concerné.</p> -</div> +Si l'attribut `name` n'est pas présent ou qu'il est vide, la valeur du champ ne sera pas envoyée avec le formulaire. -<p>Le nom <code>_charset_</code> possède une signification spéciale. Si cette valeur est utilisée comme nom pour un élément <code><input></code> de type <code><a href="/fr/docs/Web/HTML/Element/Input/hidden">hidden</a></code>, la valeur du champ (l'attribut <code>value</code>) sera automatiquememnt renseignée par l'agent utilisateur et correspondra à l'encodage utilisé pour envoyer le formulaire.</p> +> **Note :** Pour certaines raisons historiques, le nom `isindex` n'est pas autorisé. Pour en savoir plus, voir la section [Nommage des contrôles de formulaire : l'attribut `name`](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name) de la spécification HTML. -<p>Si l'attribut <code>name</code> n'est pas présent ou qu'il est vide, la valeur du champ ne sera pas envoyée avec le formulaire.</p> +#### {{htmlattrdef("readonly")}} -<div class="note"> -<p><strong>Note :</strong> Pour certaines raisons historiques, le nom <code>isindex</code> n'est pas autorisé. Pour en savoir plus, voir la section <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#attr-fe-name">Nommage des contrôles de formulaire : l'attribut <code>name</code></a> de la spécification HTML.</p> -</div> +Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir éditer la valeur du champ. -<h4 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h4> +`disabled` et `readonly` sont bien différents : `readonly` permet d'avoir un contrôle fonctionnel mais non éditable alors que les champs `disabled` ne fonctionnent pas comme des contrôles. -<p>Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur ne devrait pas pouvoir éditer la valeur du champ.</p> +> **Note :** L'attribut `required` n'est pas autorisé sur les éléments `<input>` avec l'attribut `readonly`. Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de `readonly` ou de `disabled`. -<p><code>disabled</code> et <code>readonly</code> sont bien différents : <code>readonly</code> permet d'avoir un contrôle fonctionnel mais non éditable alors que les champs <code>disabled</code> ne fonctionnent pas comme des contrôles.</p> +#### {{htmlattrdef("required")}} -<div class="note"> -<p><strong>Note :</strong> L'attribut <code>required</code> n'est pas autorisé sur les éléments <code><input></code> avec l'attribut <code>readonly</code>. Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de <code>readonly</code> ou de <code>disabled</code>.</p> -</div> +Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur doit fournir une valeur pour ce champ avant de pouvoir envoyer le formulaire. L'attribut `required` est pris en charge pour tous les types d'éléments `<input>` exceptés : -<h4 id="htmlattrdef(required)">{{htmlattrdef("required")}}</h4> +- [`color`](/fr/docs/Web/HTML/Element/input/color) +- [`hidden`](/fr/docs/Web/HTML/Element/input/hidden) +- [`range`](/fr/docs/Web/HTML/Element/input/range) +- [`submit`](/fr/docs/Web/HTML/Element/input/submit) +- [`image`](/fr/docs/Web/HTML/Element/input/image) +- [`reset`](/fr/docs/Web/HTML/Element/input/reset) +- [`button`](/fr/docs/Web/HTML/Element/input/button) -<p>Un attribut booléen qui, lorsqu'il est présent, indique que l'utilisateur doit fournir une valeur pour ce champ avant de pouvoir envoyer le formulaire. L'attribut <code>required</code> est pris en charge pour tous les types d'éléments <code><input></code> exceptés :</p> +Lorsqu'un champ contient l'attribut, la pseudo-classe CSS {{cssxref(":required")}} lui est appliqué. À l'inverse, les champs qui n'ont pas d'attribut `required` auront la pseudo-classe {{cssxref(":optional")}} appliquée (cela ne s'applique pas aux types de champ qui ne prennent pas en charge `require`). -<div class="threecolumns"> -<ul> - <li><code><a href="/fr/docs/Web/HTML/Element/input/color">color</a></code></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/hidden">hidden</a></code></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/range">range</a></code></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/submit">submit</a></code></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/image">image</a></code></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/reset">reset</a></code></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/button">button</a></code></li> -</ul> -</div> +> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura pas d'effet sur les champs ayant également l'attribut {{htmlattrxref("readonly", "input/text")}}. -<p>Lorsqu'un champ contient l'attribut, la pseudo-classe CSS {{cssxref(":required")}} lui est appliqué. À l'inverse, les champs qui n'ont pas d'attribut <code>required</code> auront la pseudo-classe {{cssxref(":optional")}} appliquée (cela ne s'applique pas aux types de champ qui ne prennent pas en charge <code>require</code>).</p> +#### {{htmlattrdef("tabindex")}} -<div class="note"> -<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura pas d'effet sur les champs ayant également l'attribut {{htmlattrxref("readonly", "input/text")}}.</p> -</div> +Une valeur nnumérique qui définit si le champ peut recevoir le focus via la navigation au clavier (en navigant avec la touche <kbd>Tab</kbd>) et la façon dont l'élément s'inscrit dans l'ordre de la navigation au clavier. -<h4 id="htmlattrdef(tabindex)">{{htmlattrdef("tabindex")}}</h4> +Les valeurs de `tabindex` auront un sens différents selon leur signe : -<p>Une valeur nnumérique qui définit si le champ peut recevoir le focus via la navigation au clavier (en navigant avec la touche <kbd>Tab</kbd>) et la façon dont l'élément s'inscrit dans l'ordre de la navigation au clavier.</p> +- Lorsque `tabindex` est une valeur négative, cela indique que l'élément peut recevoir le focus de la part de l'utilisateur mais sans utiliser la navigation séquentielle au clavier. Il est recommandé de toujours utiliser une valeur de `-1` dans ce cas. +- Lorsque `tabindex` est nul, cela indique que l'élément peut recevoir le focus et peut être accessible via la navigation au clavier mais que l'ordre de navigation est laissé à la discrétion de l'agent utilisateur. C'est généralement la meilleure valeur à utiliser. +- Lorsque `tabindex` est une valeur positive, cette dernière définit l'ordre de l'élément dans la navigation au clavier. Chaque fois que l'utilisateur appuie sur la touche -<p>Les valeurs de <code>tabindex</code> auront un sens différents selon leur signe :</p> + <kbd>Tab</kbd> -<ul> - <li>Lorsque <code>tabindex</code> est une valeur négative, cela indique que l'élément peut recevoir le focus de la part de l'utilisateur mais sans utiliser la navigation séquentielle au clavier. Il est recommandé de toujours utiliser une valeur de <code>-1</code> dans ce cas.</li> - <li>Lorsque <code>tabindex</code> est nul, cela indique que l'élément peut recevoir le focus et peut être accessible via la navigation au clavier mais que l'ordre de navigation est laissé à la discrétion de l'agent utilisateur. C'est généralement la meilleure valeur à utiliser.</li> - <li>Lorsque <code>tabindex</code> est une valeur positive, cette dernière définit l'ordre de l'élément dans la navigation au clavier. Chaque fois que l'utilisateur appuie sur la touche <kbd>Tab</kbd>, le focus passe à un élément qui possède un attribut <code>tabindex</code> plus élevé. La plupart des plateformes disposent également d'une fonctionnalité pour « reculer » dans la navigation au clavier, généralement via la combinaison de touches <kbd>Shift</kbd> + <kbd>Tab</kbd>.</li> -</ul> + , le focus passe à un élément qui possède un attribut `tabindex` plus élevé. La plupart des plateformes disposent également d'une fonctionnalité pour « reculer » dans la navigation au clavier, généralement via la combinaison de touches -<p>Si cet attribut est absent ou n'est pas un entier valide, ce sera à l'agent utilisateur de respecter les conventions de la plateforme sous-jacente pour la navigation au clavier et la gestion du focus.</p> + <kbd>Shift</kbd> -<h4 id="htmlattrdef(type)">{{htmlattrdef("type")}}</h4> + \+ -<p>Une chaîne de caractères qui indique le type de contrôle à afficher. On pourra par exemple avoir une case à cocher en utilisant la valeur <code>checkbox</code>. Lorsque cet attribut est absent ou qu'une valeur inconnue est utilisée, la valeur par défaut sera <code>text</code> et le contrôle créé permettra de saisir un texte.</p> + <kbd>Tab</kbd> -<p>Les valeurs autorisées pour cet attribut sont <a href="#types">présentées plus haut</a>.</p> + . -<h4 id="htmlattrdef(value)">{{htmlattrdef("value")}}</h4> +Si cet attribut est absent ou n'est pas un entier valide, ce sera à l'agent utilisateur de respecter les conventions de la plateforme sous-jacente pour la navigation au clavier et la gestion du focus. -<p>La valeur du champ. Lorsque cet attribut est indiqué en HTML, il correspond à la valeur initiale du champ qui peut ensuite être modifié par l'utilisateur. Cette valeur peut également être récupérée et modifiée en JavaScript grâce à la propriété <code>value</code> de l'objet {{domxref("HTMLInputElement")}}. Cet attribut est toujours optionnel.</p> +#### {{htmlattrdef("type")}} -<div class="note"> -<p><strong>Note :</strong> À la différence des autres contrôles, les cases à cocher et les boutons radio sont uniquemnet envoyés via le formulaire lorsque l'attribut <code>checked</code> est vrai. Dans ce cas, l'attribut <code>value</code> sera la valeur associée au champ.</p> +Une chaîne de caractères qui indique le type de contrôle à afficher. On pourra par exemple avoir une case à cocher en utilisant la valeur `checkbox`. Lorsque cet attribut est absent ou qu'une valeur inconnue est utilisée, la valeur par défaut sera `text` et le contrôle créé permettra de saisir un texte. -<p>Aussi, si on a une case à cocher dont l'attribut <code>name</code> vaut <code>status</code>, que l'attribut <code>value</code> vaut <code>active</code> et que la case est cochée, les données envoyées au formulaire contiendront <code>status=active</code>. Si la case à cocher n'est pas cochée, ses données ne seront pas envoyées avec le formulaire. Pour les cases à cocher et les boutons radio, la valeur par défaut de l'attribut <code>value</code> est <code>on</code>.</p> -</div> +Les valeurs autorisées pour cet attribut sont [présentées plus haut](#types). -<h2 id="Exemples">Exemples</h2> +#### {{htmlattrdef("value")}} -<h3 id="Exemple_simple">Exemple simple</h3> +La valeur du champ. Lorsque cet attribut est indiqué en HTML, il correspond à la valeur initiale du champ qui peut ensuite être modifié par l'utilisateur. Cette valeur peut également être récupérée et modifiée en JavaScript grâce à la propriété `value` de l'objet {{domxref("HTMLInputElement")}}. Cet attribut est toujours optionnel. -<h4 id="HTML">HTML</h4> +> **Note :** À la différence des autres contrôles, les cases à cocher et les boutons radio sont uniquemnet envoyés via le formulaire lorsque l'attribut `checked` est vrai. Dans ce cas, l'attribut `value` sera la valeur associée au champ. +> +> Aussi, si on a une case à cocher dont l'attribut `name` vaut `status`, que l'attribut `value` vaut `active` et que la case est cochée, les données envoyées au formulaire contiendront `status=active`. Si la case à cocher n'est pas cochée, ses données ne seront pas envoyées avec le formulaire. Pour les cases à cocher et les boutons radio, la valeur par défaut de l'attribut `value` est `on`. -<pre class="brush: html"><p>Un élément de saisie simple </p> -<input type="text" value="Saisir un texte ici"> -</pre> +## Exemples -<h4 id="Résultat">Résultat</h4> +### Exemple simple -<p>{{EmbedLiveSample('Exemple_simple', '', '100')}}</p> +#### HTML -<h3 id="Un_scénario_fréquent">Un scénario fréquent</h3> +```html +<p>Un élément de saisie simple </p> +<input type="text" value="Saisir un texte ici"> +``` -<h4 id="HTML_2">HTML</h4> +#### Résultat -<pre class="brush: html"><p>Un formulaire avec différents types de champs</p> -<form action="getform.php" method="get"> - <label>Prénom : <input type="text"></label><br> - <label>Nom : <input type="text"></label><br> - <label>Adresse email : <input type="email"></label><br> - <input type="submit" value="Envoyer"> -</form> -</pre> +{{EmbedLiveSample('Exemple_simple', '', '100')}} -<h4 id="Résultat_2">Résultat</h4> +### Un scénario fréquent -<p>{{EmbedLiveSample('Un_scénario_fréquent', '', '200')}}</p> +#### HTML -<h2 id="Localisation">Localisation</h2> +```html +<p>Un formulaire avec différents types de champs</p> +<form action="getform.php" method="get"> + <label>Prénom : <input type="text"></label><br> + <label>Nom : <input type="text"></label><br> + <label>Adresse email : <input type="email"></label><br> + <input type="submit" value="Envoyer"> +</form> +``` -<p>Pour certains types d'éléments <code><input></code>, les valeurs saisies autorisées dépendent de la locale utilisée. Ainsi, dans certaines locales, 1,000.00 est un nombre valide alors que dans d'autres, il faudra avoir saisi 1.000,00 pour exprimer le même nombre.</p> +#### Résultat -<p>Firefox utilise la méthode heuristique suivante afin de déterminer la locale pour laquelle valider la saisie de l'utilisateur (au moins dans le cas de <code>type="number"</code>):</p> +{{EmbedLiveSample('Un_scénario_fréquent', '', '200')}} -<ul> - <li>Utiliser la langue définie par l'attribut <code>lang</code>/<code>xml:lang</code> de l'élément ou par celui de ses parents.</li> - <li>Sinon utiliser la langue définie dans l'en-tête HTTP {{httpheader("Content-Language")}}</li> - <li>Sinon, utiliser la locale du navigateur</li> -</ul> +## Localisation -<h2 id="Accessibilité">Accessibilité</h2> +Pour certains types d'éléments `<input>`, les valeurs saisies autorisées dépendent de la locale utilisée. Ainsi, dans certaines locales, 1,000.00 est un nombre valide alors que dans d'autres, il faudra avoir saisi 1.000,00 pour exprimer le même nombre. -<h3 id="Utilisation_de_libellés">Utilisation de libellés</h3> +Firefox utilise la méthode heuristique suivante afin de déterminer la locale pour laquelle valider la saisie de l'utilisateur (au moins dans le cas de `type="number"`): -<p>Lorsqu'on utilise des champs de formulaire, il est recommandé d'ajouter des libellés pour chacun de ces champs. Ainsi, les personnes qui utilisent des outils d'assistance pourront connaître la signification du champ.</p> +- Utiliser la langue définie par l'attribut `lang`/`xml:lang` de l'élément ou par celui de ses parents. +- Sinon utiliser la langue définie dans l'en-tête HTTP {{httpheader("Content-Language")}} +- Sinon, utiliser la locale du navigateur -<p>Dans l'exemple suivant, on illustre comment associer un élément <code><label></code> avec un élément <code><input></code>. Pour ce faire, on ajoutera un identifiant (un attribut <code>id</code>) à l'élément <code><input></code> et on référencera cet identifiant via l'attribut <code>for</code> de l'élément <code><label></code>.</p> +## Accessibilité -<pre><label for="ptipois">Aimez-vous les petits-pois ?</label> -<input type="checkbox" name="petitspois" id="ptipois"> -</pre> +### Utilisation de libellés -<h3 id="Dimensionnement_-_taille">Dimensionnement - taille</h3> +Lorsqu'on utilise des champs de formulaire, il est recommandé d'ajouter des libellés pour chacun de ces champs. Ainsi, les personnes qui utilisent des outils d'assistance pourront connaître la signification du champ. -<p>Les éléments interactifs tels que les champs de formulaire doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 <a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">pixels CSS</a>.</p> +Dans l'exemple suivant, on illustre comment associer un élément `<label>` avec un élément `<input>`. Pour ce faire, on ajoutera un identifiant (un attribut `id`) à l'élément `<input>` et on référencera cet identifiant via l'attribut `for` de l'élément `<label>`. -<ul> - <li><a href="https://www.w3.org/WAI/WCAG21/Understanding/target-size.html">Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)</a></li> - <li><a href="http://adrianroselli.com/2019/06/target-size-and-2-5-5.html">Taille des cibles et critère 2.5.5, billet en anglais de Adrian Roselli</a></li> - <li><a href="https://a11yproject.com/posts/large-touch-targets/">Test rapide : cibles tactiles suffisamment grande - Projet A11Y (billet en anglais)</a></li> -</ul> + <label for="ptipois">Aimez-vous les petits-pois ?</label> + <input type="checkbox" name="petitspois" id="ptipois"> -<h2 id="Notes">Notes</h2> +### Dimensionnement - taille -<h3 id="Messages_personnalisés_pour_les_erreurs">Messages personnalisés pour les erreurs</h3> +Les éléments interactifs tels que les champs de formulaire doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteur, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44x44 [pixels CSS](https://www.w3.org/TR/WCAG21/#dfn-css-pixels). -<p>Si on souhaite afficher un message d'erreur personnalisé lors de l'échec de la validation d'un champs, il faudra utiliser <a href="/en-US/docs/Web/API/Constraint_validation#Constraint_validation_interfaces">les fonctionnalités de contraintes de validation</a> qui sont disponibles sur les éléments <code><input></code>. Par exemple :</p> +- [Comprendre le critère d'accessibilité 2.5.5 sur la taille des cibles - Comprendre WCAG 2.1 (en anglais)](https://www.w3.org/WAI/WCAG21/Understanding/target-size.html) +- [Taille des cibles et critère 2.5.5, billet en anglais de Adrian Roselli](http://adrianroselli.com/2019/06/target-size-and-2-5-5.html) +- [Test rapide : cibles tactiles suffisamment grande - Projet A11Y (billet en anglais)](https://a11yproject.com/posts/large-touch-targets/) -<pre class="brush: html"><form> - <label for="name">Saisir un nom d'utilisateur (lettres minuscules et majuscules) : </label> - <input type="text" name="name" id="name" required pattern="[A-Za-z]+"> - <button>Envoyer</button> -</form></pre> +## Notes -<p>Les fonctionnalités de validation HTML déclencheront un message d'erreur par défaut si on souhaite envoyer le formulaire avec une valeur invalide (qui ne respecte pas <code>pattern</code>) ou sans valeur.</p> +### Messages personnalisés pour les erreurs -<p>Si on souhaite plutôt afficher un message d'erreur personnalisé, on pourra utiliser un fragment de code JavaScript comme celui-ci :</p> +Si on souhaite afficher un message d'erreur personnalisé lors de l'échec de la validation d'un champs, il faudra utiliser [les fonctionnalités de contraintes de validation](/en-US/docs/Web/API/Constraint_validation#Constraint_validation_interfaces) qui sont disponibles sur les éléments `<input>`. Par exemple : -<pre class="brush: js">const nameInput = document.querySelector('input'); +```html +<form> + <label for="name">Saisir un nom d'utilisateur (lettres minuscules et majuscules) : </label> + <input type="text" name="name" id="name" required pattern="[A-Za-z]+"> + <button>Envoyer</button> +</form> +``` + +Les fonctionnalités de validation HTML déclencheront un message d'erreur par défaut si on souhaite envoyer le formulaire avec une valeur invalide (qui ne respecte pas `pattern`) ou sans valeur. + +Si on souhaite plutôt afficher un message d'erreur personnalisé, on pourra utiliser un fragment de code JavaScript comme celui-ci : + +```js +const nameInput = document.querySelector('input'); const form = document.querySelector('form'); -nameInput.addEventListener('input', () => { +nameInput.addEventListener('input', () => { nameInput.setCustomValidity(''); nameInput.checkValidity(); }); -nameInput.addEventListener('invalid', () => { +nameInput.addEventListener('invalid', () => { if(nameInput.value === '') { nameInput.setCustomValidity("Veuillez saisir votre nom d'utilisateur !"); } else { nameInput.setCustomValidity("Un nom d'utilisateur ne peut contenir que des lettres minuscules et majuscules, veuillez réessayer"); } -});</pre> +}); +``` -<p>Voici le résultat qui pourra être obtenu :</p> +Voici le résultat qui pourra être obtenu : -<p>{{EmbedLiveSample("Messages_personnalisés_pour_les_erreurs")}}</p> +{{EmbedLiveSample("Messages_personnalisés_pour_les_erreurs")}} -<p>Voici un récapitulatif de la logique de cet exemple :</p> +Voici un récapitulatif de la logique de cet exemple : -<ul> - <li>On vérifie la validité du champ chaque fois que sa valeur est modifiée en exécutant la méthode <code><a href="/fr/docs/Web/API/HTMLSelectElement/checkValidity">checkValidity()</a></code> grâce au gestionnaire d'évènement attaché à <code>input</code>.</li> - <li>Si la valeur est invalide, on génère un évènement <code>invalid</code> et le gestionnaire d'évènement associé est exécuté. Dans cette fonction, on analyse avec un bloc <code>if()</code> si la valeur est invalide parce qu'elle est vide ou parce qu'elle ne correspond pas au motif désiré. Selon le cas de figure, on utilise le message d'erreur correspondant.</li> - <li>Ainsi, si le champ saisi est invalide, lorsque le bouton Envoyer est utilisé, un des messages d'erreur sera affiché.</li> - <li>Si la valeur est valide, elle sera envoyée normalement. Pour cela, il faudra annuler la vérification spécifique en appelant <code><a href="/fr/docs/Web/API/HTMLSelectElement/setCustomValidity">setCustomValidity()</a></code> avec une chaîne de caractères vide. On effectue cela à chaque évènement <code>input</code>. Sans cette étape, avec une validation spécifique, le champ saisi serait considéré comme invalide même si sa valeur respectait les contraintes exprimées dans le HTML.</li> -</ul> +- On vérifie la validité du champ chaque fois que sa valeur est modifiée en exécutant la méthode [`checkValidity()`](/fr/docs/Web/API/HTMLSelectElement/checkValidity) grâce au gestionnaire d'évènement attaché à `input`. +- Si la valeur est invalide, on génère un évènement `invalid` et le gestionnaire d'évènement associé est exécuté. Dans cette fonction, on analyse avec un bloc `if()` si la valeur est invalide parce qu'elle est vide ou parce qu'elle ne correspond pas au motif désiré. Selon le cas de figure, on utilise le message d'erreur correspondant. +- Ainsi, si le champ saisi est invalide, lorsque le bouton Envoyer est utilisé, un des messages d'erreur sera affiché. +- Si la valeur est valide, elle sera envoyée normalement. Pour cela, il faudra annuler la vérification spécifique en appelant [`setCustomValidity()`](/fr/docs/Web/API/HTMLSelectElement/setCustomValidity) avec une chaîne de caractères vide. On effectue cela à chaque évènement `input`. Sans cette étape, avec une validation spécifique, le champ saisi serait considéré comme invalide même si sa valeur respectait les contraintes exprimées dans le HTML. -<h2 id="Résumé_technique">Résumé technique</h2> +## Résumé technique <table class="properties"> - <tbody> - <tr> - <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th> - <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, contenu de formulaire (listé, envoyable, réinitialisable), <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>. Si l'attribut {{htmlattrxref("type", "input")}} ne vaut pas <code>hidden</code>, c'est un élément étiquetable et <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible">tangible</a>.</td> - </tr> - <tr> - <th scope="row">Contenu autorisé</th> - <td>Aucun, cet élément est un élément vide.</td> - </tr> - <tr> - <th scope="row">Omission de balises</th> - <td>Cet élément doit avoir une balise de début et ne pas avoir de balise de fin.</td> - </tr> - <tr> - <th scope="row">Parents autorisés</th> - <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé">contenu phrasé</a>.</td> - </tr> - <tr> - <th scope="row">Rôles ARIA autorisés</th> - <td> - <ul> - <li><code>type=button</code> : {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}</li> - <li><code>type=checkbox</code> : {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}</li> - <li><code>type=image</code> : {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}</li> - <li><code>type=radio</code> : {{ARIARole("menuitemradio")}}</li> - <li><code>type=color|date|email|file|hidden</code> : aucun</li> - <li><code>type=month|number|password|range|reset</code> : aucun</li> - <li><code>type=search|submit|tel|text|url|week</code> : aucun</li> - </ul> - </td> - </tr> - <tr> - <th scope="row">Interface DOM</th> - <td>{{domxref("HTMLInputElement")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <th scope="row"> + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu" + >Catégories de contenu</a + > + </th> + <td> + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux" + >Contenu de flux</a + >, contenu de formulaire (listé, envoyable, réinitialisable), + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé" + >contenu phrasé</a + >. Si l'attribut {{htmlattrxref("type", "input")}} ne vaut + pas <code>hidden</code>, c'est un élément étiquetable et + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_tangible" + >tangible</a + >. + </td> + </tr> + <tr> + <th scope="row">Contenu autorisé</th> + <td>Aucun, cet élément est un élément vide.</td> + </tr> + <tr> + <th scope="row">Omission de balises</th> + <td> + Cet élément doit avoir une balise de début et ne pas avoir de balise de + fin. + </td> + </tr> + <tr> + <th scope="row">Parents autorisés</th> + <td> + Tout élément qui accepte du + <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_phrasé" + >contenu phrasé</a + >. + </td> + </tr> + <tr> + <th scope="row">Rôles ARIA autorisés</th> + <td> + <ul> + <li> + <code>type=button</code> : {{ARIARole("link")}}, + {{ARIARole("menuitem")}}, + {{ARIARole("menuitemcheckbox")}}, + {{ARIARole("menuitemradio")}}, + {{ARIARole("radio")}}, {{ARIARole("switch")}}, + {{ARIARole("tab")}} + </li> + <li> + <code>type=checkbox</code> : {{ARIARole("button")}}, + {{ARIARole("menuitemcheckbox")}}, + {{ARIARole("option")}}, {{ARIARole("switch")}} + </li> + <li> + <code>type=image</code> : {{ARIARole("link")}}, + {{ARIARole("menuitem")}}, + {{ARIARole("menuitemcheckbox")}}, + {{ARIARole("menuitemradio")}}, + {{ARIARole("radio")}}, {{ARIARole("switch")}} + </li> + <li> + <code>type=radio</code> : {{ARIARole("menuitemradio")}} + </li> + <li><code>type=color|date|email|file|hidden</code> : aucun</li> + <li><code>type=month|number|password|range|reset</code> : aucun</li> + <li><code>type=search|submit|tel|text|url|week</code> : aucun</li> + </ul> + </td> + </tr> + <tr> + <th scope="row">Interface DOM</th> + <td>{{domxref("HTMLInputElement")}}</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#the-input-element', '<input>')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML Media Capture', '#the-capture-attribute','<input capture>')}}</td> - <td>{{Spec2('HTML Media Capture')}}</td> - <td>Ajout de l'élément <code>capture</code></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}}</td> - <td>{{Spec2('HTML4.01')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------- | +| {{SpecName('HTML WHATWG', 'forms.html#the-input-element', '<input>')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML Media Capture', '#the-capture-attribute','<input capture>')}} | {{Spec2('HTML Media Capture')}} | Ajout de l'élément `capture` | +| {{SpecName('HTML5 W3C', 'forms.html#the-input-element', '<input>')}} | {{Spec2('HTML5 W3C')}} | | +| {{SpecName('HTML4.01', 'interact/forms.html#h-17.4', '<form>')}} | {{Spec2('HTML4.01')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input")}}</p> +{{Compat("html.elements.input")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>Les autres éléments relatifs aux formulaires HTML : {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}.</li> - <li>Dans certains cas, l'élément <code><input></code> est un <a href="/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9">élément remplacé</a>, sa position et sa taille dans le cadre de l'élément peuvent être ajustées grâce aux propriétés CSS {{cssxref("object-position")}} et {{cssxref("object-fit")}}.</li> - <li>L'objet DOM correspondant : {{domxref("HTMLInputElement")}}</li> -</ul> +- Les autres éléments relatifs aux formulaires HTML : {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} et {{HTMLElement("meter")}}. +- Dans certains cas, l'élément `<input>` est un [élément remplacé](/fr/docs/Web/CSS/%C3%89l%C3%A9ment_remplac%C3%A9), sa position et sa taille dans le cadre de l'élément peuvent être ajustées grâce aux propriétés CSS {{cssxref("object-position")}} et {{cssxref("object-fit")}}. +- L'objet DOM correspondant : {{domxref("HTMLInputElement")}} diff --git a/files/fr/web/html/element/input/month/index.md b/files/fr/web/html/element/input/month/index.md index 6f21f8d10d..e09147781e 100644 --- a/files/fr/web/html/element/input/month/index.md +++ b/files/fr/web/html/element/input/month/index.md @@ -7,184 +7,170 @@ tags: - Reference translation_of: Web/HTML/Element/input/month --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"month"</strong></code> permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format <code>"YYYY-MM"</code>, où <code>YYYY</code> représente l'année sur quatre chiffre et <code>MM</code> le mois sur deux chiffres.</p> +Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`"month"`** permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format `"YYYY-MM"`, où `YYYY` représente l'année sur quatre chiffre et `MM` le mois sur deux chiffres. -<div>{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}</div> +{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}} -<p>L'interface utilisateur associée à ce contrôle varie d'un navigateur à l'autre et la prise en charge de cette fonctionnalité reste encore hétérogène : seuls Chrome, Opéra et Edge implémentent cette fonctionnalité sur ordinateur et la plupart des navigateurs mobiles possèdent une implémentation. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, l'élément sera transformé en un simple <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> +L'interface utilisateur associée à ce contrôle varie d'un navigateur à l'autre et la prise en charge de cette fonctionnalité reste encore hétérogène : seuls Chrome, Opéra et Edge implémentent cette fonctionnalité sur ordinateur et la plupart des navigateurs mobiles possèdent une implémentation. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, l'élément sera transformé en un simple [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text). -<p>Si votre navigateur ne prend pas en charge ce type d'élément, voici ensuite une capture d'écran de Chrome : cliquer sur la flèche vers le bas permettra de faire apparaître un sélecteur de date qui permettra de choisir le mois et l'année.</p> +Si votre navigateur ne prend pas en charge ce type d'élément, voici ensuite une capture d'écran de Chrome : cliquer sur la flèche vers le bas permettra de faire apparaître un sélecteur de date qui permettra de choisir le mois et l'année. -<p><img alt="" src="month-control-chrome.png"></p> + -<p>Voici un aperçu du contrôle sous Edge :</p> +Voici un aperçu du contrôle sous Edge : -<p><img alt="" src="month-control-edge.png"></p> + -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du mois et de l'année saisies via le contrôle, au format YYYY-MM (c'est-à-dire une année sur 4 chiffres suivi d'un tiret (<code>"-"</code>) suivi du mois sur deux chiffres. Le format détaillé est <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_mois">décrit dans l'article sur les formats des dates/heures</a>.</p> +Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du mois et de l'année saisies via le contrôle, au format YYYY-MM (c'est-à-dire une année sur 4 chiffres suivi d'un tiret (`"-"`) suivi du mois sur deux chiffres. Le format détaillé est [décrit dans l'article sur les formats des dates/heures](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_mois). -<p>Il est possible de définir une valeur par défaut pour le contrôle en utilisant l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :</p> +Il est possible de définir une valeur par défaut pour le contrôle en utilisant l'attribut {{htmlattrxref("value", "input")}} de la façon suivante : -<h3 id="Exemple_1">Exemple 1</h3> +### Exemple 1 -<pre class="brush: html"><label for="bday-month">Quel est le mois de votre naissance ?</label> -<input id="bday-month" type="month" name="bday-month" value="2017-06"></pre> +```html +<label for="bday-month">Quel est le mois de votre naissance ?</label> +<input id="bday-month" type="month" name="bday-month" value="2017-06"> +``` -<p>{{EmbedLiveSample('Exemple_1', 600, 60)}}</p> +{{EmbedLiveSample('Exemple_1', 600, 60)}} -<p>On notera que la façon dont la date est affichée peut varier selon la locale de l'utilisateur et être présentée sous un format différent. En revanche, d'un point de vue technique, la valeur de l'attribut <code>value</code> suivra toujours le format <code>YYYY-MM</code>.</p> +On notera que la façon dont la date est affichée peut varier selon la locale de l'utilisateur et être présentée sous un format différent. En revanche, d'un point de vue technique, la valeur de l'attribut `value` suivra toujours le format `YYYY-MM`. -<p>Par exemple, lorsque le formulaire précédent sera envoyé vers le serveur, l'information sera transmise de cette façon : <code>bday-month=1978-06</code>.</p> +Par exemple, lorsque le formulaire précédent sera envoyé vers le serveur, l'information sera transmise de cette façon : `bday-month=1978-06`. -<p>Il est également possible de manipuler la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p> +Il est également possible de manipuler la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple : -<h3 id="Exemple_2">Exemple 2</h3> +### Exemple 2 -<pre class="brush: html hidden"><label for="bday-month">Quel est le mois de votre naissance ?</label> -<input id="bday-month" type="month" name="bday-month" value="2017-06"></pre> -</div> +```html hidden +<label for="bday-month">Quel est le mois de votre naissance ?</label> +<input id="bday-month" type="month" name="bday-month" value="2017-06"> +``` -<pre class="brush: js hidden">var monthControl = document.querySelector('input[type="month"]'); -monthControl.value = '1978-06';</pre> +```js hidden +var monthControl = document.querySelector('input[type="month"]'); +monthControl.value = '1978-06'; +``` -<p>{{EmbedLiveSample("Exemple_2", 600, 60)}}</p> +{{EmbedLiveSample("Exemple_2", 600, 60)}} -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> +## Attributs supplémentaires -<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mois gèrent les attributs suivants :</p> +En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mois gèrent les attributs suivants : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("max")}}</code></td> - <td>Le mois (et l'année) le plus tardif qui est considéré comme valide.</td> - </tr> - <tr> - <td><code>{{anch("min")}}</code></td> - <td>Le mois (et l'année) le plus tôt qui est considéré comme valide.</td> - </tr> - <tr> - <td><code>{{anch("readonly")}}</code></td> - <td>Un booléen qui indique si l'utilisateur peut modifier la valeur du champ.</td> - </tr> - <tr> - <td><code>{{anch("step")}}</code></td> - <td>Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur.</td> - </tr> - </tbody> -</table> +| Attribut | Description | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("max")}}` | Le mois (et l'année) le plus tardif qui est considéré comme valide. | +| `{{anch("min")}}` | Le mois (et l'année) le plus tôt qui est considéré comme valide. | +| `{{anch("readonly")}}` | Un booléen qui indique si l'utilisateur peut modifier la valeur du champ. | +| `{{anch("step")}}` | Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur. | -<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> +### {{htmlattrdef("max")}} -<p>Le mois le plus tardif, indiqué avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-MM"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle.</p> +Le mois le plus tardif, indiqué avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-MM"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle. -<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> +Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut `min`. -<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> +### {{htmlattrdef("min")}} -<p>Le mois le plus tôt, indiqué avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-MM"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle.</p> +Le mois le plus tôt, indiqué avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-MM"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle. -<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> +Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut `max`. -<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3> +### {{htmlattrdef("readonly")}} -<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. La valeur de l'attribut <code>value</code> peut toutefois être modifiée grâce à du code JavaScript qui changerait la propriété {{domxref("HTMLInputElement.value")}}.</p> +Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. La valeur de l'attribut `value` peut toutefois être modifiée grâce à du code JavaScript qui changerait la propriété {{domxref("HTMLInputElement.value")}}. -<div class="note"> -<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura aucun effet si l'attribut <code>readonly</code> est défini.</p> -</div> +> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura aucun effet si l'attribut `readonly` est défini. -<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> +### {{htmlattrdef("step")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> +{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} -<p>Pour les champs <code>month</code>, la valeur de l'attribut <code>step</code> est exprimée en mois et le facteur d'amplification est égal à 1 (la valeur sous-jacente est également exprimée en mois). La valeur par défaut pour cet attribut est 1.</p> +Pour les champs `month`, la valeur de l'attribut `step` est exprimée en mois et le facteur d'amplification est égal à 1 (la valeur sous-jacente est également exprimée en mois). La valeur par défaut pour cet attribut est 1. -<h2 id="Utiliser_<input_typemonth>">Utiliser <code><input type="month"></code></h2> +## Utiliser `<input type="month">` -<p>Un élément <code><input></code> de type <code>month</code> permet d'avoir une interface utilisateur simple d'utilisation pour choisir un mois et également de respecter un même format, quelle que soit la locale de l'utilisateur. Toutefois, <code><input type="month"></code> n'est pas pris en charge par l'ensemble des navigateurs ce qui peut poser problème.</p> +Un élément `<input>` de type `month` permet d'avoir une interface utilisateur simple d'utilisation pour choisir un mois et également de respecter un même format, quelle que soit la locale de l'utilisateur. Toutefois, `<input type="month">` n'est pas pris en charge par l'ensemble des navigateurs ce qui peut poser problème. -<p>Nous verrons ici quelques cas d'utilisation, simples puis complexes et nous aborderons ensuite comment gérer l'absence de prise en charge.</p> +Nous verrons ici quelques cas d'utilisation, simples puis complexes et nous aborderons ensuite comment gérer l'absence de prise en charge. -<h3 id="Utilisation_simple">Utilisation simple</h3> +### Utilisation simple -<p>Dans son expression la plus simple, il suffit d'employer un élément <code><input></code> ainsi qu'un élément {{htmlelement("label")}} :</p> +Dans son expression la plus simple, il suffit d'employer un élément `<input>` ainsi qu'un élément {{htmlelement("label")}} : -<pre class="brush: html"><form> - <label for="bday-month">Quel est le mois de votre naissance ?</label> - <input id="bday-month" type="month" name="bday-month"> -</form></pre> +```html +<form> + <label for="bday-month">Quel est le mois de votre naissance ?</label> + <input id="bday-month" type="month" name="bday-month"> +</form> +``` -<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p> +{{EmbedLiveSample('Utilisation_simple', 600, 40)}} -<h3 id="Indiquer_une_date_maximale_et_une_date_minimale">Indiquer une date maximale et une date minimale</h3> +### Indiquer une date maximale et une date minimale -<p>On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre la période pendant laquelle l'utilisateur peut choisir un mois. Dans l'exemple qui suit, on définit une date au plus tôt avec <code>1900-01</code> et une date au plus tard avec <code>2017-08</code>:</p> +On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre la période pendant laquelle l'utilisateur peut choisir un mois. Dans l'exemple qui suit, on définit une date au plus tôt avec `1900-01` et une date au plus tard avec `2017-08`: -<pre class="brush: html"><form> - <label for="bday-month">Quel est le mois de votre naissance ?</label> - <input id="bday-month" type="month" name="bday-month" - min="1900-01" max="2017-08"> -</form></pre> +```html +<form> + <label for="bday-month">Quel est le mois de votre naissance ?</label> + <input id="bday-month" type="month" name="bday-month" + min="1900-01" max="2017-08"> +</form> +``` -<p>{{EmbedLiveSample('Indiquer_une_date_maximale_et_une_date_minimale', 600, 40)}}</p> +{{EmbedLiveSample('Indiquer_une_date_maximale_et_une_date_minimale', 600, 40)}} -<p>Grâce ce fragment de code :</p> +Grâce ce fragment de code : -<ul> - <li>Seuls les mois entre janvier 1900 et août 2017 peuvent être sélectionnés (le contrôle ne doit pas permettre de sélectionner un mois en dehors de cette période)</li> - <li>Selon le navigateur, les mois en dehors de la période ne peuvent pas être sélectionnés (Edge) ou sont invalides mais toujours disponibles (Chrome).</li> -</ul> +- Seuls les mois entre janvier 1900 et août 2017 peuvent être sélectionnés (le contrôle ne doit pas permettre de sélectionner un mois en dehors de cette période) +- Selon le navigateur, les mois en dehors de la période ne peuvent pas être sélectionnés (Edge) ou sont invalides mais toujours disponibles (Chrome). -<div class="note"> -<p><strong>Note :</strong> L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité.</p> -</div> +> **Note :** L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité. -<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> +### Contrôler la taille du champ -<p><code><input type="month"></code> ne peut pas être dimensionné grâce à {{htmlattrxref("size", "input")}}, il vous faudra utiliser <a href="/fr/docs/Web/CSS">CSS</a> si besoin.</p> +`<input type="month">` ne peut pas être dimensionné grâce à {{htmlattrxref("size", "input")}}, il vous faudra utiliser [CSS](/fr/docs/Web/CSS) si besoin. -<h2 id="Validation">Validation</h2> +## Validation -<p>Par défaut, <code><input type="month"></code> n'applique pas de validation particulière sur la valeur saisie. C'est l'interface utilisateur qui ne permet pas de choisir autre chose qu'un mois.</p> +Par défaut, `<input type="month">` n'applique pas de validation particulière sur la valeur saisie. C'est l'interface utilisateur qui ne permet pas de choisir autre chose qu'un mois. -<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de limiter la période valide et l'attribut {{htmlattrxref("required", "input")}} rend le champ obligatoire. Avec ces attributs, les navigateurs afficheront un message d'erreur si la date choisie est hors de la période ou si la valeur est vide.</p> +Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de limiter la période valide et l'attribut {{htmlattrxref("required", "input")}} rend le champ obligatoire. Avec ces attributs, les navigateurs afficheront un message d'erreur si la date choisie est hors de la période ou si la valeur est vide. -<p>Prenons un exemple avec une période délimitée et un champ obligatoire :</p> +Prenons un exemple avec une période délimitée et un champ obligatoire : -<pre class="brush: html"><form> - <div> - <label for="month">À quel mois souhaitez-vous venir cet été ?</label> - <input id="month" type="month" name="month" - min="2017-06" max="2017-09" required> - <span class="validity"></span> - </div> - <div> - <input type="submit" value="Envoyer le formulaire"> - </div> -</form></pre> +```html +<form> + <div> + <label for="month">À quel mois souhaitez-vous venir cet été ?</label> + <input id="month" type="month" name="month" + min="2017-06" max="2017-09" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Envoyer le formulaire"> + </div> +</form> +``` -<p>Si vous tentez d'envoyer le formulaire avec une date incomplète ou en dehors de cette période, le navigateur doit afficher un message d'erreur. Voici le résultat <em>live</em> :</p> +Si vous tentez d'envoyer le formulaire avec une date incomplète ou en dehors de cette période, le navigateur doit afficher un message d'erreur. Voici le résultat _live_ : -<p>{{EmbedLiveSample('Validation', 600, 120)}}</p> +{{EmbedLiveSample('Validation', 600, 120)}} -<p>Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité :</p> +Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité : -<p><img alt="" src="month-required.png"></p> + -<p>Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré.</p> +Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré. -<pre class="brush: css">div { +```css +div { margin-bottom: 10px; position: relative; } @@ -207,52 +193,52 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> +} +``` -<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> +> **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. -<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> +## Gérer la prise en charge des navigateurs -<p>Comme évoqué plus haut, le problème principal relatif à ces contrôles est l'absence partielle de prise en charge des navigateurs. Seuls Chrome, Opera et Edge supportent ce type de contrôle sur ordinateurs et la plupart des navigateurs mobiles le prennent en charge. À titre d'exemple, voici une capture d'écran du contrôle sous Chrome pour Android :</p> +Comme évoqué plus haut, le problème principal relatif à ces contrôles est l'absence partielle de prise en charge des navigateurs. Seuls Chrome, Opera et Edge supportent ce type de contrôle sur ordinateurs et la plupart des navigateurs mobiles le prennent en charge. À titre d'exemple, voici une capture d'écran du contrôle sous Chrome pour Android : -<p><img alt="" src="month-android.png"></p> + -<p>Les navigateurs qui ne prennent pas en charge cette fonctionnalité basculent sur un contrôle textuel classique mais cela pose problème à la fois en termes de cohérence de l'interface utilisateur et aussi par rapport à la gestion des données.</p> +Les navigateurs qui ne prennent pas en charge cette fonctionnalité basculent sur un contrôle textuel classique mais cela pose problème à la fois en termes de cohérence de l'interface utilisateur et aussi par rapport à la gestion des données. -<p>C'est ce deuxième aspect qui est le plus problématique. Comme nous l'avons mentionné, la valeur d'une date saisie dans un contrôle <code><input type="month"></code> est toujours normalisée au format <code>"YYYY-MM"</code>. En revanche, avec un champ textuel, le navigateur ne convertit pas la valeur saisie et les personnes peuvent très bien écrire un mois sous plusieurs formes :</p> +C'est ce deuxième aspect qui est le plus problématique. Comme nous l'avons mentionné, la valeur d'une date saisie dans un contrôle `<input type="month">` est toujours normalisée au format `"YYYY-MM"`. En revanche, avec un champ textuel, le navigateur ne convertit pas la valeur saisie et les personnes peuvent très bien écrire un mois sous plusieurs formes : -<ul> - <li><code>MMYYYY</code></li> - <li><code>MM/YYYY</code></li> - <li><code>MM-YYYY</code></li> - <li><code>YYYY-MM</code></li> - <li>etc.</li> -</ul> +- `MMYYYY` +- `MM/YYYY` +- `MM-YYYY` +- `YYYY-MM` +- etc. -<p>Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur l'élément <code><input type="month"></code>. Bien que le contrôle de type <code>month</code> ne gère pas cet attribut, ce dernier sera pris en charge par le champ texte. Vous pouvez essayer l'exemple suivant dans un navigateur qui ne prend pas en charge le contrôle de saisie des mois :</p> +Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur l'élément `<input type="month">`. Bien que le contrôle de type `month` ne gère pas cet attribut, ce dernier sera pris en charge par le champ texte. Vous pouvez essayer l'exemple suivant dans un navigateur qui ne prend pas en charge le contrôle de saisie des mois : -<pre class="brush: html"><form> - <div> - <label for="month">À quel mois souhaitez-vous venir cet été ? (utilisez le format yyyy-mm)</label> - <input id="month" type="month" name="month" +```html +<form> + <div> + <label for="month">À quel mois souhaitez-vous venir cet été ? (utilisez le format yyyy-mm)</label> + <input id="month" type="month" name="month" min="2017-06" max="2017-09" required - pattern="[0-9]{4}-[0-9]{2}"> - <span class="validity"></span> - </div> - <div> - <input type="submit" value="Envoyer le formulaire"> - </div> -</form></pre> + pattern="[0-9]{4}-[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Envoyer le formulaire"> + </div> +</form> +``` -<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p> +{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}} -<p>Si vous tentez d'envoyer ce formulaire, vous verrez un message d'erreur si la valeur saisie ne respecte pas le format <code>nnnn-nn</code>, où <code>n</code> est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates inexistantes ou au mauvais format.</p> +Si vous tentez d'envoyer ce formulaire, vous verrez un message d'erreur si la valeur saisie ne respecte pas le format `nnnn-nn`, où `n` est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates inexistantes ou au mauvais format. -<p>De plus, cela présage que l'utilisateur comprenne le format dans lequel il faut saisir la valeur. Bref, le problème subsiste.</p> +De plus, cela présage que l'utilisateur comprenne le format dans lequel il faut saisir la valeur. Bref, le problème subsiste. -<pre class="brush: css hidden">div { +```css hidden +div { margin-bottom: 10px; position: relative; } @@ -275,56 +261,60 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> - -<p>La meilleure façon de gérer la saisie de mois pour l'ensemble des navigateurs consiste actuellement à saisir le mois et l'année dans deux contrôles séparés, représentés chacun par un élément {{htmlelement("select")}}. On peut également utiliser certaines bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> ou le plugin <a href="http://timepicker.co/">jQuery timepicker</a>.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Dans l'exemple qui suit, on crée deux ensembles d'éléments pour choisir un mois : un sélecteur natif <code><input type="month"></code> d'une part et un ensemble de deux éléments {{htmlelement("select")}} pour choisir le mois et l'année d'autre part (ce sont ces deux éléments qui seront utilisés lorsque le navigateur ne prend pas en charge le contrôle natif).</p> - -<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p> - -<p>Voici le fragment de code HTML utilisé :</p> - -<pre class="brush: html"><form> - <div class="nativeDatePicker"> - <label for="month-visit">À quel mois souhaitez-vous venir cet été ?</label> - <input type="month" id="month-visit" name="month-visit"> - <span class="validity"></span> - </div> - <p class="fallbackLabel">À quel mois souhaitez-vous venir cet été ?</p> - <div class="fallbackDatePicker"> - <div> - <span> - <label for="month">Mois :</label> - <select id="month" name="month"> - <option selected>Janvier</option> - <option>Février</option> - <option>Mars</option> - <option>Avril</option> - <option>Mai</option> - <option>Juin</option> - <option>Juillet</option> - <option>Août</option> - <option>Septembre</option> - <option>Octobre</option> - <option>Novembre</option> - <option>Décembre</option> - </select> - </span> - <span> - <label for="year">Année :</label> - <select id="year" name="year"> - </select> - </span> - </div> - </div> -</form></pre> - -<p>Les mois sont représentés statiquement (ce sont toujours les mêmes) et les valeurs pour les années sont générées dynamiquement à partir de l'année courante (voir les commentaires dans le code suivant).</p> - -<pre class="brush: css hidden">div { +} +``` + +La meilleure façon de gérer la saisie de mois pour l'ensemble des navigateurs consiste actuellement à saisir le mois et l'année dans deux contrôles séparés, représentés chacun par un élément {{htmlelement("select")}}. On peut également utiliser certaines bibliothèques JavaScript telles que [jQuery date picker](https://jqueryui.com/datepicker/) ou le plugin [jQuery timepicker](http://timepicker.co/). + +## Exemples + +Dans l'exemple qui suit, on crée deux ensembles d'éléments pour choisir un mois : un sélecteur natif `<input type="month">` d'une part et un ensemble de deux éléments {{htmlelement("select")}} pour choisir le mois et l'année d'autre part (ce sont ces deux éléments qui seront utilisés lorsque le navigateur ne prend pas en charge le contrôle natif). + +{{EmbedLiveSample('Exemples', 600, 140)}} + +Voici le fragment de code HTML utilisé : + +```html +<form> + <div class="nativeDatePicker"> + <label for="month-visit">À quel mois souhaitez-vous venir cet été ?</label> + <input type="month" id="month-visit" name="month-visit"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">À quel mois souhaitez-vous venir cet été ?</p> + <div class="fallbackDatePicker"> + <div> + <span> + <label for="month">Mois :</label> + <select id="month" name="month"> + <option selected>Janvier</option> + <option>Février</option> + <option>Mars</option> + <option>Avril</option> + <option>Mai</option> + <option>Juin</option> + <option>Juillet</option> + <option>Août</option> + <option>Septembre</option> + <option>Octobre</option> + <option>Novembre</option> + <option>Décembre</option> + </select> + </span> + <span> + <label for="year">Année :</label> + <select id="year" name="year"> + </select> + </span> + </div> + </div> +</form> +``` + +Les mois sont représentés statiquement (ce sont toujours les mêmes) et les valeurs pour les années sont générées dynamiquement à partir de l'année courante (voir les commentaires dans le code suivant). + +```css hidden +div { margin-bottom: 10px; position: relative; } @@ -347,11 +337,13 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> +} +``` -<p>Une partie intéressante du code est celle qui permet de détecter la prise en charge de fonctionnalité. Pour détecter si le navigateur prend en charge ce contrôle, on crée un nouvel élément {{htmlelement("input")}} dont on modifie le type afin qu'il vaille <code>month</code> puis on vérifie immédiatement la valeur associée au type : les navigateurs qui ne prennent pas en charge la fonctionnalité renverront <code>text</code> car le champ <code>month</code> a automatiquement transformé en <code>text</code>. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui construit avec les éléments {{htmlelement("select")}}).</p> +Une partie intéressante du code est celle qui permet de détecter la prise en charge de fonctionnalité. Pour détecter si le navigateur prend en charge ce contrôle, on crée un nouvel élément {{htmlelement("input")}} dont on modifie le type afin qu'il vaille `month` puis on vérifie immédiatement la valeur associée au type : les navigateurs qui ne prennent pas en charge la fonctionnalité renverront `text` car le champ `month` a automatiquement transformé en `text`. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui construit avec les éléments {{htmlelement("select")}}). -<pre class="brush: js">// On définit des variables +```js +// On définit des variables var nativePicker = document.querySelector('.nativeDatePicker'); var fallbackPicker = document.querySelector('.fallbackDatePicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); @@ -384,73 +376,72 @@ function populateYears() { var year = date.getFullYear(); // On ajoute l'année courante et les 100 années à venir - // dans l'élément <select> pour l'année - for(var i = 0; i <= 100; i++) { + // dans l'élément <select> pour l'année + for(var i = 0; i <= 100; i++) { var option = document.createElement('option'); option.textContent = year-i; yearSelect.appendChild(option); } -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p> -</div> +> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. -<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 mois et une année ou bien la chaîne 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("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>value</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères ({{domxref("DOMString")}}) qui + représente un mois et une année ou bien la chaîne 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("readonly", "input")}} et + {{htmlattrxref("step", "input")}}. + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}}, + {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, + {{domxref("HTMLInputElement.stepUp", "stepUp()")}}. + </td> + </tr> + </tbody> </table> -<h2 id="Specifications">Specifications</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#month-state-(type=month)', '<input type="month">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Specifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'forms.html#month-state-(type=month)', '<input type="month">')}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-month")}}</p> +{{Compat("html.elements.input.input-month")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément générique {{HTMLElement("input")}} et l'interface DOM qui permet de le manipuler : {{domxref("HTMLInputElement")}}</li> - <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire">Un tutoriel à propos des sélecteurs de dates et d'heures</a></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/time"><input type="time"></a></code>, and <code><a href="/fr/docs/Web/HTML/Element/input/week"><input type="week"></a></code></li> -</ul> +- L'élément générique {{HTMLElement("input")}} et l'interface DOM qui permet de le manipuler : {{domxref("HTMLInputElement")}} +- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML) +- [Un tutoriel à propos des sélecteurs de dates et d'heures](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire) +- [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local), [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date), [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time), and [`<input type="week">`](/fr/docs/Web/HTML/Element/input/week) diff --git a/files/fr/web/html/element/input/number/index.md b/files/fr/web/html/element/input/number/index.md index 8e9cbf1e5b..b352c2265f 100644 --- a/files/fr/web/html/element/input/number/index.md +++ b/files/fr/web/html/element/input/number/index.md @@ -8,225 +8,209 @@ tags: - Reference translation_of: Web/HTML/Element/input/number --- -<div>{{HTMLRef}}</div> - -<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>number</strong></code> permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques. Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div> - -<div class="note"> -<p><strong>Note :</strong> Si un navigateur ne prend pas en charge le type <code>number</code>, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. <code><a href="/fr/docs/Web/HTML/Element/input/text">text</a></code>).</p> -</div> - -<h2 id="Valeur">Valeur</h2> - -<p>Un nombre (cf. {{jsxref("Number")}}) qui représente la valeur saisie dans le contrôle. Il est possible d'indiquer une valeur par défaut en utilisant l'attribut {{htmlattrxref("value", "input")}} :</p> - -<pre class="brush: html"><input id="number" type="number" value="42"></pre> - -<p>{{EmbedLiveSample('Valeur', 600, 40)}}</p> - -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> - -<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"number"</code> peuvent utiliser les attributs suivants :</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("max")}}</code></td> - <td>La valeur maximale qui peut être acceptée.</td> - </tr> - <tr> - <td><code>{{anch("min")}}</code></td> - <td>La valeur minimale qui peut être acceptée.</td> - </tr> - <tr> - <td><code>{{anch("placeholder")}}</code></td> - <td>Une valeur fournie comme exemple affiché lorsque le champ est vide.</td> - </tr> - <tr> - <td><code>{{anch("readonly")}}</code></td> - <td>Un attribut booléen qui contrôle si le champ est en lecture seule.</td> - </tr> - <tr> - <td><code>{{anch("step")}}</code></td> - <td>Le pas à utiliser pour incrémenter la valeur à l'aide du contrôle fourni par l'agent utilisateur. Cet incrément est également utilisé pour la validation de la valeur.</td> - </tr> - </tbody> -</table> +{{HTMLRef}} + +Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`number`** permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques. Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt. + +{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}} + +> **Note :** Si un navigateur ne prend pas en charge le type `number`, le contrôle affiché sera le contrôle standard pour la saisie d'un texte (cf. [`text`](/fr/docs/Web/HTML/Element/input/text)). + +## Valeur + +Un nombre (cf. {{jsxref("Number")}}) qui représente la valeur saisie dans le contrôle. Il est possible d'indiquer une valeur par défaut en utilisant l'attribut {{htmlattrxref("value", "input")}} : + +```html +<input id="number" type="number" value="42"> +``` + +{{EmbedLiveSample('Valeur', 600, 40)}} -<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> +## Attributs supplémentaires -<p>La valeur maximale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, l'élément <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne pourra être validé</a>. Si la valeur de l'attribut <code>max</code> n'est pas un nombre, l'élément n'aura pas de maximum.</p> +En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"number"` peuvent utiliser les attributs suivants : -<p>Cette valeur doit être supérieure ou égale à l'attribut <code>min</code>.</p> +| Attribut | Description | +| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("max")}}` | La valeur maximale qui peut être acceptée. | +| `{{anch("min")}}` | La valeur minimale qui peut être acceptée. | +| `{{anch("placeholder")}}` | Une valeur fournie comme exemple affiché lorsque le champ est vide. | +| `{{anch("readonly")}}` | Un attribut booléen qui contrôle si le champ est en lecture seule. | +| `{{anch("step")}}` | Le pas à utiliser pour incrémenter la valeur à l'aide du contrôle fourni par l'agent utilisateur. Cet incrément est également utilisé pour la validation de la valeur. | -<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> +### {{htmlattrdef("max")}} -<p>La valeur minimale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, l'élément <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne pourra être validé</a>. Si la valeur de l'attribut <code>min</code> n'est pas un nombre, l'élément n'aura pas de minimum.</p> +La valeur maximale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, l'élément [ne pourra être validé](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `max` n'est pas un nombre, l'élément n'aura pas de maximum. -<p>Cette valeur doit être inférieure ou égale à l'attribut <code>max</code>.</p> +Cette valeur doit être supérieure ou égale à l'attribut `min`. -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> +### {{htmlattrdef("min")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> +La valeur minimale qui peut être acceptée pour ce champ. Si la valeur du champ (portée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, l'élément [ne pourra être validé](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `min` n'est pas un nombre, l'élément n'aura pas de minimum. -<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> +Cette valeur doit être inférieure ou égale à l'attribut `max`. -<p>L'attribut <code>step</code> est un nombre qui définit la granularité de la valeur ou le mot-clé <code>any</code>. Seule les valeurs qui sont des multiples de cet attribut depuis le seuil <code>{{anch("min")}}</code> sont valides.</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} -<p>Lorsque la chaîne de caractères <code>any</code> est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur (comprise entre <code>{{anch("min")}}</code> et <code>{{anch("max")}}</code>) est valide.</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} -<div class="note"> -<p><strong>Note :</strong> Lorsque les données saisies par l'utilisateur ne correspondent pas à l'incrément indiqué, l'agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants.</p> -</div> +### {{htmlattrdef("step")}} -<p>Pour les champs <code>number</code>, l'incrément par défaut est 1 et ne permet donc que de saisir des entiers si la valeur de base est entière. Ainsi, si on a <code>min</code> qui vaut -10 et <code>value</code> qui vaut 1.5, si on a <code>step</code> qui vaut 1, seules les valeurs 1.5, 2.5, 3.5,... -0.5, -1.5, -2.5,... seront valides.</p> +L'attribut `step` est un nombre qui définit la granularité de la valeur ou le mot-clé `any`. Seule les valeurs qui sont des multiples de cet attribut depuis le seuil `{{anch("min")}}` sont valides. -<h2 id="Utiliser_les_contrôles_de_saisie_numérique">Utiliser les contrôles de saisie numérique</h2> +Lorsque la chaîne de caractères `any` est utilisée, cela indique qu'aucun incrément spécifique n'est défini et que toute valeur (comprise entre `{{anch("min")}}` et `{{anch("max")}}`) est valide. -<p>Les éléments <code><input type="number"></code> simplifient la saisie de valeurs numériques dans un formulaire. Lorsqu'on crée un tel contrôle, des mécanismes de validation automatiques sont appliqués afin de vérifier que le texte saisi est bien un nombre. Généralement un contrôle de saisie numérique incluera des boutons avec des curseurs pour augmenter/réduire la valeur.</p> +> **Note :** Lorsque les données saisies par l'utilisateur ne correspondent pas à l'incrément indiqué, l'agent utilisateur pourra arrondir à la valeur valide la plus proche (en choisissant les nombres les plus grands lorsque deux sont équidistants. -<div class="warning"> -<p><strong>Attention :</strong> On notera qu'un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir {{bug(1398528)}}). Les valeurs non-numériques seront considérées comme invalide (cf. {{anch("Validation")}} ci-après).</p> -</div> +Pour les champs `number`, l'incrément par défaut est 1 et ne permet donc que de saisir des entiers si la valeur de base est entière. Ainsi, si on a `min` qui vaut -10 et `value` qui vaut 1.5, si on a `step` qui vaut 1, seules les valeurs 1.5, 2.5, 3.5,... -0.5, -1.5, -2.5,... seront valides. -<div class="note"> -<p><strong>Note :</strong> Il est important de rappeler qu'un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur.</p> -</div> +## Utiliser les contrôles de saisie numérique -<p>De plus, les navigateurs mobiles peuvent adapter leur ergonomie en affichant un clavier adapté à la saisie de valeur numérique lorsque l'utilisateur appuie sur un tel contrôle. Voici le résultat qu'on obtient par exemple avec Firefox pour Android :</p> +Les éléments `<input type="number">` simplifient la saisie de valeurs numériques dans un formulaire. Lorsqu'on crée un tel contrôle, des mécanismes de validation automatiques sont appliqués afin de vérifier que le texte saisi est bien un nombre. Généralement un contrôle de saisie numérique incluera des boutons avec des curseurs pour augmenter/réduire la valeur. -<h3 id="Un_contrôle_simple">Un contrôle simple</h3> +> **Attention :** On notera qu'un utilisateur peut toujours saisir des valeurs qui ne sont pas numériques dans de tels champs (par exemple avec un navigateur de bureau). Toutefois, ce comportement semble différer selon les navigateurs (voir {{bug(1398528)}}). Les valeurs non-numériques seront considérées comme invalide (cf. {{anch("Validation")}} ci-après). -<p>Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numérique avec le fragment HTML suivant :</p> +> **Note :** Il est important de rappeler qu'un utilisateur peut tout à fait modifier le code HTML qui est utilisé. Le site ne doit donc pas se reposer sur les mécanismes de validation qui existent côté client pour considérer qu'une valeur est saine. Pour des raisons de contrôle et de sécurité, les valeurs envoyées via un formulaire doivent être vérifiées côté serveur. -<pre class="brush: html"><label for="ticketNum">Nombre de tickets à acheter :</label> -<input id="ticketNum" type="number" name="ticketNum" value="0"></pre> +De plus, les navigateurs mobiles peuvent adapter leur ergonomie en affichant un clavier adapté à la saisie de valeur numérique lorsque l'utilisateur appuie sur un tel contrôle. Voici le résultat qu'on obtient par exemple avec Firefox pour Android : -<p>{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}</p> +### Un contrôle simple -<p>Un contrôle de saisie numérique considère que la valeur est valide si elle est vide ou quand un nombre est saisi. Dans les autres cas, la valeur est considérée invalide. Si l'attribut {{htmlattrxref("required", "input")}} est utilisé, la valeur vide n'est plus considérée valide.</p> +Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numérique avec le fragment HTML suivant : -<div class="note"> -<p><strong>Note :</strong> N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number">comme un nombre à virgule flottante</a> (autrement dit, un nombre qui n'est pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}).</p> -</div> +```html +<label for="ticketNum">Nombre de tickets à acheter :</label> +<input id="ticketNum" type="number" name="ticketNum" value="0"> +``` -<h3 id="Indicateurs_de_saisie_-_placeholders">Indicateurs de saisie - <em>placeholders</em></h3> +{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}} -<p>Il est parfois utile de fournir une indication quant à la valeur qui devrait être saisie. C'est notamment le cas lorsque la disposition de la page ne permet pas d'avoir d'étiquettes suffisamment descriptives pour chaque {{HTMLElement("input")}}. Dans ces cas, on peut utiliser l'attribut <code>placeholder</code> afin de fournir une indication et qui sera le texte affiché dans le contrôle avant toute saisie ou quand la valeur est vide.</p> +Un contrôle de saisie numérique considère que la valeur est valide si elle est vide ou quand un nombre est saisi. Dans les autres cas, la valeur est considérée invalide. Si l'attribut {{htmlattrxref("required", "input")}} est utilisé, la valeur vide n'est plus considérée valide. -<p>Dans l'exemples qui suit, on utilise un élément <code><input</code><code>></code> de type <code>"number"</code> avec le texte indicatif <code>"Multiple de 10"</code>. Vous pouvez noter la façon dont le texte disparaît/réapparaît à selon la présence ou l'absence de valeur dans le champ.</p> +> **Note :** N'importe quel nombre est valide tant que c'est un nombre qui peut être représenté [comme un nombre à virgule flottante](https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number) (autrement dit, un nombre qui n'est pas {{jsxref("NaN")}} ou {{jsxref("Infinity")}}). -<pre class="brush: html"><input type="number" placeholder="Multiple de 10"></pre> +### Indicateurs de saisie - _placeholders_ -<p>{{ EmbedLiveSample('Indicateurs_de_saisie_-_placeholders', 600, 40) }}</p> +Il est parfois utile de fournir une indication quant à la valeur qui devrait être saisie. C'est notamment le cas lorsque la disposition de la page ne permet pas d'avoir d'étiquettes suffisamment descriptives pour chaque {{HTMLElement("input")}}. Dans ces cas, on peut utiliser l'attribut `placeholder` afin de fournir une indication et qui sera le texte affiché dans le contrôle avant toute saisie ou quand la valeur est vide. -<h3 id="Paramétrer_la_taille_de_l’incrément">Paramétrer la taille de l’incrément</h3> +Dans l'exemples qui suit, on utilise un élément ` <input``> ` de type `"number"` avec le texte indicatif `"Multiple de 10"`. Vous pouvez noter la façon dont le texte disparaît/réapparaît à selon la présence ou l'absence de valeur dans le champ. -<p>Par défaut, les curseurs fournis pour incrémenter/décrémenter la valeur utilisent un pas de 1. Ce comportement par défaut peut être changé en utilisant l'attribut {{htmlattrxref("step", "input")}} dont la valeur représente le pas d'incrémentation. Dans l'exemple qui suit et parce que le texte informatif indique "Multiple de 10", on utilise un pas de 10 grâce à l'attribut <code>step</code> :</p> +```html +<input type="number" placeholder="Multiple de 10"> +``` -<pre class="brush: html"><input type="number" placeholder="Multiple de 10" step="10"></pre> +{{ EmbedLiveSample('Indicateurs_de_saisie_-_placeholders', 600, 40) }} -<p>{{EmbedLiveSample("Paramétrer_la_taille_de_l’incrément", 600, 40)}}</p> +### Paramétrer la taille de l’incrément -<p>Dans cet exemple, on peut voir que les curseurs permettent d'augmenter ou de réduire la valeur de 10 (et non de 1). Il est toujours possible de saisir manuellement un nombre qui n'est pas un multiple de 10 mais la valeur sera alors considérée invalide.</p> +Par défaut, les curseurs fournis pour incrémenter/décrémenter la valeur utilisent un pas de 1. Ce comportement par défaut peut être changé en utilisant l'attribut {{htmlattrxref("step", "input")}} dont la valeur représente le pas d'incrémentation. Dans l'exemple qui suit et parce que le texte informatif indique "Multiple de 10", on utilise un pas de 10 grâce à l'attribut `step` : -<h3 id="Indiquer_un_minimum_et_un_maximum">Indiquer un minimum et un maximum</h3> +```html +<input type="number" placeholder="Multiple de 10" step="10"> +``` -<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être employés afin d'indiquer les bornes de l'intervalle dans lequel doit se situer la valeur. Par exemple, avec le fragment HTML suivant, on indique que le minimum vaut 0 et que le maximum vaut 100 :</p> +{{EmbedLiveSample("Paramétrer_la_taille_de_l’incrément", 600, 40)}} -<pre class="brush: html"><input type="number" placeholder="Multiple de 10" step="10" min="0" max="100"></pre> +Dans cet exemple, on peut voir que les curseurs permettent d'augmenter ou de réduire la valeur de 10 (et non de 1). Il est toujours possible de saisir manuellement un nombre qui n'est pas un multiple de 10 mais la valeur sera alors considérée invalide. -<p>{{EmbedLiveSample('Indiquer_un_minimum_et_un_maximum', 600, 40)}}</p> +### Indiquer un minimum et un maximum -<p>Dans cet exemple, les curseurs ne permettent pas de dépasser 100 ou de saisir une valeur inférieure à 0. Il est toujours possible de saisir manuellement un nombre en dehors de ces bornes mais la valeur sera alors considérée invalide.</p> +Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être employés afin d'indiquer les bornes de l'intervalle dans lequel doit se situer la valeur. Par exemple, avec le fragment HTML suivant, on indique que le minimum vaut 0 et que le maximum vaut 100 : -<h3 id="Autoriser_les_valeurs_décimales">Autoriser les valeurs décimales</h3> +```html +<input type="number" placeholder="Multiple de 10" step="10" min="0" max="100"> +``` -<p>Par défaut, l'incrément d'un tel contrôle vaut 1 et si on saisit la valeur <code>1.0</code>, elle sera considérée invalide. Si on souhaite pouvoir saisir une valeur qui contient une partie décimale, on pourra utiliser l'attribut <code>step</code> (par exemple, on pourra utiliser <code>step="0.01"</code> pour autoriser des nombres avec deux chiffres après la virgules) :</p> +{{EmbedLiveSample('Indiquer_un_minimum_et_un_maximum', 600, 40)}} -<pre class="brush: html"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> +Dans cet exemple, les curseurs ne permettent pas de dépasser 100 ou de saisir une valeur inférieure à 0. Il est toujours possible de saisir manuellement un nombre en dehors de ces bornes mais la valeur sera alors considérée invalide. -<p>{{EmbedLiveSample("Autoriser_les_valeurs_décimales", 600, 40)}}</p> +### Autoriser les valeurs décimales -<p>Dans cet exemple, on peut saisir des valeurs comprises entre 0 et 10 et qui ont au plus deux chiffres après la virgule, "9.52" sera considérée comme valide mais pas "9.521".</p> +Par défaut, l'incrément d'un tel contrôle vaut 1 et si on saisit la valeur `1.0`, elle sera considérée invalide. Si on souhaite pouvoir saisir une valeur qui contient une partie décimale, on pourra utiliser l'attribut `step` (par exemple, on pourra utiliser `step="0.01"` pour autoriser des nombres avec deux chiffres après la virgules) : -<h3 id="Paramétrer_la_taille_du_contrôle">Paramétrer la taille du contrôle</h3> +```html +<input type="number" placeholder="1.0" step="0.01" min="0" max="10"> +``` -<p>Les éléments {{HTMLElement("input")}} de type <code>"number"</code> ne prennent pas en charge l'attribut {{htmlattrxref("size", "input")}} et il est donc nécessaire d'utiliser CSS afin de modifier la taille des contrôles.</p> +{{EmbedLiveSample("Autoriser_les_valeurs_décimales", 600, 40)}} -<p>Par exemple, si on souhaite réduire la largeur du contrôle car il ne permet que de saisir un nombre à trois chiffres, on ajoute un identifiant sur l'élément et on réduit le texte indicatif afin qu'il ne soit pas tronqué :</p> +Dans cet exemple, on peut saisir des valeurs comprises entre 0 et 10 et qui ont au plus deux chiffres après la virgule, "9.52" sera considérée comme valide mais pas "9.521". -<pre class="brush: html"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> +### Paramétrer la taille du contrôle -<p>On ajoute ensuite une déclaration CSS dans la feuille de style pour l'élément avec un identifiant <code>"number"</code> :</p> +Les éléments {{HTMLElement("input")}} de type `"number"` ne prennent pas en charge l'attribut {{htmlattrxref("size", "input")}} et il est donc nécessaire d'utiliser CSS afin de modifier la taille des contrôles. -<pre class="brush: css">#number { +Par exemple, si on souhaite réduire la largeur du contrôle car il ne permet que de saisir un nombre à trois chiffres, on ajoute un identifiant sur l'élément et on réduit le texte indicatif afin qu'il ne soit pas tronqué : + +```html +<input type="number" placeholder="x10" step="10" min="0" max="100" id="number"> +``` + +On ajoute ensuite une déclaration CSS dans la feuille de style pour l'élément avec un identifiant `"number"` : + +```css +#number { width: 3em; -}</pre> +} +``` -<p>Le résultat ressemblera à :</p> +Le résultat ressemblera à : -<p>{{EmbedLiveSample('Paramétrer_la_taille_du_contrôle', 600, 40)}}</p> +{{EmbedLiveSample('Paramétrer_la_taille_du_contrôle', 600, 40)}} -<h3 id="Ajouter_des_valeurs_suggérées">Ajouter des valeurs suggérées</h3> +### Ajouter des valeurs suggérées -<p>Il est possible de fournir une liste d'options par défaut parmi lesquelles l'utilisateur pourra choisir. Pour cela, on renseignera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant (attribut <code>id</code>) d'un élément {{HTMLElement("datalist")}} contenant autant d'éléments {{HTMLElement("option")}} que de valeurs suggéréees. La valeur de l'attribut <code>value</code> de chaque élément <code><option></code> sera utilisée comme suggestion pour la saisie dans le contrôle.</p> +Il est possible de fournir une liste d'options par défaut parmi lesquelles l'utilisateur pourra choisir. Pour cela, on renseignera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant (attribut `id`) d'un élément {{HTMLElement("datalist")}} contenant autant d'éléments {{HTMLElement("option")}} que de valeurs suggéréees. La valeur de l'attribut `value` de chaque élément `<option>` sera utilisée comme suggestion pour la saisie dans le contrôle. -<pre class="brush: html"><input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> -<span class="validity"></span> +```html +<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers"> +<span class="validity"></span> -<datalist id="defaultNumbers"> - <option value="10045678"> - <option value="103421"> - <option value="11111111"> - <option value="12345678"> - <option value="12999922"> -</datalist></pre> +<datalist id="defaultNumbers"> + <option value="10045678"> + <option value="103421"> + <option value="11111111"> + <option value="12345678"> + <option value="12999922"> +</datalist> +``` -<p>{{EmbedLiveSample("Ajouter_des_valeurs_suggérées", 600, 40)}}</p> +{{EmbedLiveSample("Ajouter_des_valeurs_suggérées", 600, 40)}} -<div class="note"> -<p><strong>Note :</strong> L'attribut {{htmlattrxref("list", "input")}} pour les éléments <code><input></code> de type <code>"number"</code> n'est pas pris en charge pour tous les navigateurs (cela fonctionne pour Chrome et Opera mais pas pour Firefox par exemple).</p> -</div> +> **Note :** L'attribut {{htmlattrxref("list", "input")}} pour les éléments `<input>` de type `"number"` n'est pas pris en charge pour tous les navigateurs (cela fonctionne pour Chrome et Opera mais pas pour Firefox par exemple). -<h2 id="Validation">Validation</h2> +## Validation -<p>Plusieurs mécanismes de validation sont mis en place par le navigateur pour les contrôles de saisie numérique :</p> +Plusieurs mécanismes de validation sont mis en place par le navigateur pour les contrôles de saisie numérique : -<ul> - <li>Toute valeur qui n'est pas un nombre est considérée comme invalide (la valeur vide est uniquement considérée comme valide si l'attribut <code>required</code> est absent).</li> - <li>Toute valeur qui n'est pas un multiple de {{htmlattrxref("step", "input")}} est considérée comme invalide.</li> - <li>Toute valeur qui est inférieure à {{htmlattrxref("min", "input")}} ou supérieure à {{htmlattrxref("max", "input")}} est considérée comme invalide.</li> -</ul> +- Toute valeur qui n'est pas un nombre est considérée comme invalide (la valeur vide est uniquement considérée comme valide si l'attribut `required` est absent). +- Toute valeur qui n'est pas un multiple de {{htmlattrxref("step", "input")}} est considérée comme invalide. +- Toute valeur qui est inférieure à {{htmlattrxref("min", "input")}} ou supérieure à {{htmlattrxref("max", "input")}} est considérée comme invalide. -<p>L'exemple suivant illustre l'ensemble de ces fonctionnalités et quelques règles CSS ont été ajoutées afin d'afficher des icônes pour indiquer si la valeur saisie est valide ou invalide :</p> +L'exemple suivant illustre l'ensemble de ces fonctionnalités et quelques règles CSS ont été ajoutées afin d'afficher des icônes pour indiquer si la valeur saisie est valide ou invalide : -<pre class="brush: html"><form> - <div> - <label for="balloons">Quantité de ballons à commander (par 10) :</label> - <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> - <span class="validity"></span> - </div> - <div> - <input type="submit"> - </div> -</form></pre> +```html +<form> + <div> + <label for="balloons">Quantité de ballons à commander (par 10) :</label> + <input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required> + <span class="validity"></span> + </div> + <div> + <input type="submit"> + </div> +</form> +``` -<p>{{EmbedLiveSample("Validation", 600, 80)}}</p> +{{EmbedLiveSample("Validation", 600, 80)}} -<p>Vous pouvez essayer d'envoyer des données invalides (pas de valeur, une valeur inférieure à 0 ou supérieure à 100 ou une valeur qui n'est pas un multiple de 10) afin de voir les messages d'erreur fournis par le navigateur.</p> +Vous pouvez essayer d'envoyer des données invalides (pas de valeur, une valeur inférieure à 0 ou supérieure à 100 ou une valeur qui n'est pas un multiple de 10) afin de voir les messages d'erreur fournis par le navigateur. -<p>Voici les règles CSS appliquées :</p> +Voici les règles CSS appliquées : -<pre class="brush: css">div { +```css +div { margin-bottom: 10px; } @@ -238,57 +222,59 @@ input:invalid+span:after { input:valid+span:after { content: '✓'; padding-left: 5px; -}</pre> +} +``` -<p>Ici, on a utilisé les pseudo-classes {{cssxref(":invalid")}} et {{cssxref(":valid")}} afin d'afficher une icône selon le cas, à côté de l'élément {{htmlelement("span")}} ajdacent. On utilise un élément <code><span></code> séparé pour plus de flexibilité : certains navigateurs n'affichent pas le contenu généré par les pseudo-classes pour certains types de contrôle (cf. <a href="/fr/docs/Web/HTML/Element/input/date#Validation"><code><input type="date"></code></a>).</p> +Ici, on a utilisé les pseudo-classes {{cssxref(":invalid")}} et {{cssxref(":valid")}} afin d'afficher une icône selon le cas, à côté de l'élément {{htmlelement("span")}} ajdacent. On utilise un élément `<span>` séparé pour plus de flexibilité : certains navigateurs n'affichent pas le contenu généré par les pseudo-classes pour certains types de contrôle (cf. [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date#Validation)). -<div class="warning"> -<p><strong>Attention :</strong> la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).</p> -</div> +> **Attention :** la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur). -<h3 id="Utilisation_d'un_motif_de_validation">Utilisation d'un motif de validation</h3> +### Utilisation d'un motif de validation -<p>Les éléments <code><input type="number"></code> ne prennent pas en charge l'attribut {{htmlattrxref("pattern", "input")}} qui permet de restreindre les valeurs selon une expression rationnelle. En effet, les contrôles de saisie numérique sont destinés à contenir des nombres plutôt que des chaînes de caractères et les autres attributs permettent de paramétrer les valeurs recevables (cf. ci-avant).</p> +Les éléments `<input type="number">` ne prennent pas en charge l'attribut {{htmlattrxref("pattern", "input")}} qui permet de restreindre les valeurs selon une expression rationnelle. En effet, les contrôles de saisie numérique sont destinés à contenir des nombres plutôt que des chaînes de caractères et les autres attributs permettent de paramétrer les valeurs recevables (cf. ci-avant). -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple suivant, on crée un formulaire qui permet de saisir la taille d'un personne, par défaut exprimée en mètres et pour laquelle un bouton permet de la saisir en pieds (<em>feet</em>/<em>inches</em>).</p> +Dans l'exemple suivant, on crée un formulaire qui permet de saisir la taille d'un personne, par défaut exprimée en mètres et pour laquelle un bouton permet de la saisir en pieds (_feet_/_inches_). -<p>{{EmbedLiveSample("Exemples", 600, 100)}}</p> +{{EmbedLiveSample("Exemples", 600, 100)}} -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><form> - <div class="metersInputGroup"> - <label for="meters">Saisir votre taille — en mètres :</label> - <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required> - <span class="validity"></span> - </div> - <span>Saisir votre taille — </span> - <label for="feet">feet :</label> - <input id="feet" type="number" name="feet" min="0" step="1"> - <span class="validity"></span> - <label for="inches">inches :</label> - <input id="inches" type="number" name="inches" min="0" max="11" step="1"> - <span class="validity"></span> - </div> - <div> - <input type="button" class="meters" value="Saisir la taille en feet/inches"> - </div> - <div> - <input type="submit" value="Envoyer"> - </div> -</form></pre> +```html +<form> + <div class="metersInputGroup"> + <label for="meters">Saisir votre taille — en mètres :</label> + <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required> + <span class="validity"></span> + </div> + <span>Saisir votre taille — </span> + <label for="feet">feet :</label> + <input id="feet" type="number" name="feet" min="0" step="1"> + <span class="validity"></span> + <label for="inches">inches :</label> + <input id="inches" type="number" name="inches" min="0" max="11" step="1"> + <span class="validity"></span> + </div> + <div> + <input type="button" class="meters" value="Saisir la taille en feet/inches"> + </div> + <div> + <input type="submit" value="Envoyer"> + </div> +</form> +``` -<p>Ici on utilise l'attribut <code>step</code> avec la valeur <code>0.01</code> afin d'accepter une taille en centimètres. On fournit également un texte indicatif via <code>placeholder</code>.</p> +Ici on utilise l'attribut `step` avec la valeur `0.01` afin d'accepter une taille en centimètres. On fournit également un texte indicatif via `placeholder`. -<p>Par défaut on masque la saisie en pieds avec <code>class="hidden"</code>.</p> +Par défaut on masque la saisie en pieds avec `class="hidden"`. -<h3 id="CSS">CSS</h3> +### CSS -<p>La feuille CSS ressemble de près à celle vue précédemment :</p> +La feuille CSS ressemble de près à celle vue précédemment : -<pre class="brush: css">div { +```css +div { margin-bottom: 10px; position: relative; } @@ -311,13 +297,15 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> +} +``` -<h3 id="JavaScript">JavaScript</h3> +### JavaScript -<p>Enfin, voici le code JavaScript utilisé :</p> +Enfin, voici le code JavaScript utilisé : -<pre class="brush: js">var metersInputGroup = document.querySelector('.metersInputGroup'); +```js +var metersInputGroup = document.querySelector('.metersInputGroup'); var feetInputGroup = document.querySelector('.feetInputGroup'); var metersInput = document.querySelector('#meters'); var feetInput = document.querySelector('#feet'); @@ -351,73 +339,65 @@ switchBtn.addEventListener('click', function() { feetInput.value = ''; inchesInput.value = ''; } -});</pre> +}); +``` -<p>Après avoir déclaré quelques variables, on ajoute un gestionnaire d'évènements au bouton afin de gérer le changement d'unités. Lors de ce changement, on modifiera la classe du bouton et l'étiquette associée et on mettr à jour les valeurs affichées lorsque l'utilisateur appuie sur le bouton. On notera qu'il n'y a pas de mécanisme de conversion entre les mètres et les pieds (ce qui serait vraisemblablement implémenté dans une application réelle).</p> +Après avoir déclaré quelques variables, on ajoute un gestionnaire d'évènements au bouton afin de gérer le changement d'unités. Lors de ce changement, on modifiera la classe du bouton et l'étiquette associée et on mettr à jour les valeurs affichées lorsque l'utilisateur appuie sur le bouton. On notera qu'il n'y a pas de mécanisme de conversion entre les mètres et les pieds (ce qui serait vraisemblablement implémenté dans une application réelle). -<div class="note"> -<p><strong>Note :</strong> Lorsqu'on clique sur le bouton, on retire l'attribut <code>required</code> du champ de saisie masqué et on vide l'attribut <code>value</code> afin de pouvoir envoyer le formulaire si un des deux champs n'est pas renseigné.</p> -</div> +> **Note :** Lorsqu'on clique sur le bouton, on retire l'attribut `required` du champ de saisie masqué et on vide l'attribut `value` afin de pouvoir envoyer le formulaire si un des deux champs n'est pas renseigné. -<h2 id="Résumé_technique">Résumé technique</h2> +## Résumé technique <table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td>Un nombre ou une valeur 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 charges</strong></td> - <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Un nombre ou une valeur 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 charges</strong></td> + <td> + {{htmlattrxref("autocomplete", "input")}}, + {{htmlattrxref("list", "input")}}, + {{htmlattrxref("placeholder", "input")}}, + {{htmlattrxref("readonly", "input")}} + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list</code>, <code>value</code>, <code>valueAsNumber</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}}, + {{domxref("HTMLInputElement.stepUp", "stepUp()")}}, + {{domxref("HTMLInputElement.stepDown", "stepDown()")}} + </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#number-state-(type=number)', '<input type="number">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '<input type="number">')}}</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#number-state-(type=number)', '<input type="number">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | +| {{SpecName('HTML5.1', 'sec-forms.html#number-state-typenumber', '<input type="number">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-number")}}</p> +{{Compat("html.elements.input.input-number")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> -</ul> +- [Guide sur les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) +- {{HTMLElement("input")}} +- [`<input type="tel">`](/fr/docs/Web/HTML/Element/input/tel) diff --git a/files/fr/web/html/element/input/password/index.md b/files/fr/web/html/element/input/password/index.md index 7585571836..3099a4465e 100644 --- a/files/fr/web/html/element/input/password/index.md +++ b/files/fr/web/html/element/input/password/index.md @@ -9,273 +9,263 @@ tags: - Web translation_of: Web/HTML/Element/input/password --- -<div>{{HTMLRef}}</div> - -<p>Les éléments {{HTMLElement("input")}} de type <strong><code>"password"</code></strong> permettent à utilisateur de saisir un mot de passe sans que celui-ci ne soit lisible à l'écran. Un tel élément se présente comme un contrôle de saisie de texte sur une ligne et dans lequel chaque caractère est remplacé par un symbole (un astérisque ("*") ou un point ("•")) afin que le texte saisi ne puisse être lu. Le caractère utilisé pour obfusquer dépend de l'agent utilisateur (du navigateur) et du système d'exploitation utilisé.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}}</div> - -<p>La façon dont le texte saisi est traité dépend du navigateur utilisé. Sur les appareils mobiles, par exemple, le caractère tapé est souvent laissé affiché un court instant afin que l'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et viruel, on peut éviter de faire trop d'erreurs.</p> - -<div class="note"> -<p><strong>Note :</strong> les différents formulaires qui permettent d'envoyer des données sensibles (tels que des mots de passe) doivent être servis sur HTTPS. Firefox, Chrome et les autres navigateurs implémentent désormais différents mécanismes afin d'avertir l'utilisateur lorsqu'il saisit un mot de passe sur une connexion HTTP (cf. l'article <a href="/fr/docs/Web/Security/Insecure_passwords">mots de passe non sécurisés</a> pour Firefox).</p> -</div> - -<h2 id="Valeur">Valeur</h2> - -<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est le texte qui est en cours de saisie dans le contrôle. Si l'utilisateur n'a pas encore saisi d'information, la valeur est une chaîne vide. Si l'attribut booléen {{htmlattrxref("required")}} est utilisé, le mot de passe doit contenir une valeur non vide afin que le formulaire puisse être envoyé.</p> - -<p>Si l'attribut {{htmlattrxref("pattern", "input")}} est indiqué, le contenu du contrôle doit respecter l'expression rationnelle indiquée par l'attribut. Pour plus d'informations, voir la section {{anch("Validation")}} ci-après.</p> - -<div class="note"> -<p><strong>Note :</strong> Il n'est pas possible d'utiliser les caractères de fin de ligne (<em>Line Feed</em>) (code U+000A) et de retour chariot (<em>Carriage Return</em>) (code U+000D) dans la valeur d'un champ <code>"password"</code>. Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.</p> -</div> - -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> - -<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mots de passe prennent en charge les attributs suivants :</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 qui peut être écrit dans ce champ.</td> - </tr> - <tr> - <td><code>{{anch("minlength")}}</code></td> - <td>Le nombre de caractères minimal 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 texte 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}} + +Les éléments {{HTMLElement("input")}} de type **`"password"`** permettent à utilisateur de saisir un mot de passe sans que celui-ci ne soit lisible à l'écran. Un tel élément se présente comme un contrôle de saisie de texte sur une ligne et dans lequel chaque caractère est remplacé par un symbole (un astérisque ("\*") ou un point ("•")) afin que le texte saisi ne puisse être lu. Le caractère utilisé pour obfusquer dépend de l'agent utilisateur (du navigateur) et du système d'exploitation utilisé. + +{{EmbedInteractiveExample("pages/tabbed/input-password.html", "tabbed-standard")}} + +La façon dont le texte saisi est traité dépend du navigateur utilisé. Sur les appareils mobiles, par exemple, le caractère tapé est souvent laissé affiché un court instant afin que l'utilisateur puisse contrôler que c'est bien le bon caractère. Ainsi, même si le clavier est petit et viruel, on peut éviter de faire trop d'erreurs. + +> **Note :** les différents formulaires qui permettent d'envoyer des données sensibles (tels que des mots de passe) doivent être servis sur HTTPS. Firefox, Chrome et les autres navigateurs implémentent désormais différents mécanismes afin d'avertir l'utilisateur lorsqu'il saisit un mot de passe sur une connexion HTTP (cf. l'article [mots de passe non sécurisés](/fr/docs/Web/Security/Insecure_passwords) pour Firefox). + +## Valeur + +La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est le texte qui est en cours de saisie dans le contrôle. Si l'utilisateur n'a pas encore saisi d'information, la valeur est une chaîne vide. Si l'attribut booléen {{htmlattrxref("required")}} est utilisé, le mot de passe doit contenir une valeur non vide afin que le formulaire puisse être envoyé. -<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> +Si l'attribut {{htmlattrxref("pattern", "input")}} est indiqué, le contenu du contrôle doit respecter l'expression rationnelle indiquée par l'attribut. Pour plus d'informations, voir la section {{anch("Validation")}} ci-après. -<p>Le nombre maximum de caractères (exprimé en nombre d'unité 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> +> **Note :** Il n'est pas possible d'utiliser les caractères de fin de ligne (_Line Feed_) (code U+000A) et de retour chariot (_Carriage Return_) (code U+000D) dans la valeur d'un champ `"password"`. Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin. -<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte dépasse <code>maxlength</code> en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> +## Attributs supplémentaires -<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> +En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mots de passe prennent en charge les attributs suivants : -<p>Le nombre minimal de caractères (exprimé en nombre d'unité 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> +| Attribut | Description | +| ---------------------------------- | --------------------------------------------------------------------------------------------------------- | +| `{{anch("maxlength")}}` | Le nombre de caractères maximal qui peut être écrit dans ce champ. | +| `{{anch("minlength")}}` | Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide. | +| `{{anch("pattern")}}` | Une expression rationnelle à laquelle doit correspondre le texte 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>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte est inférieure à <code>minlength</code> en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> +### {{htmlattrdef("maxlength")}} -<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> +Le nombre maximum de caractères (exprimé en nombre d'unité 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", "pattern-include")}}</p> +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur. -<p>L'utilisation d'un motif pour les mots de passe est fortement recommandée. Elle permet de s'assurer que les mots de passe saisis respectent des critères de complexité suffisants pour être robustes. Voir la section {{anch("Validation")}} ci-après pour plus de détails et d'exemples.</p> +### {{htmlattrdef("minlength")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> +Le nombre minimal de caractères (exprimé en nombre d'unité 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`. -<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3> +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte est inférieure à `minlength` en nombre d'unité de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur. -<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut <code>value</code> peut toujours être modifiée via du code JavaScript qui définirait la propriété {{domxref("HTMLInputElement.value")}}.</p> +### {{htmlattrdef("pattern")}} -<div class="note"> -<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura pas d'effet si l'attribut <code>readonly</code> est également présent.</p> -</div> +{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> +L'utilisation d'un motif pour les mots de passe est fortement recommandée. Elle permet de s'assurer que les mots de passe saisis respectent des critères de complexité suffisants pour être robustes. Voir la section {{anch("Validation")}} ci-après pour plus de détails et d'exemples. -<h2 id="Utiliser_les_contrôles_de_saisie_de_mot_de_passe">Utiliser les contrôles de saisie de mot de passe</h2> +{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} -<p>Les champs destinés à la saisie des mots de passe fonctionnent comme les champs texte mais masquent le texte saisi pour que celui-ci ne puisse pas être lu sur l'écran.</p> +### {{htmlattrdef("readonly")}} -<h3 id="Un_contrôle_basique">Un contrôle basique</h3> +Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut `value` peut toujours être modifiée via du code JavaScript qui définirait la propriété {{domxref("HTMLInputElement.value")}}. -<p>Voici un exemple simple illustrant un contrôle de saisie d'un mot de passe qui utilise un élément {{HTMLElement("label")}} afin d'indiquer le rôle du champ.</p> +> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent. -<pre class="brush: html"><label for="userPassword">Mot de passe :</label> -<input id="userPassword" type="password"></pre> +{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}} -<p>{{EmbedLiveSample("Un_contrôle_basique", 600, 40)}}</p> +## Utiliser les contrôles de saisie de mot de passe -<h3 id="Paramétrer_l'autocomplétion">Paramétrer l'autocomplétion</h3> +Les champs destinés à la saisie des mots de passe fonctionnent comme les champs texte mais masquent le texte saisi pour que celui-ci ne puisse pas être lu sur l'écran. -<p>Afin de permettre au gestionnaire de mots de passe de saisir automatiquement le mot de passe, on pourra utiliser l'attribut {{htmlattrxref("autocomplete", "input")}}. Pour les mots de passe, celui-ci aura l'une des valeurs suivantes :</p> +### Un contrôle basique -<dl> - <dt><code>on</code></dt> - <dd>Cette valeur permet au navigateur ou à un gestionnaire de mot de passe de remplir automatiquement le champ. Cette valeur n'est pas aussi informatique que <code>"current-password"</code> or <code>"new-password"</code>.</dd> - <dt><code>off</code></dt> - <dd>Cette valeur n'autorise pas le navigateur ou le gestionnaire de mot de passe à remplir le champ automatiquement.</dd> - <dt><code>current-password</code></dt> - <dd>Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut utiliser le mot de passe actuel pour le site. Cette valeur est plus précise que la valeur <code>"on"</code> car elle indique qu'il faut utiliser le mot de passe courant plutôt qu'un nouveau mot de passe.</dd> - <dt><code>new-password</code></dt> - <dd>Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut générer un nouveau mot de passe et utiliser ce dernier pour remplir le champ. La génération automatique du mot de passe peut alors utiliser les autres attributs de l'élément. Cette valeur peut également être indiquée pour que le navigateur indique cette information d'un façon ou d'une autre.</dd> -</dl> +Voici un exemple simple illustrant un contrôle de saisie d'un mot de passe qui utilise un élément {{HTMLElement("label")}} afin d'indiquer le rôle du champ. -<pre class="brush: html"><label for="userPassword">Mot de passe :</label> -<input id="userPassword" type="password" autocomplete="current-password"></pre> +```html +<label for="userPassword">Mot de passe :</label> +<input id="userPassword" type="password"> +``` -<p>{{EmbedLiveSample("Paramétrer_l'autocomplétion", 600, 40)}}</p> +{{EmbedLiveSample("Un_contrôle_basique", 600, 40)}} -<h3 id="Rendre_le_champ_obligatoire">Rendre le champ obligatoire</h3> +### Paramétrer l'autocomplétion -<p>Pour indiquer à l'utilisateur que le mot de passe est obligatoire, on pourra utiliser l'attribut {{htmlattrxref("required", "input")}}.</p> +Afin de permettre au gestionnaire de mots de passe de saisir automatiquement le mot de passe, on pourra utiliser l'attribut {{htmlattrxref("autocomplete", "input")}}. Pour les mots de passe, celui-ci aura l'une des valeurs suivantes : -<pre class="brush: html"><label for="userPassword">Mot de passe :</label> -<input id="userPassword" type="password" required></pre> +- `on` + - : Cette valeur permet au navigateur ou à un gestionnaire de mot de passe de remplir automatiquement le champ. Cette valeur n'est pas aussi informatique que `"current-password"` or `"new-password"`. +- `off` + - : Cette valeur n'autorise pas le navigateur ou le gestionnaire de mot de passe à remplir le champ automatiquement. +- `current-password` + - : Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut utiliser le mot de passe actuel pour le site. Cette valeur est plus précise que la valeur `"on"` car elle indique qu'il faut utiliser le mot de passe courant plutôt qu'un nouveau mot de passe. +- `new-password` + - : Cette valeur indique au navigateur ou au gestionnaire de mots de passe qu'il faut générer un nouveau mot de passe et utiliser ce dernier pour remplir le champ. La génération automatique du mot de passe peut alors utiliser les autres attributs de l'élément. Cette valeur peut également être indiquée pour que le navigateur indique cette information d'un façon ou d'une autre. -<p>{{EmbedLiveSample("Rendre_le_champ_obligatoire", 600, 40)}}</p> +```html +<label for="userPassword">Mot de passe :</label> +<input id="userPassword" type="password" autocomplete="current-password"> +``` -<h3 id="Définir_un_mode_de_saisie">Définir un mode de saisie</h3> +{{EmbedLiveSample("Paramétrer_l'autocomplétion", 600, 40)}} -<p>Si votre application utilise un autre mode de saisie que le mode par défaut, l'attribut {{htmlattrxref("inputmode", "input")}} peut être employé pour indiquer le mode à utiliser. Le cas le plus fréquent est celui où on utilise une valeur numérique pour un mot de passe (par exemple pour un code PIN). Si ce code ne doit être utilisé qu'une seule fois, on pourra paramétrer l'attribut {{htmlattrxref("autocomplete", "input")}} avec la valeur <code>off</code>. Les appareils mobiles pourront tirer parti de la valeur de cet attribut et afficher un autre clavier pour faciliter la saisie.</p> +### Rendre le champ obligatoire -<pre class="brush: html"><label for="pin">PIN :</label> -<input id="pin" type="password" inputmode="numeric"></pre> +Pour indiquer à l'utilisateur que le mot de passe est obligatoire, on pourra utiliser l'attribut {{htmlattrxref("required", "input")}}. -<p>{{EmbedLiveSample("Définir_un_mode_de_saisie", 600, 40)}}</p> +```html +<label for="userPassword">Mot de passe :</label> +<input id="userPassword" type="password" required> +``` -<h3 id="Indiquer_des_critères_de_longueur">Indiquer des critères de longueur</h3> +{{EmbedLiveSample("Rendre_le_champ_obligatoire", 600, 40)}} -<p>Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} peuvent être utilisés afin d'indiquer les tailles minimale et maximale du mot de passe qui doit être saisi. Dans l'exemple qui suit, on repart de l'exemple précédent et on indique que le code PIN doit contenir au moins 4 caractères et au plus 8 caractères. L'attribut {{htmlattrxref("size", "input")}} est utilisé afin que le contrôle permette bien d'afficher 8 caractères.</p> +### Définir un mode de saisie -<pre class="brush: html"><label for="pin">PIN :</label> -<input id="pin" type="password" inputmode="numeric" minlength="4" - maxlength="8" size="8"></pre> +Si votre application utilise un autre mode de saisie que le mode par défaut, l'attribut {{htmlattrxref("inputmode", "input")}} peut être employé pour indiquer le mode à utiliser. Le cas le plus fréquent est celui où on utilise une valeur numérique pour un mot de passe (par exemple pour un code PIN). Si ce code ne doit être utilisé qu'une seule fois, on pourra paramétrer l'attribut {{htmlattrxref("autocomplete", "input")}} avec la valeur `off`. Les appareils mobiles pourront tirer parti de la valeur de cet attribut et afficher un autre clavier pour faciliter la saisie. -<p>{{EmbedLiveSample("Indiquer_des_critères_de_longueur", 600, 40)}}</p> +```html +<label for="pin">PIN :</label> +<input id="pin" type="password" inputmode="numeric"> +``` -<h3 id="Sélectionner_le_texte_saisi">Sélectionner le texte saisi</h3> +{{EmbedLiveSample("Définir_un_mode_de_saisie", 600, 40)}} -<p>Il est possible d'utiliser la méthode {{domxref("HTMLInputElement.select", "select()")}} pour sélectionner le texte saisi dans le contrôle.</p> +### Indiquer des critères de longueur -<h4 id="HTML">HTML</h4> +Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} peuvent être utilisés afin d'indiquer les tailles minimale et maximale du mot de passe qui doit être saisi. Dans l'exemple qui suit, on repart de l'exemple précédent et on indique que le code PIN doit contenir au moins 4 caractères et au plus 8 caractères. L'attribut {{htmlattrxref("size", "input")}} est utilisé afin que le contrôle permette bien d'afficher 8 caractères. -<pre class="brush: html"><label for="userPassword">Mot de passe :</label> -<input id="userPassword" type="password" size="12"> -<button id="selectAll">Sélectionner tout</button> -</pre> +```html +<label for="pin">PIN :</label> +<input id="pin" type="password" inputmode="numeric" minlength="4" + maxlength="8" size="8"> +``` -<h4 id="JavaScript">JavaScript</h4> +{{EmbedLiveSample("Indiquer_des_critères_de_longueur", 600, 40)}} -<pre class="brush: js">document.getElementById("selectAll").onclick = function(event) { +### Sélectionner le texte saisi + +Il est possible d'utiliser la méthode {{domxref("HTMLInputElement.select", "select()")}} pour sélectionner le texte saisi dans le contrôle. + +#### HTML + +```html +<label for="userPassword">Mot de passe :</label> +<input id="userPassword" type="password" size="12"> +<button id="selectAll">Sélectionner tout</button> +``` + +#### JavaScript + +```js +document.getElementById("selectAll").onclick = function(event) { document.getElementById("userPassword").select(); -}</pre> +} +``` -<h4 id="Résultat">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("Sélectionner_le_texte_saisi", 600, 40)}}</p> +{{EmbedLiveSample("Sélectionner_le_texte_saisi", 600, 40)}} -<p>On peut également utiliser {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} et {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}} afin d'obtenir (ou de régler) l'intervalle de caractères sélectionnés. {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}} permet de connaître la direction dans laquelle la sélection a été effectuée.</p> +On peut également utiliser {{domxref("HTMLInputElement.selectionStart", "selectionStart")}} et {{domxref("HTMLInputElement.selectionEnd", "selectionEnd")}} afin d'obtenir (ou de régler) l'intervalle de caractères sélectionnés. {{domxref("HTMLInputElement.selectionDirection", "selectionDirection")}} permet de connaître la direction dans laquelle la sélection a été effectuée. -<h2 id="Validation">Validation</h2> +## Validation -<p>Si votre application possède des contraintes sur les caractères utilisables ou sur la structure du mot de passe, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin que le navigateur vérifie que la valeur saisie respecte une expression rationnelle tenant compte de ces contraintes.</p> +Si votre application possède des contraintes sur les caractères utilisables ou sur la structure du mot de passe, il est possible d'utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin que le navigateur vérifie que la valeur saisie respecte une expression rationnelle tenant compte de ces contraintes. -<p>Dans cet exemple, il n'est possible de saisir qu'une valeur qui contient entre 4 et 8 caractères qui sont des caractères hexadécimaux.</p> +Dans cet exemple, il n'est possible de saisir qu'une valeur qui contient entre 4 et 8 caractères qui sont des caractères hexadécimaux. -<pre class="brush: html"><label for="hexId">Identifiant Hexa :</label> -<input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}" +```html +<label for="hexId">Identifiant Hexa :</label> +<input id="hexId" type="password" pattern="[0-9a-fA-F]{4,8}" title="Veuillez saisir un identifiant avec 4 à 8 chiffres hexadécimaux." - autocomplete="nouveau-mot-de-passe"></pre> + autocomplete="nouveau-mot-de-passe"> +``` -<p>{{EmbedLiveSample("Validation", 600, 40)}}</p> +{{EmbedLiveSample("Validation", 600, 40)}} -<h2 id="Désactiver_le_champ">Désactiver le champ</h2> +## Désactiver le champ -<p>L'attribut booléen {{htmlattrdef("disabled")}} indique que le champ ne peut pas être utilisé de façon interactive. Les données des champs désactivés ne seront pas envoyées avec le formulaire.</p> +L'attribut booléen {{htmlattrdef("disabled")}} indique que le champ ne peut pas être utilisé de façon interactive. Les données des champs désactivés ne seront pas envoyées avec le formulaire. -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="Saisir_un_numéro_de_sécurité_sociale_américain_comme_mot_de_passe">Saisir un numéro de sécurité sociale américain comme mot de passe</h3> +### Saisir un numéro de sécurité sociale américain comme mot de passe -<p>Dans l'exemple qui suit, on construit un formulaire avec un mot de passe qui doit respecter le format d'un <a href="https://en.wikipedia.org/wiki/Social_Security_number#Structure">numéro de sécurité sociale américain</a>. Ces nombres ont la forme "123-45-6789" et il existe différentes règles permettant de restreindre les valeurs pour chacun des groupes.</p> +Dans l'exemple qui suit, on construit un formulaire avec un mot de passe qui doit respecter le format d'un [numéro de sécurité sociale américain](https://en.wikipedia.org/wiki/Social_Security_number#Structure). Ces nombres ont la forme "123-45-6789" et il existe différentes règles permettant de restreindre les valeurs pour chacun des groupes. -<h4 id="HTML_2">HTML</h4> +#### HTML -<pre class="brush: html"><label for="ssn">SSN :</label> -<input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12" +```html +<label for="ssn">SSN :</label> +<input type="password" id="ssn" inputmode="number" minlength="9" maxlength="12" pattern="(?!000)([0-6]\d{2}|7([0-6]\d|7[012]))([ -])?(?!00)\d\d\3(?!0000)\d{4}" - required autocomplete="off"> -<br> -<label for="ssn">Valeur :</label> -<span id="current"></span></pre> + required autocomplete="off"> +<br> +<label for="ssn">Valeur :</label> +<span id="current"></span> +``` -<p>On n'utilise l'attribut {{htmlattrxref("pattern", "input")}} afin d'imposer certaines contraintes de saisie afin que les chaînes aient le bon format. Cette expression rationnelle ne garantit pas un numéro valide mais elle permet de s'assurer que la valeur saisie <em>peut</em> être un numéro de sécurité sociale valide. De plus, elle permet d'avoir un séparateur variable entre les trois groupes (un espace, un tiret ou rien).</p> +On n'utilise l'attribut {{htmlattrxref("pattern", "input")}} afin d'imposer certaines contraintes de saisie afin que les chaînes aient le bon format. Cette expression rationnelle ne garantit pas un numéro valide mais elle permet de s'assurer que la valeur saisie _peut_ être un numéro de sécurité sociale valide. De plus, elle permet d'avoir un séparateur variable entre les trois groupes (un espace, un tiret ou rien). -<p>L'attribut {{htmlattrxref("inputmode", "input")}} vaut <code>number</code>, ce qui incite les appareils mobiles à utiliser un clavier virtuel uniquement numérique pour la saisie d'un tel champ. Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} valent respectivement 9 et 12 et l'attribut {{htmlattrxref("required", "input")}} indique que cette valeur est nécessaire pour envoyer le formulaire. Enfin, {{htmlattrxref("autocomplete", "input")}} vaut <code>off</code>, ce qui évite que les gestionnaires de mots de passe ou que les fonctionnalités de restoration de session remplissent automatiquement cette valeur.</p> +L'attribut {{htmlattrxref("inputmode", "input")}} vaut `number`, ce qui incite les appareils mobiles à utiliser un clavier virtuel uniquement numérique pour la saisie d'un tel champ. Les attributs {{htmlattrxref("minlength", "input")}} et {{htmlattrxref("maxlength", "input")}} valent respectivement 9 et 12 et l'attribut {{htmlattrxref("required", "input")}} indique que cette valeur est nécessaire pour envoyer le formulaire. Enfin, {{htmlattrxref("autocomplete", "input")}} vaut `off`, ce qui évite que les gestionnaires de mots de passe ou que les fonctionnalités de restoration de session remplissent automatiquement cette valeur. -<h4 id="Résultat_2">Résultat</h4> +#### Résultat -<p>{{EmbedLiveSample("Saisir_un_numéro_de_sécurité_sociale_américain_comme_mot_de_passe", 600, 60)}}</p> +{{EmbedLiveSample("Saisir_un_numéro_de_sécurité_sociale_américain_comme_mot_de_passe", 600, 60)}} -<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 qui représente un mot de passe (la chaîne peut éventuellement être 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("inputmode", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>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()")}} et {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères qui représente un mot de passe (la chaîne peut + éventuellement être 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("inputmode", "input")}}, + {{htmlattrxref("maxlength", "input")}}, + {{htmlattrxref("minlength", "input")}}, + {{htmlattrxref("pattern", "input")}}, + {{htmlattrxref("placeholder", "input")}}, + {{htmlattrxref("readonly", "input")}}, + {{htmlattrxref("required", "input")}} et + {{htmlattrxref("size", "input")}} + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td> + <code>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()")}} + et + {{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#password-state-(type=password)', '<input type="password">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sec-forms.html#password-state-typepassword', '<input type="password">')}}</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#password-state-(type=password)', '<input type="password">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | +| {{SpecName('HTML5.1', 'sec-forms.html#password-state-typepassword', '<input type="password">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-password")}}</p> +{{Compat("html.elements.input.input-password")}} diff --git a/files/fr/web/html/element/input/radio/index.md b/files/fr/web/html/element/input/radio/index.md index 8b8fd78f46..c344792efe 100644 --- a/files/fr/web/html/element/input/radio/index.md +++ b/files/fr/web/html/element/input/radio/index.md @@ -8,98 +8,98 @@ tags: - Reference translation_of: Web/HTML/Element/input/radio --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments <code><input></code> dont l'attribut <code>type</code> vaut <strong><code>radio</code></strong> sont généralement utilisés pour construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur. Les « boutons radio » sont représentés par des cercles remplis lorsqu'ils sont sélectionnés.</p> +Les éléments `<input>` dont l'attribut `type` vaut **`radio`** sont généralement utilisés pour construire des groupes d'options parmi lesquelles on ne peut choisir qu'une valeur. Les « boutons radio » sont représentés par des cercles remplis lorsqu'ils sont sélectionnés. -<div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</div> +{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}} -<p>On les appelle boutons radios par analogie avec les boutons qui étaient utilisés sur les anciens postes de radios.</p> +On les appelle boutons radios par analogie avec les boutons qui étaient utilisés sur les anciens postes de radios. -<div class="note"> -<p><strong>Note :</strong> <a href="/fr/docs/Web/HTML/Element/input/checkbox">Les cases à cocher (<em>checkboxes</em>)</a> ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs.</p> -</div> +> **Note :** [Les cases à cocher (_checkboxes_)](/fr/docs/Web/HTML/Element/input/checkbox) ressemblent aux boutons radios. Toutefois, il existe une différence fondamentale : les boutons radio ne permettent de sélectionner qu'une seule option au sein d'un groupe alors que les cases à cocher permettent d'en sélectionner plusieurs. -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>L'attribut <code>value</code> est une chaîne de caractères (un objet {{domxref("DOMString")}} au sens du DOM) qui contient la valeur du bouton radio. Cette valeur n'est pas montrée à l'utilisateur par le navigateur ou tout autre agent utilisateur, elle permet d'identifier l'option sélectionnée.</p> +L'attribut `value` est une chaîne de caractères (un objet {{domxref("DOMString")}} au sens du DOM) qui contient la valeur du bouton radio. Cette valeur n'est pas montrée à l'utilisateur par le navigateur ou tout autre agent utilisateur, elle permet d'identifier l'option sélectionnée. -<h3 id="Définir_un_groupe_de_boutons_radio">Définir un groupe de boutons radio</h3> +### Définir un groupe de boutons radio -<p>Pour définir un groupe de boutons radio, on leur donne le même nom via l'attribut {{htmlattrxref("name", "input")}}. Une fois qu'on a formé un groupe de boutons radio, on ne pourra sélectionner qu'une seule des options de ce groupes (cliquer sur une option désélectionnera automatiquement l'option précédemment choisie dans ce groupe).</p> +Pour définir un groupe de boutons radio, on leur donne le même nom via l'attribut {{htmlattrxref("name", "input")}}. Une fois qu'on a formé un groupe de boutons radio, on ne pourra sélectionner qu'une seule des options de ce groupes (cliquer sur une option désélectionnera automatiquement l'option précédemment choisie dans ce groupe). -<p>Il est possible d'avoir autant de groupes que nécessaire, il suffit que chaque groupe ait un nom (l'attribut <code>name</code>) unique.</p> +Il est possible d'avoir autant de groupes que nécessaire, il suffit que chaque groupe ait un nom (l'attribut `name`) unique. -<p>Ainsi, si on souhaite utiliser un formulaire afin de demander à l'utilisateur sa méthode de contact préférée, on pourra créer trois boutons radio avec l'attribut <code>name</code> qui vaut <code>contact</code> et pour lesquels l'attribut {{htmlattrxref("value", "input")}} varie : <code>email</code> pour le premier, <code>telephone</code> pour le deuxième et <code>courrier</code> pour le dernier. Cette valeur et le nom du groupe ne sont pas affichés (ce sera le rôle de l'élément {{HTMLElement("label")}} de fournir un intitulé).</p> +Ainsi, si on souhaite utiliser un formulaire afin de demander à l'utilisateur sa méthode de contact préférée, on pourra créer trois boutons radio avec l'attribut `name` qui vaut `contact` et pour lesquels l'attribut {{htmlattrxref("value", "input")}} varie : `email` pour le premier, `telephone` pour le deuxième et `courrier` pour le dernier. Cette valeur et le nom du groupe ne sont pas affichés (ce sera le rôle de l'élément {{HTMLElement("label")}} de fournir un intitulé). -<p>Voici le fragment de code HTML correspondant à cet exemple :</p> +Voici le fragment de code HTML correspondant à cet exemple : -<pre class="brush: html"><form> - <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> - <div> - <input type="radio" id="contactChoice1" - name="contact" value="email"> - <label for="contactChoice1">Email</label> +```html +<form> + <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> - <input type="radio" id="contactChoice2" - name="contact" value="telephone"> - <label for="contactChoice2">Téléphone</label> + <input type="radio" id="contactChoice2" + name="contact" value="telephone"> + <label for="contactChoice2">Téléphone</label> - <input type="radio" id="contactChoice3" - name="contact" value="courrier"> - <label for="contactChoice3">Courrier</label> - </div> - <div> - <button type="submit">Envoyer</button> - </div> -</form></pre> + <input type="radio" id="contactChoice3" + name="contact" value="courrier"> + <label for="contactChoice3">Courrier</label> + </div> + <div> + <button type="submit">Envoyer</button> + </div> +</form> +``` -<p>On voit ici trois boutons radio dont l'attribut <code>name</code> vaut <code>contact</code> et dont chacun possède une valeur unique pour l'attribut <code>value</code>. Ils possèdent également un identifiant unique ({{domxref("Element.id", "id")}}) qui est utilisé pour rattacher le libellé fourni par l'élément {{HTMLElement("label")}} via l'attribut {{htmlattrxref("for", "label")}}.</p> +On voit ici trois boutons radio dont l'attribut `name` vaut `contact` et dont chacun possède une valeur unique pour l'attribut `value`. Ils possèdent également un identifiant unique ({{domxref("Element.id", "id")}}) qui est utilisé pour rattacher le libellé fourni par l'élément {{HTMLElement("label")}} via l'attribut {{htmlattrxref("for", "label")}}. -<p>Voici le résultat obtenu :</p> +Voici le résultat obtenu : -<p>{{EmbedLiveSample('Définir_un_groupe_de_boutons_radio', 600, 130)}}</p> +{{EmbedLiveSample('Définir_un_groupe_de_boutons_radio', 600, 130)}} -<h3 id="La_représentation_des_données_d’un_groupe_de_boutons_radio">La représentation des données d’un groupe de boutons radio</h3> +### La représentation des données d’un groupe de boutons radio -<p>Lorsqu'on envoie le formulaire précédent avec une option sélectionnée, les données du formulaire contiendront une valeur sous la forme <code>"contact=<em>valeur</em>"</code>. Ainsi, si l'utilisateur clique sur le bouton radio « Téléphone » et envoie le formulaire, les données du formulaire contiendront <code>"contact=telephone"</code>.</p> +Lorsqu'on envoie le formulaire précédent avec une option sélectionnée, les données du formulaire contiendront une valeur sous la forme `"contact=valeur"`. Ainsi, si l'utilisateur clique sur le bouton radio « Téléphone » et envoie le formulaire, les données du formulaire contiendront `"contact=telephone"`. -<p>Si l'attribut <code>value</code> n'est pas fourni dans le document HTML, la valeur par défaut utilisée sera <code>on</code> pour l'ensemble du groupe. Si c'était le cas avec notre exemple précédent et que l'utilisateur avait cliqué sur l'option « Téléphone » et envoyé le formulaire, les données envoyées auraient contenu <code>"contact=on"</code> ce qui ne s'avère pas très utile. Aussi, mieux vaut ne pas oublier les attributs <code>value</code> !</p> +Si l'attribut `value` n'est pas fourni dans le document HTML, la valeur par défaut utilisée sera `on` pour l'ensemble du groupe. Si c'était le cas avec notre exemple précédent et que l'utilisateur avait cliqué sur l'option « Téléphone » et envoyé le formulaire, les données envoyées auraient contenu `"contact=on"` ce qui ne s'avère pas très utile. Aussi, mieux vaut ne pas oublier les attributs `value` ! -<div class="note"> -<p><strong>Note :</strong> Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir.</p> -</div> +> **Note :** Si aucun bouton radio n'est sélectionné au moment de l'envoi du formulaire, le groupe radio n'est pas inclus dans les données envoyées par le formulaire car il n'y a aucune valeur à fournir. -<p>Généralement, on souhaite qu'au moins une option soit sélectionné parmi les boutons d'un groupe et on inclue donc souvent un attribut <code>checked</code> sur l'un des boutons afin d'avoir une option sélectionnée par défaut.</p> +Généralement, on souhaite qu'au moins une option soit sélectionné parmi les boutons d'un groupe et on inclue donc souvent un attribut `checked` sur l'un des boutons afin d'avoir une option sélectionnée par défaut. -<p>Ajoutant un peu de code à notre exemple pour étudier les données générées par ce formulaire. On modifie le code HTML afin d'ajouter un bloc {{HTMLElement("pre")}} qui contiendra les données produites par le formulaire :</p> +Ajoutant un peu de code à notre exemple pour étudier les données générées par ce formulaire. On modifie le code HTML afin d'ajouter un bloc {{HTMLElement("pre")}} qui contiendra les données produites par le formulaire : -<pre class="brush: html"><form> - <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> - <div> - <input type="radio" id="contactChoice1" - name="contact" value="email"> - <label for="contactChoice1">Email</label> +```html +<form> + <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email"> + <label for="contactChoice1">Email</label> - <input type="radio" id="contactChoice2" - name="contact" value="telephone"> - <label for="contactChoice2">Téléphone</label> + <input type="radio" id="contactChoice2" + name="contact" value="telephone"> + <label for="contactChoice2">Téléphone</label> - <input type="radio" id="contactChoice3" - name="contact" value="courrier"> - <label for="contactChoice3">Courrier</label> - </div> - <div> - <button type="submit">Envoyer</button> - </div> -</form> -<pre id="log"> -</pre> + <input type="radio" id="contactChoice3" + name="contact" value="courrier"> + <label for="contactChoice3">Courrier</label> + </div> + <div> + <button type="submit">Envoyer</button> + </div> +</form> +<pre id="log"> </pre> +``` -<p>Ensuite, on ajoute du code <a href="/fr/docs/Web/JavaScript">JavaScript</a> pour rattacher un gestionnaire d'évènement sur l'évènement {{event("submit")}} qui est déclenché lorsque l'utilisateur clique sur le bouton « Envoyer » :</p> +Ensuite, on ajoute du code [JavaScript](/fr/docs/Web/JavaScript) pour rattacher un gestionnaire d'évènement sur l'évènement {{event("submit")}} qui est déclenché lorsque l'utilisateur clique sur le bouton « Envoyer » : -<pre class="brush: js">var form = document.querySelector("form"); +```js +var form = document.querySelector("form"); var log = document.querySelector("#log"); form.addEventListener("submit", function(event) { @@ -110,122 +110,112 @@ form.addEventListener("submit", function(event) { }; log.innerText = output; event.preventDefault(); -}, false);</pre> - -<p>Vous pouvez manipuler cet exemple et voir qu'il n'y a jamais plus 'un résultat pour le groupe <code>"contact"</code>.</p> - -<p>{{EmbedLiveSample("La_représentation_des_données_d’un_groupe_de_boutons_radio", 600, 130)}}</p> - -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> - -<p>En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les boutons radio peuvent utiliser les attributs suivants :</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Definition</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("checked")}}</code></td> - <td>Un attribut booléen qui indique si le bouton radio est l'élément sélectionné du groupe.</td> - </tr> - <tr> - <td><code>{{anch("value")}}</code></td> - <td>Une chaîne à utiliser comme valeur pour le bouton radio lors de l'envoi du formulaire si ce bouton est choisi.</td> - </tr> - </tbody> -</table> +}, false); +``` + +Vous pouvez manipuler cet exemple et voir qu'il n'y a jamais plus 'un résultat pour le groupe `"contact"`. + +{{EmbedLiveSample("La_représentation_des_données_d’un_groupe_de_boutons_radio", 600, 130)}} + +## Attributs supplémentaires + +En complément des attributs partagés par l'ensemble des éléments {{HTMLElement("input")}}, les boutons radio peuvent utiliser les attributs suivants : -<h3 id="htmlattrdef(checked)">{{htmlattrdef("checked")}}</h3> +| Attribut | Definition | +| -------------------------- | -------------------------------------------------------------------------------------------------------------- | +| `{{anch("checked")}}` | Un attribut booléen qui indique si le bouton radio est l'élément sélectionné du groupe. | +| `{{anch("value")}}` | Une chaîne à utiliser comme valeur pour le bouton radio lors de l'envoi du formulaire si ce bouton est choisi. | -<p>Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.</p> +### {{htmlattrdef("checked")}} -<p>À la différence des autres navigateurs, Firefox conservera <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">l'état coché dynamique</a> d'un bouton radio au fur et à mesure des chargements de la page. On pourra utiliser l'attribut {{htmlattrxref("autocomplete","input")}} afin de contrôler cette fonctionnalité.</p> +Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe. -<h3 id="htmlattrdef(value)">{{htmlattrdef("value")}}</h3> +À la différence des autres navigateurs, Firefox conservera [l'état coché dynamique](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) d'un bouton radio au fur et à mesure des chargements de la page. On pourra utiliser l'attribut {{htmlattrxref("autocomplete","input")}} afin de contrôler cette fonctionnalité. -<p>L'attribut <code>value</code> est partagé par l'ensemble des types d'élément {{HTMLElement("input")}}. Dans le cas d'un bouton radio, il a un rôle spécifique et permet d'associer un texte qui sera envoyé avec le formulaire pour représenter la valeur sélectionnée. Si la valeur de <code>value</code> n'est pas définie, ce sera la chaîne de caractères <code>"on"</code> qui sera envoyée.</p> +### {{htmlattrdef("value")}} -<h2 id="Utiliser_les_boutons_radio">Utiliser les boutons radio</h2> +L'attribut `value` est partagé par l'ensemble des types d'élément {{HTMLElement("input")}}. Dans le cas d'un bouton radio, il a un rôle spécifique et permet d'associer un texte qui sera envoyé avec le formulaire pour représenter la valeur sélectionnée. Si la valeur de `value` n'est pas définie, ce sera la chaîne de caractères `"on"` qui sera envoyée. -<p>Nous avons déjà vu certaines techniques ci-avant. Voyons désormais d'autres fonctionnalités fréquemment utilisées avec ces boutons.</p> +## Utiliser les boutons radio -<h3 id="Sélectionner_un_bouton_radio_par_défaut">Sélectionner un bouton radio par défaut</h3> +Nous avons déjà vu certaines techniques ci-avant. Voyons désormais d'autres fonctionnalités fréquemment utilisées avec ces boutons. -<p>Pour qu'un bouton radio soit sélectionné par défaut, on ajoutera l'attribut booléen <code>checked</code>. Voici ce que ça donne pour l'exemple précédent, légèrement modifié :</p> +### Sélectionner un bouton radio par défaut -<pre class="brush: html"><form> - <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> - <div> - <input type="radio" id="contactChoice1" - name="contact" value="email" checked> - <label for="contactChoice1">Email</label> +Pour qu'un bouton radio soit sélectionné par défaut, on ajoutera l'attribut booléen `checked`. Voici ce que ça donne pour l'exemple précédent, légèrement modifié : - <input type="radio" id="contactChoice2" - name="contact" value="telephone"> - <label for="contactChoice2">Téléphone</label> +```html +<form> + <p>Veuillez choisir la meilleure méthode pour vous contacter :</p> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> - <input type="radio" id="contactChoice3" - name="contact" value="courrier"> - <label for="contactChoice3">Courrier</label> - </div> - <div> - <button type="submit">Envoyer</button> - </div> -</form></pre> + <input type="radio" id="contactChoice2" + name="contact" value="telephone"> + <label for="contactChoice2">Téléphone</label> -<p>{{EmbedLiveSample('Sélectionner_un_bouton_radio_par_défaut', 600, 130)}}</p> + <input type="radio" id="contactChoice3" + name="contact" value="courrier"> + <label for="contactChoice3">Courrier</label> + </div> + <div> + <button type="submit">Envoyer</button> + </div> +</form> +``` -<p>Ici, c'est le premier bouton radio qui sera sélectionné par défaut.</p> +{{EmbedLiveSample('Sélectionner_un_bouton_radio_par_défaut', 600, 130)}} -<div class="note"> -<p><strong>Note :</strong> Si l'attribut <code>checked</code> est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné.</p> -</div> +Ici, c'est le premier bouton radio qui sera sélectionné par défaut. -<h3 id="Fournir_une_plus_grande_zone_de_sélection">Fournir une plus grande zone de sélection</h3> +> **Note :** Si l'attribut `checked` est placé sur plus d'un bouton, c'est le dernier bouton contenant l'attribut qui sera sélectionné. C'est donc l'ordre des valeurs qui déterminera la valeur par défaut. Pour rappel, il ne peut y avoir qu'un seul bouton radio du groupe qui soit sélectionné à un instant donné. -<p>Dans les exemples précédents, vous avez peut-être constaté qu'en cliquant sur l'élément {{htmlelement("label")}} associé au bouton radio, cela sélectionnait la valeur de ce bouton. C'est une fonctionnalité HTML très pratique qui facilite la sélection des options, notamment sur les écrans de petites tailles comme ceux des smartphones.</p> +### Fournir une plus grande zone de sélection -<p>Au-delà des raisons relatives à l'accessibilité, il s'agit d'un autre argument en faveur de la bonne utilisation des éléments <code><label></code> dans les formulaires.</p> +Dans les exemples précédents, vous avez peut-être constaté qu'en cliquant sur l'élément {{htmlelement("label")}} associé au bouton radio, cela sélectionnait la valeur de ce bouton. C'est une fonctionnalité HTML très pratique qui facilite la sélection des options, notamment sur les écrans de petites tailles comme ceux des smartphones. -<h2 id="Validation">Validation</h2> +Au-delà des raisons relatives à l'accessibilité, il s'agit d'un autre argument en faveur de la bonne utilisation des éléments `<label>` dans les formulaires. -<p>Il n'existe pas de contrainte de validation particulière pour les boutons radio.</p> +## Validation -<h2 id="Mettre_en_forme_les_boutons_radio">Mettre en forme les boutons radio</h2> +Il n'existe pas de contrainte de validation particulière pour les boutons radio. -<p>L'exemple qui suit est une version légèrement plus détaillée de l'exemple précédent qui contient une mise en forme et une meilleure sémantique grâce aux éléments HTML utilisés :</p> +## Mettre en forme les boutons radio -<pre class="brush: html"><form> - <fieldset> - <legend>Veuillez choisir la meilleure méthode pour vous contacter :</legend> - <div> - <input type="radio" id="contactChoice1" - name="contact" value="email" checked> - <label for="contactChoice1">Email</label> +L'exemple qui suit est une version légèrement plus détaillée de l'exemple précédent qui contient une mise en forme et une meilleure sémantique grâce aux éléments HTML utilisés : - <input type="radio" id="contactChoice2" - name="contact" value="telephone"> - <label for="contactChoice2">Téléphone</label> +```html +<form> + <fieldset> + <legend>Veuillez choisir la meilleure méthode pour vous contacter :</legend> + <div> + <input type="radio" id="contactChoice1" + name="contact" value="email" checked> + <label for="contactChoice1">Email</label> - <input type="radio" id="contactChoice3" - name="contact" value="courrier"> - <label for="contactChoice3">Courrier</label> - </div> - <div> - <button type="submit">Envoyer</button> - </div> - </fieldset> -</form></pre> + <input type="radio" id="contactChoice2" + name="contact" value="telephone"> + <label for="contactChoice2">Téléphone</label> -<p>On voit ici peu de modifications mais notamment l'ajout d'éléments {{htmlelement("fieldset")}} et {{htmlelement("legend")}} qui permettent de grouper les options (à la fois pour la mise en forme et pour la sémantique du document).</p> + <input type="radio" id="contactChoice3" + name="contact" value="courrier"> + <label for="contactChoice3">Courrier</label> + </div> + <div> + <button type="submit">Envoyer</button> + </div> + </fieldset> +</form> +``` -<p>La feuille de style CSS utilisée est la suivante :</p> +On voit ici peu de modifications mais notamment l'ajout d'éléments {{htmlelement("fieldset")}} et {{htmlelement("legend")}} qui permettent de grouper les options (à la fois pour la mise en forme et pour la sémantique du document). -<pre class="brush: css">html { +La feuille de style CSS utilisée est la suivante : + +```css +html { font-family: sans-serif; } @@ -280,74 +270,62 @@ button:active { background-color: white; color: black; outline: 1px solid black; -}</pre> +} +``` -<p>La propriété utilisée la plus notable est {{cssxref("-moz-appearance")}} (utilisée avec certains préfixes navigateur). Par défaut, les boutons radios (ainsi que les cases à cocher) sont mis en forme avec l'apparence native liée au système d'exploitation sous-jacente. Avec <code>appearance: none</code>, on peut passer outre cette mise en forme native et créer ses propres styles pour ces boutons. Ici, nous avons utilisé {{cssxref("border")}} et {{cssxref("border-radius")}} avec {{cssxref("transition")}} afin de créer une animation lors de la sélection. On utilise également la pseudo-classe {{cssxref(":checked")}} pour définir l'apparence du bouton radio lorsqu'il est sélectionné.</p> +La propriété utilisée la plus notable est {{cssxref("-moz-appearance")}} (utilisée avec certains préfixes navigateur). Par défaut, les boutons radios (ainsi que les cases à cocher) sont mis en forme avec l'apparence native liée au système d'exploitation sous-jacente. Avec `appearance: none`, on peut passer outre cette mise en forme native et créer ses propres styles pour ces boutons. Ici, nous avons utilisé {{cssxref("border")}} et {{cssxref("border-radius")}} avec {{cssxref("transition")}} afin de créer une animation lors de la sélection. On utilise également la pseudo-classe {{cssxref(":checked")}} pour définir l'apparence du bouton radio lorsqu'il est sélectionné. -<p>Cette méthode n'est pas exempte d'inconvénient : <code>appearance</code> fonctionne correctement pour une mise en forme simple mais peut se comporter de façons différentes selon les navigateurs et elle ne fonctionne pas du tout avec Internet Explorer. Attention donc à tester votre site dans les différents navigateurs.</p> +Cette méthode n'est pas exempte d'inconvénient : `appearance` fonctionne correctement pour une mise en forme simple mais peut se comporter de façons différentes selon les navigateurs et elle ne fonctionne pas du tout avec Internet Explorer. Attention donc à tester votre site dans les différents navigateurs. -<p>{{EmbedLiveSample('Mettre_en_forme_les_boutons_radio', 600, 120)}}</p> +{{EmbedLiveSample('Mettre_en_forme_les_boutons_radio', 600, 120)}} -<p>De plus, la légende et le bouton d'envoi ont été mis en forme pour avoir un contraste marqué. Ce n'est pas peut-être pas la mise en forme idéale pour toutes les applications web mais cela illustre certaines des possibilités.</p> +De plus, la légende et le bouton d'envoi ont été mis en forme pour avoir un contraste marqué. Ce n'est pas peut-être pas la mise en forme idéale pour toutes les applications web mais cela illustre certaines des possibilités. -<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 la valeur du bouton radio.</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("change")}} et {{event("input")}}</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td>{{htmlattrxref("checked", "input")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>checked</code> et <code>value</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères {{domxref("DOMString")}} qui représente + la valeur du bouton radio. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{event("input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("checked", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>checked</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}} + </td> + </tr> + </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th>Spécification</th> - <th>État</th> - <th>Commentaires</th> - </tr> - <tr> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| | | | +| {{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-radio")}}</p> +{{Compat("html.elements.input.input-radio")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} du DOM qui est implémentée par cet élément</li> - <li>L'interface {{domxref("RadioNodeList")}} qui décrit une liste de boutons radio</li> -</ul> +- L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} du DOM qui est implémentée par cet élément +- L'interface {{domxref("RadioNodeList")}} qui décrit une liste de boutons radio diff --git a/files/fr/web/html/element/input/range/index.md b/files/fr/web/html/element/input/range/index.md index 04f159c62d..8c12a7a150 100644 --- a/files/fr/web/html/element/input/range/index.md +++ b/files/fr/web/html/element/input/range/index.md @@ -8,364 +8,373 @@ tags: - Reference translation_of: Web/HTML/Element/input/range --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>range</strong></code> permettent à l'utilisateur d'indiquer une valeur numérique comprise entre deux bornes. La valeur précise n'est pas considérée comme importante. Ces éléments sont généralement représenté avec un curseur sur une ligne ou comme un bouton de potentiel. Ce genre de <em>widget</em> n'étant pas précis, ce type ne devrait pas être utilisé lorsque la valeur exacte fournie par l'utilisateur est importante.</p> +Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`range`** permettent à l'utilisateur d'indiquer une valeur numérique comprise entre deux bornes. La valeur précise n'est pas considérée comme importante. Ces éléments sont généralement représenté avec un curseur sur une ligne ou comme un bouton de potentiel. Ce genre de _widget_ n'étant pas précis, ce type ne devrait pas être utilisé lorsque la valeur exacte fournie par l'utilisateur est importante. -<p>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</p> +{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}} -<p>Si le navigateur de l'utilisateur ne prend pas en charge le type <code>range</code>, il utilisera le type <code><a href="/fr/docs/Web/HTML/Element/input/text">text</a></code> à la place.</p> +Si le navigateur de l'utilisateur ne prend pas en charge le type `range`, il utilisera le type [`text`](/fr/docs/Web/HTML/Element/input/text) à la place. -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (<code>""</code>). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut <code>min</code>). Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut :</p> +L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (`""`). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut `min`). Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut : -<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min - : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> +```js +defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min + : rangeElem.min + (rangeElem.max - rangeElem.min)/2; +``` -<p>Si on essaie d'obtenir une valeur inférieure au minimum, alors la valeur sera ramenée au minimum (de même si on essaye de dépasser le maximum).</p> +Si on essaie d'obtenir une valeur inférieure au minimum, alors la valeur sera ramenée au minimum (de même si on essaye de dépasser le maximum). -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> +## Attributs supplémentaires -<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les intervalles peuvent utiliser les attributs suivants :</p> +En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les intervalles peuvent utiliser les attributs suivants : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("max")}}</code></td> - <td>La valeur maximale autorisée.</td> - </tr> - <tr> - <td><code>{{anch("min")}}</code></td> - <td>La valeur minimale autorisée.</td> - </tr> - <tr> - <td><code>{{anch("step")}}</code></td> - <td>Le pas utilisé pour incrémenter la valeur du champ. Cette valeur est utilisée pour l'interface utilisateur du contrôle et pour la validation de la valeur.</td> - </tr> - </tbody> -</table> +| Attribut | Description | +| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("max")}}` | La valeur maximale autorisée. | +| `{{anch("min")}}` | La valeur minimale autorisée. | +| `{{anch("step")}}` | Le pas utilisé pour incrémenter la valeur du champ. Cette valeur est utilisée pour l'interface utilisateur du contrôle et pour la validation de la valeur. | -<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> +### {{htmlattrdef("max")}} -<p>La plus grande valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas un nombre, aucun maximum ne sera fixé pour la valeur du contrôle.</p> +La plus grande valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas un nombre, aucun maximum ne sera fixé pour la valeur du contrôle. -<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> +Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut `min`. -<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> +### {{htmlattrdef("min")}} -<p>La plus petite valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas un nombre, aucun minimum ne sera fixé pour la valeur du contrôle.</p> +La plus petite valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas un nombre, aucun minimum ne sera fixé pour la valeur du contrôle. -<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> +Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut `max`. -<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> +### {{htmlattrdef("step")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> +{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} -<p>Par défaut, l'incrément utilisé pour les champs de type <code>number</code> vaut 1 et on ne peut alors saisir que des entiers à momins que la valeur de base ne soit pas entière. Ainsi, si on définit <code>min</code> avec -10 et <code>value</code> avec 1.5, un attribut <code>step</code> qui vaut 1 permettra de saisir les valeurs positives 1.5, 2.5, 3.5, etc. et les valeurs négatives -0.5, -1.5, -2.5, etc.</p> +Par défaut, l'incrément utilisé pour les champs de type `number` vaut 1 et on ne peut alors saisir que des entiers à momins que la valeur de base ne soit pas entière. Ainsi, si on définit `min` avec -10 et `value` avec 1.5, un attribut `step` qui vaut 1 permettra de saisir les valeurs positives 1.5, 2.5, 3.5, etc. et les valeurs négatives -0.5, -1.5, -2.5, etc. -<h2 id="Utiliser_les_intervalles">Utiliser les intervalles</h2> +## Utiliser les intervalles -<p>Bien que le type <code>"number"</code> permette à l'utilisateur de saisir un nombre avec certaines contraintes optionnelles (par exemple pour que la valeur soit comprise entre un minimum et un maximum), ce type nécessite de saisir une valeur spécifique. Le type <code>"range"</code> permet de saisir une valeur lorsque l'exactitude de celle-ci importe peu.</p> +Bien que le type `"number"` permette à l'utilisateur de saisir un nombre avec certaines contraintes optionnelles (par exemple pour que la valeur soit comprise entre un minimum et un maximum), ce type nécessite de saisir une valeur spécifique. Le type `"range"` permet de saisir une valeur lorsque l'exactitude de celle-ci importe peu. -<p>Voici quelques scénarios où un intervalle de saisie est plus pertinent :</p> +Voici quelques scénarios où un intervalle de saisie est plus pertinent : -<ul> - <li>Les contrôles relatis à l'audio pour le volume, la balance ou les filtres.</li> - <li>Les contrôles relatifs à la configuration des couleurs (canaux, transparence, luminosité, etc.)</li> - <li>Les contrôles relatifs à la configuration de jeux vidéos (difficulté, distance de visibilité, taille du monde généré, etc.)</li> - <li>La longueur du mot de passe pour les mots de passe générés par un gestionnaire de mots de passe.</li> -</ul> +- Les contrôles relatis à l'audio pour le volume, la balance ou les filtres. +- Les contrôles relatifs à la configuration des couleurs (canaux, transparence, luminosité, etc.) +- Les contrôles relatifs à la configuration de jeux vidéos (difficulté, distance de visibilité, taille du monde généré, etc.) +- La longueur du mot de passe pour les mots de passe générés par un gestionnaire de mots de passe. -<p>De façon générale, si un utilisateur est plutôt intéressé dans un pourcentage représentant la distance entre la borne minimale et la borne maximale, un intervalle de saisie sera plus pertinent (par exemple, pour le volume, on pensera plutôt « augmenter le volume jusqu'à la moitié du maximum » que « mettre le volume à 0.5 »).</p> +De façon générale, si un utilisateur est plutôt intéressé dans un pourcentage représentant la distance entre la borne minimale et la borne maximale, un intervalle de saisie sera plus pertinent (par exemple, pour le volume, on pensera plutôt « augmenter le volume jusqu'à la moitié du maximum » que « mettre le volume à 0.5 »). -<h3 id="Indiquer_le_minimum_et_le_maximum">Indiquer le minimum et le maximum</h3> +### Indiquer le minimum et le maximum -<p>Par défaut, le minimum vaut 0 et le maximum vaut 100. Si ces bornes ne conviennent pass, on peut facilement les changer via les attributs {{htmlattrxref("min", "input")}} et/ou {{htmlattrxref("max", "input")}}. Ces attributs acceptent des nombres décimaux.</p> +Par défaut, le minimum vaut 0 et le maximum vaut 100. Si ces bornes ne conviennent pass, on peut facilement les changer via les attributs {{htmlattrxref("min", "input")}} et/ou {{htmlattrxref("max", "input")}}. Ces attributs acceptent des nombres décimaux. -<p>Par exemple, afin de demander à un utilisateur de choisir une valeur approximative dans l'intervalle [-10 , 10], on pourra utiliser :</p> +Par exemple, afin de demander à un utilisateur de choisir une valeur approximative dans l'intervalle \[-10 , 10], on pourra utiliser : -<pre class="brush: html"><input type="range" min="-10" max="10"></pre> +```html +<input type="range" min="-10" max="10"> +``` -<p>{{EmbedLiveSample("Indiquer_le_minimum_et_le_maximum", 600, 40)}}</p> +{{EmbedLiveSample("Indiquer_le_minimum_et_le_maximum", 600, 40)}} -<h3 id="Définir_la_granularité">Définir la granularité</h3> +### Définir la granularité -<p>Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut {{htmlattrxref("step")}} qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut <code>step</code> avec la valeur 0.01 :</p> +Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut {{htmlattrxref("step")}} qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut `step` avec la valeur 0.01 : -<h4 id="Exemple_1">Exemple 1</h4> -<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> +#### Exemple 1 -<p>{{EmbedLiveSample("Exemple_1", 600, 40)}}</p> +```html +<input type="range" min="5" max="10" step="0.01"> +``` -<h4 id="Exemple_2">Exemple 2</h4> +{{EmbedLiveSample("Exemple_1", 600, 40)}} -<p>Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur <code>any</code> pour l'attribut <code>step</code> :</p> +#### Exemple 2 -<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> +Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur `any` pour l'attribut `step` : -<p>{{EmbedLiveSample("Exemple_2", 600, 40)}}</p> +```html +<input type="range" min="0" max="3.14" step="any"> +``` -<p>Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans aucune restriction quant à la partie décimale.</p> -</div> +{{EmbedLiveSample("Exemple_2", 600, 40)}} + +Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans aucune restriction quant à la partie décimale. -<h3 id="Ajouter_des_marques_et_des_étiquettes">Ajouter des marques et des étiquettes</h3> +### Ajouter des marques et des étiquettes -<p>La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle.</p> +La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle. -<h4 id="Aperçus">Aperçus</h4> +#### Aperçus -<p>La plupart des navigateurs prennent partiellement en charge ces fonctionnalités. Voici donc quelques aperçus du résultat qui peut être obtenu sur macOS avec un navigateur qui prend en charge chacune des fonctionnalités.</p> +La plupart des navigateurs prennent partiellement en charge ces fonctionnalités. Voici donc quelques aperçus du résultat qui peut être obtenu sur macOS avec un navigateur qui prend en charge chacune des fonctionnalités. -<h5 id="Un_contrôle_sans_marque">Un contrôle sans marque</h5> +##### Un contrôle sans marque -<p>Voici ce qu'on option lorsque le navigateur ne prend pas en charge cette fonctionnalité ou que l'attribut {{htmlattrxref("list", "input")}} est absent.</p> +Voici ce qu'on option lorsque le navigateur ne prend pas en charge cette fonctionnalité ou que l'attribut {{htmlattrxref("list", "input")}} est absent. <table class="fullwidth standard-table"> - <tbody> - <tr> - <th>HTML</th> - <th>Aperçu</th> - </tr> - <tr> - <td> - <pre class="brush: html"> -<input type="range"></pre> - </td> - <td><img alt="Capture d'écran d'un contrôle curseur sur macOS" src="macslider-plain.png"></td> - </tr> - </tbody> + <tbody> + <tr> + <th>HTML</th> + <th>Aperçu</th> + </tr> + <tr> + <td><pre class="brush: html"><input type="range"></pre></td> + <td> + <img + alt="Capture d'écran d'un contrôle curseur sur macOS" + src="macslider-plain.png" + /> + </td> + </tr> + </tbody> </table> -<h5 id="Un_contrôle_avec_des_marques">Un contrôle avec des marques</h5> +##### Un contrôle avec des marques -<p>Dans l'exemple qui suit, le contrôle utilise un attribut <code>list</code> qui indique l'identifiant d'un élément {{HTMLElement("datalist")}} qui définit un ensemble de marques à appliquer sur le contrôle. Il y en a ici 11 : une marque pour 0% puis une marque tous les 10%. Chaque point pour lequel on souhaite afficher une marque est représenté par un élément {{HTMLElement("option")}} dont la valeur de l'attribut {{htmlattrxref("value", "option")}} correspond à l'emplacement de la marque.</p> +Dans l'exemple qui suit, le contrôle utilise un attribut `list` qui indique l'identifiant d'un élément {{HTMLElement("datalist")}} qui définit un ensemble de marques à appliquer sur le contrôle. Il y en a ici 11 : une marque pour 0% puis une marque tous les 10%. Chaque point pour lequel on souhaite afficher une marque est représenté par un élément {{HTMLElement("option")}} dont la valeur de l'attribut {{htmlattrxref("value", "option")}} correspond à l'emplacement de la marque. <table class="fullwidth standard-table"> - <tbody> - <tr> - <th>HTML</th> - <th>Aperçu</th> - </tr> - <tr> - <td> - <pre class="brush: html"> -<input type="range" list="tickmarks"> - -<datalist id="tickmarks"> - <option value="0"> - <option value="10"> - <option value="20"> - <option value="30"> - <option value="40"> - <option value="50"> - <option value="60"> - <option value="70"> - <option value="80"> - <option value="90"> - <option value="100"> -</datalist> -</pre> - </td> - <td><img alt="Capture d'écran un contrôle curseur sur macOS" src="macslider-ticks.png"></td> - </tr> - </tbody> + <tbody> + <tr> + <th>HTML</th> + <th>Aperçu</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> +<option value="0"> +<option value="10"> +<option value="20"> +<option value="30"> +<option value="40"> +<option value="50"> +<option value="60"> +<option value="70"> +<option value="80"> +<option value="90"> +<option value="100"> +</datalist> + +</pre + > + </td> + <td> + <img + alt="Capture d'écran un contrôle curseur sur macOS" + src="macslider-ticks.png" + /> + </td> + </tr> + </tbody> </table> -<h5 id="Un_contrôle_avec_des_marques_et_des_étiquettes">Un contrôle avec des marques et des étiquettes</h5> +##### Un contrôle avec des marques et des étiquettes -<p>Il est possible d'ajouter des étiquettes grâce à l'attribut {{htmlattrxref("label", "option")}} des éléments {{HTMLElement("option")}} correspondants aux marques.</p> +Il est possible d'ajouter des étiquettes grâce à l'attribut {{htmlattrxref("label", "option")}} des éléments {{HTMLElement("option")}} correspondants aux marques. <table class="fullwidth standard-table"> - <tbody> - <tr> - <th>HTML</th> - <th>Aperçu</th> - </tr> - <tr> - <td> - <pre class="brush: html"> -<input type="range" list="tickmarks"> - -<datalist id="tickmarks"> - <option value="0" label="0%"> - <option value="10"> - <option value="20"> - <option value="30"> - <option value="40"> - <option value="50" label="50%"> - <option value="60"> - <option value="70"> - <option value="80"> - <option value="90"> - <option value="100" label="100%"> -</datalist> -</pre> - </td> - <td><img alt="Capture d'écran un contrôle curseur sur macOS" src="macslider-labels.png"></td> - </tr> - </tbody> + <tbody> + <tr> + <th>HTML</th> + <th>Aperçu</th> + </tr> + <tr> + <td> + <pre class="brush: html"> +<input type="range" list="tickmarks"> + +<datalist id="tickmarks"> +<option value="0" label="0%"> +<option value="10"> +<option value="20"> +<option value="30"> +<option value="40"> +<option value="50" label="50%"> +<option value="60"> +<option value="70"> +<option value="80"> +<option value="90"> +<option value="100" label="100%"> +</datalist> + +</pre + > + </td> + <td> + <img + alt="Capture d'écran un contrôle curseur sur macOS" + src="macslider-labels.png" + /> + </td> + </tr> + </tbody> </table> -<div class="note"> -<p><strong>Note :</strong> Actuellement, aucun navigateur ne prend en charge l'ensemble de ces fonctionnalités. Firefox n'affiche aucune marque ni étiquette et Chrome affiche uniquement les marques mais pas les étiquettes. La version 66 (66.0.3359.181) de Chrome prendre en charge les étiquettes mais par défaut l'élément {{HTMLElement("datalist")}} est mis en forme avec CSS et {{cssxref("display")}}<code>: none;</code> , ce qui le masque. Il faut donc rajouter des règles de mises en forme spécifiques.</p> -</div> +> **Note :** Actuellement, aucun navigateur ne prend en charge l'ensemble de ces fonctionnalités. Firefox n'affiche aucune marque ni étiquette et Chrome affiche uniquement les marques mais pas les étiquettes. La version 66 (66.0.3359.181) de Chrome prendre en charge les étiquettes mais par défaut l'élément {{HTMLElement("datalist")}} est mis en forme avec CSS et {{cssxref("display")}}`: none;` , ce qui le masque. Il faut donc rajouter des règles de mises en forme spécifiques. -<h3 id="Modifier_l'orientation_du_curseur">Modifier l'orientation du curseur</h3> +### Modifier l'orientation du curseur -<p>Par exemple :</p> +Par exemple : -<h4 id="horizontal">Horizontal</h4> +#### Horizontal -<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> +```html +<input type="range" id="volume" min="0" max="11" value="7" step="1"> +``` -<p>{{EmbedLiveSample("horizontal", 200, 200, "orientation_sample1.png")}}</p> +{{EmbedLiveSample("horizontal", 200, 200, "orientation_sample1.png")}} -<p>Le contrôle est ici horizontal, pour le rendre vertical, on pourra utiliser un peu de CSS afin de le rendre plus haut que large :</p> +Le contrôle est ici horizontal, pour le rendre vertical, on pourra utiliser un peu de CSS afin de le rendre plus haut que large : -<h4 id="vertical">Vertical</h4> +#### Vertical -<h5 id="CSS">CSS</h5> +##### CSS -<pre class="brush: css">#volume { +```css +#volume { height: 150px; width: 50px; -}</pre> - -<h5 id="HTML">HTML</h5> +} +``` -<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> +##### HTML -<h5 id="Result">Résultat</h5> +```html +<input type="range" id="volume" min="0" max="11" value="7" step="1"> +``` -<p>{{EmbedLiveSample("vertical", 200, 200, "orientation_sample2.png")}}</p> +##### Résultat -<p><strong>Currently, no major browsers support creating vertical range inputs using CSS this way, even though it's the way the specification recommends they do it.</strong></p> +{{EmbedLiveSample("vertical", 200, 200, "orientation_sample2.png")}} +**Currently, no major browsers support creating vertical range inputs using CSS this way, even though it's the way the specification recommends they do it.** -<p>La spécification HTML recommande de dessiner les contrôles verticalement lorsque la hauteur de celui-ci est supérieure à la largeur. Malheureusement, aucun navigateur ne prend actuellement en charge cette fonctionnalité directement. On peut toutefois dessiner un contrôle vertical en appliquant une rotation sur un contrôle horizontal avec du code CSS et notamment {{cssxref("transform")}} pour tourner l'élément.</p> +La spécification HTML recommande de dessiner les contrôles verticalement lorsque la hauteur de celui-ci est supérieure à la largeur. Malheureusement, aucun navigateur ne prend actuellement en charge cette fonctionnalité directement. On peut toutefois dessiner un contrôle vertical en appliquant une rotation sur un contrôle horizontal avec du code CSS et notamment {{cssxref("transform")}} pour tourner l'élément. -<h4 id="Autre_exemple">Autre exemple</h4> +#### Autre exemple -<h5 id="HTML_2">HTML</h5> +##### HTML -<p>Il est nécessaire de placer l'élément {{HTMLElement("input")}} dans un élément {{HTMLElement("div")}} afin de corriger la disposition une fois la transformation appliquée :</p> +Il est nécessaire de placer l'élément {{HTMLElement("input")}} dans un élément {{HTMLElement("div")}} afin de corriger la disposition une fois la transformation appliquée : -<pre class="brush: html"><div class="slider-wrapper"> - <input type="range" min="0" max="11" value="7" step="1"> -</div></pre> +```html +<div class="slider-wrapper"> + <input type="range" min="0" max="11" value="7" step="1"> +</div> +``` -<h5 id="CSS_2">CSS</h5> +##### CSS -<p>Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément <code>div</code> qui indique le mode d'affichage et la taille qu'on souhaite avoir pour que la page soit correctement organisée..</p> +Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément `div` qui indique le mode d'affichage et la taille qu'on souhaite avoir pour que la page soit correctement organisée.. -<pre class="brush: css">.slider-wrapper { +```css +.slider-wrapper { display: inline-block; width: 20px; height: 150px; padding: 0; } -</pre> -Ensuite, on applique une transformation sur l'élément <code><input></code> au sein de l'espace réservé par le <code><div></code> : +``` + +Ensuite, on applique une transformation sur l'élément `<input>` au sein de l'espace réservé par le `<div>` : -<pre class="brush: css">.slider-wrapper input { +```css +.slider-wrapper input { width: 150px; height: 20px; margin: 0; transform-origin: 75px 75px; transform: rotate(-90deg); -}</pre> +} +``` -<p>Le contrôle mesure alors 150 pixels de long et 20 pixels de haut. Les marges sont nulles et {{cssxref("transform-origin")}} est décalé vers le milieu du contrôle. Le contrôle mesurant 150 pixels de large, décaler le centre de rotation permet d'avoir la zone de destination centrée avec 75 pixels de chaque côté.</p> +Le contrôle mesure alors 150 pixels de long et 20 pixels de haut. Les marges sont nulles et {{cssxref("transform-origin")}} est décalé vers le milieu du contrôle. Le contrôle mesurant 150 pixels de large, décaler le centre de rotation permet d'avoir la zone de destination centrée avec 75 pixels de chaque côté. -<h5 id="Résultat">Résultat</h5> +##### Résultat -<p>{{EmbedLiveSample("Autre_exemple", 200, 200, "orientation_sample3.png")}}</p> +{{EmbedLiveSample("Autre_exemple", 200, 200, "orientation_sample3.png")}} -<h2 id="Validation">Validation</h2> +## Validation -<p>Il n'existe pas de motif de validation. Cependant, voici les formes de validation automatiques qui sont appliquées :</p> +Il n'existe pas de motif de validation. Cependant, voici les formes de validation automatiques qui sont appliquées : -<ul> - <li>Si la valeur de l'attribut {{htmlattrxref("value", "input")}} est quelque chose qui ne peut pas être converti en nombre décimal, la validation échoue.</li> - <li>La valeur ne doit pas être inférieure à {{htmlattrxref("min", "input")}}. La valeur minimale par défaut est 0.</li> - <li>La valeur ne doit pas être supérieure à {{htmlattrxref("max", "input")}}. La valeur maximale par défaut est 0.</li> - <li>La valeur doit être un multiple de {{htmlattrxref("step", "input")}}. La valeur par défaut est 1.</li> -</ul> +- Si la valeur de l'attribut {{htmlattrxref("value", "input")}} est quelque chose qui ne peut pas être converti en nombre décimal, la validation échoue. +- La valeur ne doit pas être inférieure à {{htmlattrxref("min", "input")}}. La valeur minimale par défaut est 0. +- La valeur ne doit pas être supérieure à {{htmlattrxref("max", "input")}}. La valeur maximale par défaut est 0. +- La valeur doit être un multiple de {{htmlattrxref("step", "input")}}. La valeur par défaut est 1. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Pour compléter les exemples précédents, on pourra consulter l'article suivant :</p> +Pour compléter les exemples précédents, on pourra consulter l'article suivant : -<ul> - <li><a href="/fr/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode">Contrôler plusieurs paramètres grâce à <code>ConstantSourceNode</code> (en anglais)</a></li> -</ul> +- [Contrôler plusieurs paramètres grâce à `ConstantSourceNode` (en anglais)](/fr/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode) -<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 contient la représentation textuelle de la valeur numérique sélectionnée. On utilisera la méthode {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} afin d'obtenir la valeur sous forme numérique (type {{jsxref("Number")}}).</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("change")}} et {{event("input")}}</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}} et {{htmlattrxref("step", "input")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>list</code>, <code>value</code> et <code>valueAsNumber</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.stepDown", "stepDown()")}} et {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères ({{domxref("DOMString")}}) qui contient + la représentation textuelle de la valeur numérique sélectionnée. On + utilisera la méthode + {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} + afin d'obtenir la valeur sous forme numérique (type + {{jsxref("Number")}}). + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{event("input")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + {{htmlattrxref("autocomplete", "input")}}, + {{htmlattrxref("list", "input")}}, + {{htmlattrxref("max", "input")}}, + {{htmlattrxref("min", "input")}} et + {{htmlattrxref("step", "input")}} + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td> + <code>list</code>, <code>value</code> et <code>valueAsNumber</code> + </td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.stepDown", "stepDown()")}} + et {{domxref("HTMLInputElement.stepUp", "stepUp()")}} + </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#range-state-(type=range)', '<input type="range">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}</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#range-state-(type=range)', '<input type="range">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | +| {{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-range")}}</p> +{{Compat("html.elements.input.input-range")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li> - <li>{{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}}</li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/number"><input type="number"></a></code></li> -</ul> +- [Les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) +- {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} +- [`<input type="number">`](/fr/docs/Web/HTML/Element/input/number) diff --git a/files/fr/web/html/element/input/reset/index.md b/files/fr/web/html/element/input/reset/index.md index 3b8ac2bf95..c05051aea7 100644 --- a/files/fr/web/html/element/input/reset/index.md +++ b/files/fr/web/html/element/input/reset/index.md @@ -8,157 +8,166 @@ tags: - Reference translation_of: Web/HTML/Element/input/reset --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments {{HTMLElement("input")}} de type <strong><code>"reset"</code></strong> sont affichés sous la forme de boutons permettant de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales.</p> +Les éléments {{HTMLElement("input")}} de type **`"reset"`** sont affichés sous la forme de boutons permettant de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales. -<div>{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}</div> +{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}} -<div class="note"> -<p><strong>Note :</strong> Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement.</p> -</div> +> **Note :** Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement. -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>La valeur de l'attribut <code>value</code> d'un élément <code><input type="reset"></code> contient une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme texte sur le bouton.</p> +La valeur de l'attribut `value` d'un élément `<input type="reset">` contient une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme texte sur le bouton. -<h3 id="Exemple_1">Exemple 1</h3> -<pre class="brush: html"><input type="reset" value="Réinitialiser le formulaire"></pre> +### Exemple 1 -<p>{{EmbedLiveSample("Exemple_1", 650, 30)}}</p> +```html +<input type="reset" value="Réinitialiser le formulaire"> +``` -<p>Si aucune valeur n'est indiquée, le bouton aura le texte par défaut « Réinitialiser » :</p> +{{EmbedLiveSample("Exemple_1", 650, 30)}} -<h3 id="Exemple_2">Exemple 2</h3> +Si aucune valeur n'est indiquée, le bouton aura le texte par défaut « Réinitialiser » : -<pre class="brush: html"><input type="reset"></pre> +### Exemple 2 -<p>{{EmbedLiveSample("Exemple_2", 650, 30)}}</p> +```html +<input type="reset"> +``` -<h2 id="Utiliser_les_boutons_de_réinitialisation">Utiliser les boutons de réinitialisation</h2> +{{EmbedLiveSample("Exemple_2", 650, 30)}} -<p>Les boutons <code><input type="reset"></code> sont utilisés pour réinitialiser les formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement grâce à JavaScript, il est préférable d'utiliser un élément {{htmlelement("button")}} (voire un élément <code><a href="/fr/docs/Web/HTML/Element/input/button"><input type="button"></a></code>).</p> +## Utiliser les boutons de réinitialisation -<h3 id="Un_bouton_simple">Un bouton simple</h3> +Les boutons `<input type="reset">` sont utilisés pour réinitialiser les formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement grâce à JavaScript, il est préférable d'utiliser un élément {{htmlelement("button")}} (voire un élément [`<input type="button">`](/fr/docs/Web/HTML/Element/input/button)). -<p>Commençons par créer un bouton de réinitialisation simple :</p> +### Un bouton simple -<pre class="brush: html"><form> - <div> - <label for="example">Voici un champ</label> - <input id="example" type="text"> - </div> - <div> - <input type="reset" value="Réinitialiser le formulaire"> - </div> -</form> -</pre> +Commençons par créer un bouton de réinitialisation simple : -<p>Voici le résultat obtenu :</p> +```html +<form> + <div> + <label for="example">Voici un champ</label> + <input id="example" type="text"> + </div> + <div> + <input type="reset" value="Réinitialiser le formulaire"> + </div> +</form> +``` -<p>{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}</p> +Voici le résultat obtenu : -<p>Pour essayer, saisissez un peu de texte dans le champ puis appuyez sur le bouton de réinitialisation.</p> +{{EmbedLiveSample("Un_bouton_simple", 650, 100)}} -<h3 id="Ajouter_un_raccourci_au_bouton">Ajouter un raccourci au bouton</h3> +Pour essayer, saisissez un peu de texte dans le champ puis appuyez sur le bouton de réinitialisation. -<p>Les raccourcis claviers permettent de déclencher un bouton grâce à une touche ou à une combinaison de touches sur le clavier. Pour ajouter un raccourci clavier à un bouton de réinitialisation, il suffit d'utiliser l'attribut {{htmlattrxref("accesskey")}}.</p> +### Ajouter un raccourci au bouton -<p>Dans cet exemple, on utilise la touche <kbd>r</kbd> (il faudra donc appuyer sur <kbd>r</kbd> et d'autres touches propres au navigateur et au système d'exploitation, se référer à {{htmlattrxref("accesskey")}} pour le détails).</p> +Les raccourcis claviers permettent de déclencher un bouton grâce à une touche ou à une combinaison de touches sur le clavier. Pour ajouter un raccourci clavier à un bouton de réinitialisation, il suffit d'utiliser l'attribut {{htmlattrxref("accesskey")}}. -<pre class="brush: html"><form> - <div> - <label for="example">Saisir un peu de texte</label> - <input id="example" type="text"> - </div> - <div> - <input type="reset" value="Réinitialiser le formulaire" - accesskey="r"> - </div> -</form></pre> +Dans cet exemple, on utilise la touche <kbd>r</kbd> (il faudra donc appuyer sur <kbd>r</kbd> et d'autres touches propres au navigateur et au système d'exploitation, se référer à {{htmlattrxref("accesskey")}} pour le détails). -<p>{{EmbedLiveSample("Ajouter_un_raccourci_au_bouton", 650, 100)}}</p> +```html +<form> + <div> + <label for="example">Saisir un peu de texte</label> + <input id="example" type="text"> + </div> + <div> + <input type="reset" value="Réinitialiser le formulaire" + accesskey="r"> + </div> +</form> +``` -<div class="note"> -<p><strong>Note :</strong> Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le <em>design</em> du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site.</p> -</div> +{{EmbedLiveSample("Ajouter_un_raccourci_au_bouton", 650, 100)}} -<h3 id="DésactiverActiver_un_bouton">Désactiver/Activer un bouton</h3> +> **Note :** Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le _design_ du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site. -<p>Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribut {{htmlattrxref("disabled")}} sur l'élément :</p> +### Désactiver/Activer un bouton -<pre class="brush: html"><input type="reset" value="Désactivé" disabled></pre> +Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribut {{htmlattrxref("disabled")}} sur l'élément : -<p>On peut activer/désactiver le bouton lors de la navigation sur la page avec JavaScript en modifiant la valeur de l'attribut <code>disabled</code> pour la passer de <code>true</code> à <code>false</code> et <em>vice versa</em> (par exemple avec une instruction telle que <code>btn.disabled = true</code>).</p> +```html +<input type="reset" value="Désactivé" disabled> +``` -<div class="note"> -<p><strong>Note :</strong> Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page <code><a href="/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton"><input type="button"></a></code>.</p> -</div> +On peut activer/désactiver le bouton lors de la navigation sur la page avec JavaScript en modifiant la valeur de l'attribut `disabled` pour la passer de `true` à `false` et _vice versa_ (par exemple avec une instruction telle que `btn.disabled = true`). -<div class="note"> -<p><strong>Note :</strong> À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> -</div> +> **Note :** Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page [`<input type="button">`](/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton). -<h2 id="Validation">Validation</h2> +> **Note :** À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité. -<p>Aucune fonctionnalité de vérification native côté client n'est implémentée pour les boutons de réinitialisation.</p> -<h2 id="Résumé_technique">Résumé technique</h2> +## Validation +Aucune fonctionnalité de vérification native côté client n'est implémentée pour les boutons de réinitialisation. + +## Résumé technique <table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td>Une chaîne de caractères qui est utilisée comme intitulé pour le bouton.</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("click")}}</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td>{{htmlattrxref("type", "input")}} et {{htmlattrxref("value", "input")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>value</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>Aucune</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères qui est utilisée comme intitulé pour le bouton. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + {{htmlattrxref("type", "input")}} et + {{htmlattrxref("value", "input")}} + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>Aucune</td> + </tr> + </tbody> </table> -<h2 id="Spécifications">Spécifications</h2> +## Spécifications <table class="standard-table"> - <tbody> - <tr> - <td>Spécification</td> - <td>État</td> - </tr> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - </tr> - </tbody> + <tbody> + <tr> + <td>Spécification</td> + <td>État</td> + </tr> + <tr> + <td> + {{SpecName('HTML WHATWG', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}} + </td> + <td>{{Spec2('HTML WHATWG')}}</td> + </tr> + <tr> + <td> + {{SpecName('HTML5 W3C', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}} + </td> + <td>{{Spec2('HTML5 W3C')}}</td> + </tr> + </tbody> </table> -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-reset")}}</p> +{{Compat("html.elements.input.input-reset")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}}.</li> - <li>L'élément {{HTMLElement("button")}}</li> - <li><a href="/fr/docs/Learn/HTML/Forms_and_buttons">Apprendre les formulaires et les boutons</a></li> - <li><a href="/fr/docs/Web/Accessibility/ARIA/forms">L'accessibilité et les formulaires</a></li> - <li><a href="/fr/docs/Learn/HTML/Forms">Les formulaires HTML</a></li> -</ul> +- L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}}. +- L'élément {{HTMLElement("button")}} +- [Apprendre les formulaires et les boutons](/fr/docs/Learn/HTML/Forms_and_buttons) +- [L'accessibilité et les formulaires](/fr/docs/Web/Accessibility/ARIA/forms) +- [Les formulaires HTML](/fr/docs/Learn/HTML/Forms) diff --git a/files/fr/web/html/element/input/search/index.md b/files/fr/web/html/element/input/search/index.md index ea54004693..a7bfd39ab4 100644 --- a/files/fr/web/html/element/input/search/index.md +++ b/files/fr/web/html/element/input/search/index.md @@ -7,253 +7,206 @@ tags: - Reference translation_of: Web/HTML/Element/input/search --- -<div>{{HTMLRef}}</div> - -<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>search</strong></code> permettent à un utilisateur de saisir des termes de recherche.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div> - -<h2 id="Valeur">Valeur</h2> - -<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du champ de recherche. En JavaScript, on peut récupérer cette information grâce à la propriété {{domxref("HTMLInputElement.value")}}.</p> - -<pre class="brush: js">maRecherche.value; -</pre> - -<p>Si aucune contrainte de validation n'est imposée (cf. {{anch("Validation")}} pour plus de détails), la valeur peut être un texte ou une chaîne de caractères vide.</p> - -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> - -<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de recherche prennent en charge les attributs suivants :</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 qui peut être écrit dans ce champ.</td> - </tr> - <tr> - <td><code>{{anch("minlength")}}</code></td> - <td>Le nombre de caractères minimal 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 texte 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> - <tr> - <td><code>{{anch("spellcheck")}}</code></td> - <td>Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.</td> - </tr> - </tbody> -</table> +{{HTMLRef}} -<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> +Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`search`** permettent à un utilisateur de saisir des termes de recherche. -<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-search.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 texte 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> +## Valeur -<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> +La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du champ de recherche. En JavaScript, on peut récupérer cette information grâce à la propriété {{domxref("HTMLInputElement.value")}}. -<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> +```js +maRecherche.value; +``` -<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte 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> +Si aucune contrainte de validation n'est imposée (cf. {{anch("Validation")}} pour plus de détails), la valeur peut être un texte ou une chaîne de caractères vide. -<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> +## Attributs supplémentaires -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> +En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de recherche prennent en charge les attributs suivants : -<p>Voir <a href="#format">la section sur l'utilisation de cet attribut ci-après</a> pour plus d'exemples.</p> +| Attribut | Description | +| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `{{anch("maxlength")}}` | Le nombre de caractères maximal qui peut être écrit dans ce champ. | +| `{{anch("minlength")}}` | Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide. | +| `{{anch("pattern")}}` | Une expression rationnelle à laquelle doit correspondre le texte 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. | +| `{{anch("spellcheck")}}` | Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée. | -<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 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'utilisateur. -<h3 id="htmlattrdef(spellcheck)">{{htmlattrdef("spellcheck")}}</h3> +### {{htmlattrdef("minlength")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck-include")}}</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`. -<h2 id="Attributs_non-standard">Attributs non-standard</h2> +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) 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'utilisateur. -<p>Les attributs non-standard suivants sont disponibles pour les champs de recherche. Toutefois, vu leur caractère spécifique, mieux vaut ne pas les utiliser.</p> +### {{htmlattrdef("pattern")}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("autocorrect")}}</code></td> - <td>Une chaîne de caractères qui 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("incremental")}}</code></td> - <td>Cet attribut indique si des évènements {{event("search")}} doivent être envoyés afin de mettre à jour les résultats de la recherche tandis que l'utilisateur continue d'éditer la valeur du champ. <strong>Uniquement WebKit et Blink (Safari, Chrome, Opera, etc.).</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> - <tr> - <td><code>{{anch("results")}}</code></td> - <td>Le nombre maximum d'éléments qui devraient être affichés comme recherches précédentes dans la liste déroulante du champ. <strong>Uniquement pris en charge par Safari.</strong></td> - </tr> - </tbody> -</table> +{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}} + +Voir [la section sur l'utilisation de cet attribut ci-après](#format) pour plus d'exemples. + +{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} + +{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} + +{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}} + +### {{htmlattrdef("spellcheck")}} + +{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck-include")}} + +## Attributs non-standard + +Les attributs non-standard suivants sont disponibles pour les champs de recherche. Toutefois, vu leur caractère spécifique, mieux vaut ne pas les utiliser. -<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> +| Attribut | Description | +| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("autocorrect")}}` | Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. **Uniquement pris en charge par Safari.** | +| `{{anch("incremental")}}` | Cet attribut indique si des évènements {{event("search")}} doivent être envoyés afin de mettre à jour les résultats de la recherche tandis que l'utilisateur continue d'éditer la valeur du champ. **Uniquement WebKit et Blink (Safari, Chrome, Opera, etc.).** | +| `{{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.** | +| `{{anch("results")}}` | Le nombre maximum d'éléments qui devraient être affichés comme recherches précédentes dans la liste déroulante du champ. **Uniquement pris en charge par Safari.** | -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> +### {{htmlattrdef("autocorrect")}} {{non-standard_inline}} -<h3 id="htmlattrdef(incremental)_non-standard_inline">{{htmlattrdef("incremental")}} {{non-standard_inline}}</h3> +{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}} -<p>Un attribut booléen spécifique à WebKit et Blink qui indique à l'agent utilisateur de traiter la recherche en continu. Lorsque cet attribut est présent et lorsque l'utilisateur édite la valeur du champ, l'agent utilisateur envoie des évènements {{event("search")}} sur l'objet {{domxref("HTMLInputElement")}} qui représente le champ de recherche. Ainsi, on peut gérer, avec du code, la mise à jour continue des résultats de recherche.</p> +### {{htmlattrdef("incremental")}} {{non-standard_inline}} -<p>Si l'attribut <code>incremental</code> n'est pas indiqué, l'évènement {{event("search")}} est uniquement envoyé lorsque l'tuilisateur déclenche la recherche (en appuyant sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> à l'édition du champ).</p> +Un attribut booléen spécifique à WebKit et Blink qui indique à l'agent utilisateur de traiter la recherche en continu. Lorsque cet attribut est présent et lorsque l'utilisateur édite la valeur du champ, l'agent utilisateur envoie des évènements {{event("search")}} sur l'objet {{domxref("HTMLInputElement")}} qui représente le champ de recherche. Ainsi, on peut gérer, avec du code, la mise à jour continue des résultats de recherche. -<p>La fréquence maximale à laquelle l'évènement <code>search</code> est envoyé est définie par chaque implémentation.</p> +Si l'attribut `incremental` n'est pas indiqué, l'évènement {{event("search")}} est uniquement envoyé lorsque l'tuilisateur déclenche la recherche (en appuyant sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> à l'édition du champ). -<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> +La fréquence maximale à laquelle l'évènement `search` est envoyé est définie par chaque implémentation. -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> +### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} -<h3 id="htmlattrdef(results)_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3> +{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}} -<p>L'attribut <code>results</code>, spécifique à Safari, est une valeur numérique qui permet de surcharger la valeur maximale du nombre de recherches précédentes affichées dans la liste déroulante des suggestions.</p> +### {{htmlattrdef("results")}} {{non-standard_inline}} -<p>Cette valeur doit être un nombre positif. Si cet attribut n'est pas fourni, ou que sa valeur est invalide, ce sera le maximum fourni par le navigateur qui sera utilisé.</p> +L'attribut `results`, spécifique à Safari, est une valeur numérique qui permet de surcharger la valeur maximale du nombre de recherches précédentes affichées dans la liste déroulante des suggestions. -<h2 id="Utiliser_un_champ_de_recherche">Utiliser un champ de recherche</h2> +Cette valeur doit être un nombre positif. Si cet attribut n'est pas fourni, ou que sa valeur est invalide, ce sera le maximum fourni par le navigateur qui sera utilisé. -<p>Les éléments <code><input></code> de type <code>search</code> sont semblables aux éléments <code><input></code> de type <code>text</code> mais sont spécifiquement destinés à la gestion des termes d'une recherche.</p> +## Utiliser un champ de recherche -<h3 id="Exemple_simple">Exemple simple</h3> +Les éléments `<input>` de type `search` sont semblables aux éléments `<input>` de type `text` mais sont spécifiquement destinés à la gestion des termes d'une recherche. -<pre class="brush: html"><form> - <div> - <input type="search" id="maRecherche" name="q"> - <button>Rechercher</button> - </div> -</form></pre> +### Exemple simple -<p>Cet exemple produira le résultat suivant :</p> +```html +<form> + <div> + <input type="search" id="maRecherche" name="q"> + <button>Rechercher</button> + </div> +</form> +``` -<p>{{EmbedLiveSample("Exemple_simple", 600, 40)}}</p> +Cet exemple produira le résultat suivant : -<p><code>q</code> est la valeur standard utilisé pour l'attribut <code>name</code> des champs de recherche. Lorsque le formulaire est envoyée, les données envoyées au serveur auront la forme <code>q=termederecherche</code>. Il est nécessaire de fournir un nom (c'est-à-dire un attribut <code>name</code>) à un champ, sinon aucune information ne sera envoyée lors de l'envoi du formulaire.</p> +{{EmbedLiveSample("Exemple_simple", 600, 40)}} -<div class="note"> -<p><strong>Note :</strong> Il est toujours nécessaire de fournir une valeur pour l'attribut {{htmlattrxref("name","input")}} car sinon aucune valeur ne sera envoyée.</p> -</div> +`q` est la valeur standard utilisé pour l'attribut `name` des champs de recherche. Lorsque le formulaire est envoyée, les données envoyées au serveur auront la forme `q=termederecherche`. Il est nécessaire de fournir un nom (c'est-à-dire un attribut `name`) à un champ, sinon aucune information ne sera envoyée lors de l'envoi du formulaire. -<h3 id="Différences_entre_les_champs_de_recherche_et_les_champs_texte">Différences entre les champs de recherche et les champs texte</h3> +> **Note :** Il est toujours nécessaire de fournir une valeur pour l'attribut {{htmlattrxref("name","input")}} car sinon aucune valeur ne sera envoyée. -<p>La différence principale est la façon dont les navigateurs gèrent cet élément. Premièrement, certains navigateurs affiche une icône de croix dans la zone de saisie qui peut être utilisée pour retirer le terme de la recherche. Voici par exemple un aperçu de la fonctionnalité sous Chrome:</p> +### Différences entre les champs de recherche et les champs texte -<p><img alt="" src="chrome-cross-icon.png"></p> +La différence principale est la façon dont les navigateurs gèrent cet élément. Premièrement, certains navigateurs affiche une icône de croix dans la zone de saisie qui peut être utilisée pour retirer le terme de la recherche. Voici par exemple un aperçu de la fonctionnalité sous Chrome: -<p>De plus, les navigateurs modernes proposent souvent une auto-complétion basée sur les termes de recherche déjà utilisés sur le site. Ainsi, quand on réutilise le champ, différentes suggestions peuvent être affichées et utilisées. Voici l'aperçu de cette fonctionnalité sous Firefox :</p> + -<p><img alt="" src="firefox-auto-complete.png"></p> +De plus, les navigateurs modernes proposent souvent une auto-complétion basée sur les termes de recherche déjà utilisés sur le site. Ainsi, quand on réutilise le champ, différentes suggestions peuvent être affichées et utilisées. Voici l'aperçu de cette fonctionnalité sous Firefox : -<h3 id="Ajouter_un_texte_indicatif">Ajouter un texte indicatif</h3> + -<p>Il est possible de fournir un texte indicatif dans le champ de recherche afin de fournir une indication quant aux recherches qu'il est possible de faire. Pour cela, on ajoutera un texte avec l'attribut {{htmlattrxref("placeholder","")}}. Par exemple :</p> +### Ajouter un texte indicatif -<pre class="brush: html"><form> - <div> - <input type="search" id="maRecherche" name="q" - placeholder="Rechercher sur le site…"> - <button>Rechercher</button> - </div> -</form></pre> +Il est possible de fournir un texte indicatif dans le champ de recherche afin de fournir une indication quant aux recherches qu'il est possible de faire. Pour cela, on ajoutera un texte avec l'attribut {{htmlattrxref("placeholder","")}}. Par exemple : -<p>Voici le résultat obtenu avec ce fragment HTML :</p> +```html +<form> + <div> + <input type="search" id="maRecherche" name="q" + placeholder="Rechercher sur le site…"> + <button>Rechercher</button> + </div> +</form> +``` -<p>{{EmbedLiveSample("Ajouter_un_texte_indicatif", 600, 40)}}</p> +Voici le résultat obtenu avec ce fragment HTML : -<h3 id="Les_champs_de_recherche_et_l’accessibilité">Les champs de recherche et l’accessibilité</h3> +{{EmbedLiveSample("Ajouter_un_texte_indicatif", 600, 40)}} -<p>Un des problèmes posé par les formulaires de recherche est leur accessibilité. En effet, dans la plupart des situations, il n'est pas nécessaire de fournir une étiquette indiquant le rôle de la recherche car le placement du champ rend son rôle clair (<a href="https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">voici un exemple</a>).</p> +### Les champs de recherche et l’accessibilité -<p>En revanche, pour les personnes qui utilisent des technologies assistives, cela peut être source de confusion. Une façon de résoudre ce problème sans modifier l'organisation visuelle est d'utiliser les fonctionnalités <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA</a> :</p> +Un des problèmes posé par les formulaires de recherche est leur accessibilité. En effet, dans la plupart des situations, il n'est pas nécessaire de fournir une étiquette indiquant le rôle de la recherche car le placement du champ rend son rôle clair ([voici un exemple](https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)). -<ul> - <li>Utiliser un attribut <code>role</code> avec la valeur <code>search</code> sur l'élément <code><form></code> permettra aux lecteurs d'écran d'indiquer le formulaire comme étant un formulaire de recherche.</li> - <li>Si cela n'est pas suffisant, il est possible d'utiliser l'attribut <code>aria-label</code> sur l'élément <code><input></code>. Cet attribut peut contenir un texte descriptif qui sera lu à voix haute par un lecteur d'écran. Il s'agit d'un équivalent non-visuel de <code><label></code>.</li> -</ul> +En revanche, pour les personnes qui utilisent des technologies assistives, cela peut être source de confusion. Une façon de résoudre ce problème sans modifier l'organisation visuelle est d'utiliser les fonctionnalités [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) : -<p>Prenons un exemple :</p> +- Utiliser un attribut `role` avec la valeur `search` sur l'élément `<form>` permettra aux lecteurs d'écran d'indiquer le formulaire comme étant un formulaire de recherche. +- Si cela n'est pas suffisant, il est possible d'utiliser l'attribut `aria-label` sur l'élément `<input>`. Cet attribut peut contenir un texte descriptif qui sera lu à voix haute par un lecteur d'écran. Il s'agit d'un équivalent non-visuel de `<label>`. -<pre class="brush: html"><form role="search"> - <div> - <input type="search" id="maRecherche" name="q" +Prenons un exemple : + +```html +<form role="search"> + <div> + <input type="search" id="maRecherche" name="q" placeholder="Rechercher sur le site…" - aria-label="Rechercher parmi le contenu du site"> - <button>Rechercher</button> - </div> -</form></pre> + aria-label="Rechercher parmi le contenu du site"> + <button>Rechercher</button> + </div> +</form> +``` -<p>Voici le résultat obtenu grâce à ce fragment de HTML :</p> +Voici le résultat obtenu grâce à ce fragment de HTML : -<p>{{EmbedLiveSample("Les_champs_de_recherche_et_l’accessibilité", 600, 40)}}</p> +{{EmbedLiveSample("Les_champs_de_recherche_et_l’accessibilité", 600, 40)}} -<p>Il n'y a aucune différence visuelle avec l'exemple précédent mais avec cette deuxième version, les personnes qui utilisent un lecteur d'écran disposeront de plus d'informations.</p> +Il n'y a aucune différence visuelle avec l'exemple précédent mais avec cette deuxième version, les personnes qui utilisent un lecteur d'écran disposeront de plus d'informations. -<div class="note"> -<p><strong>Note :</strong> Voir <a href="/fr/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks">Signposts/Landmarks</a> pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité.</p> -</div> +> **Note :** Voir [Signposts/Landmarks](/fr/docs/Learn/Accessibility/WAI-ARIA_basics#SignpostsLandmarks) pour plus d'informations à propos de ces fonctionnalités relatives à l'accessibilité. -<h3 id="Paramétrer_la_taille_physique">Paramétrer la taille physique</h3> +### Paramétrer la taille physique -<p>Il est possible de contrôler la taille physique du champ de saisie grâce à l'attribut {{htmlattrxref("size", "input")}}. Cet attribut permet d'indiquer le nombre de caractères qui peuvent être affichés simultanément à l'intérieur du champ. Ainsi, dans l'exemple qui suit, la zone de recherche peut contenir 20 caractères :</p> +Il est possible de contrôler la taille physique du champ de saisie grâce à l'attribut {{htmlattrxref("size", "input")}}. Cet attribut permet d'indiquer le nombre de caractères qui peuvent être affichés simultanément à l'intérieur du champ. Ainsi, dans l'exemple qui suit, la zone de recherche peut contenir 20 caractères : -<pre class="brush: html"><form> - <div> - <input type="search" id="maRecherche" name="q" - placeholder="Rechercher sur le site…" size="30"> - <button>Rechercher</button> - </div> -</form></pre> +```html +<form> + <div> + <input type="search" id="maRecherche" name="q" + placeholder="Rechercher sur le site…" size="30"> + <button>Rechercher</button> + </div> +</form> +``` -<p>{{EmbedLiveSample('Paramétrer_la_taille_physique', 600, 40)}}</p> +{{EmbedLiveSample('Paramétrer_la_taille_physique', 600, 40)}} -<h2 id="Validation">Validation</h2> +## Validation -<p>Les éléments <code><input></code> de type <code>search</code> possèdent les mêmes fonctionnalités de validation que les éléments <code><input type="text"></code>. Il existe peu de raison de contraindre les termes d'une recherche mais voici quelques cas.</p> +Les éléments `<input>` de type `search` possèdent les mêmes fonctionnalités de validation que les éléments `<input type="text">`. Il existe peu de raison de contraindre les termes d'une recherche mais voici quelques cas. -<div class="note"> -<p><strong>Note :</strong> Attention, la validation des données d'un formulaire de recherche HTML par le client ne doit pas remplacer la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles.</p> -</div> +> **Note :** Attention, la validation des données d'un formulaire de recherche HTML par le client ne doit pas remplacer la vérification de ces données lorsqu'elles sont reçues sur le serveur. En effet, il est tout à fait possible pour quelqu'un de modifier le code HTML de la page pour outrepasser les mécanismes de validation. Il est également possible d'envoyer des données directement au serveur. Si le serveur ne valide pas les données reçues, des données potentiellement mal formatées pourraient causer des dommages aux bases de données et autres composants sensibles. -<h3 id="Une_note_sur_la_mise_en_forme">Une note sur la mise en forme</h3> +### Une note sur la mise en forme -<p>Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} permettent de mettre en forme les éléments d'un formulaire en fonction de la validité de leur contenu. Dans cette section, nous utiliserons la feuille de style suivante afin de placer une coche à côté des champs valides et une croix à côté des champs invalides.</p> +Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} permettent de mettre en forme les éléments d'un formulaire en fonction de la validité de leur contenu. Dans cette section, nous utiliserons la feuille de style suivante afin de placer une coche à côté des champs valides et une croix à côté des champs invalides. -<pre class="brush: css">input:invalid ~ span:after { +```css +input:invalid ~ span:after { content: '✖'; padding-left: 5px; position: absolute; @@ -263,24 +216,28 @@ input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute -}</pre> +} +``` -<p>Vous pouvez ici voir qu'on utilise un élément {{htmlelement("span")}} placé après l'élément du formulaire, c'est cet élément <code><span></code> qui contiendra les icônes. Cet élément est nécessaire car, sur certains navigateurs, les pseudo-classes dans les éléments de saisie sont mal gérées.</p> +Vous pouvez ici voir qu'on utilise un élément {{htmlelement("span")}} placé après l'élément du formulaire, c'est cet élément `<span>` qui contiendra les icônes. Cet élément est nécessaire car, sur certains navigateurs, les pseudo-classes dans les éléments de saisie sont mal gérées. -<h3 id="Rendre_le_champ_obligatoire">Rendre le champ obligatoire</h3> +### Rendre le champ obligatoire -<p>Il est possible d'utiliser l'attribut {{htmlattrxref("required","input")}} afin d'indiquer que la valeur doit obligatoirement être saisie avant d'envoyer le formulaire :</p> +Il est possible d'utiliser l'attribut {{htmlattrxref("required","input")}} afin d'indiquer que la valeur doit obligatoirement être saisie avant d'envoyer le formulaire : -<pre class="brush: html"><form> - <div> - <input type="search" id="maRecherche" name="q" - placeholder="Recherche sur le site…" required> - <button>Rechercher</button> - <span class="validity"></span> - </div> -</form></pre> +```html +<form> + <div> + <input type="search" id="maRecherche" name="q" + placeholder="Recherche sur le site…" required> + <button>Rechercher</button> + <span class="validity"></span> + </div> +</form> +``` -<pre class="brush: css hidden">input { +```css hidden +input { margin-right: 10px; } @@ -294,36 +251,40 @@ input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; -}</pre> +} +``` -<p>Voici le résultat obtenu :</p> +Voici le résultat obtenu : -<p>{{EmbedLiveSample('Rendre_le_champ_obligatoire', 600, 40)}}</p> +{{EmbedLiveSample('Rendre_le_champ_obligatoire', 600, 40)}} -<p>De plus, si on essaie d'envoyer le formulaire sans aucun terme de recherche, le navigateur affichera un message. Voici par exemple, le résultat dans Firefox :</p> +De plus, si on essaie d'envoyer le formulaire sans aucun terme de recherche, le navigateur affichera un message. Voici par exemple, le résultat dans Firefox : -<p><img alt="Champ de formulaire avec un message attaché indiquant 'veuillez remplir ce formulaire'" src="firefox-required-message.png"></p> + -<p>Différents messages peuvent être affichés selon le type d'erreur liée à la saisie.</p> +Différents messages peuvent être affichés selon le type d'erreur liée à la saisie. -<h3 id="Contraindre_la_taille_de_la_valeur_saisie">Contraindre la taille de la valeur saisie</h3> +### Contraindre la taille de la valeur saisie -<p>Il est possible d'indiquer une taille minimale pour la longueur des termes de la recherche via l'attribut {{htmlattrxref("minlength", "input")}}. De même, on peut fixer la longueur maximale du texte qui peut être saisi pour la recherche grâce à l'attribut {{htmlattrxref("maxlength", "input")}}. Ces deux attributs sont exprimés en nombres de caractères.</p> +Il est possible d'indiquer une taille minimale pour la longueur des termes de la recherche via l'attribut {{htmlattrxref("minlength", "input")}}. De même, on peut fixer la longueur maximale du texte qui peut être saisi pour la recherche grâce à l'attribut {{htmlattrxref("maxlength", "input")}}. Ces deux attributs sont exprimés en nombres de caractères. -<p>Dans l'exemple qui suit, la valeur saisie dans le champ de recherche doit mesurer entre 4 et 8 caractères.</p> +Dans l'exemple qui suit, la valeur saisie dans le champ de recherche doit mesurer entre 4 et 8 caractères. -<pre class="brush: html"><form> - <div> - <label for="mySearch">Rechercher un utilisateur</label> - <input type="search" id="mySearch" name="q" +```html +<form> + <div> + <label for="mySearch">Rechercher un utilisateur</label> + <input type="search" id="mySearch" name="q" placeholder="ID de 4 à 8 char." required - size="30" minlength="4" maxlength="8"> - <button>Rechercher</button> - <span class="validity"></span> - </div> -</form></pre> - -<pre class="brush: css hidden">input { + size="30" minlength="4" maxlength="8"> + <button>Rechercher</button> + <span class="validity"></span> + </div> +</form> +``` + +```css hidden +input { margin-right: 10px; } @@ -337,32 +298,36 @@ input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; -}</pre> +} +``` -<p>Voici le résultat obtenu avec ce fragment de code HTML :</p> +Voici le résultat obtenu avec ce fragment de code HTML : -<p>{{EmbedLiveSample('Contraindre_la_taille_de_la_valeur_saisie', 600, 40)}}</p> +{{EmbedLiveSample('Contraindre_la_taille_de_la_valeur_saisie', 600, 40)}} -<p>Si vous essayez de soumettre une valeur qui est plus petite que 4 caractères, vous aurez un message d'erreur (qui peut varier selon le navigateur utilisé). De plus, le navigateur ne permettra pas de saisir un texte plus long que 8 caractères.</p> +Si vous essayez de soumettre une valeur qui est plus petite que 4 caractères, vous aurez un message d'erreur (qui peut varier selon le navigateur utilisé). De plus, le navigateur ne permettra pas de saisir un texte plus long que 8 caractères. -<h3 id="Indiquer_un_motif">Indiquer un motif</h3> +### Indiquer un motif -<p>L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que doit respecter la valeur saisie pour être considérée valide (cf. <a href="/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire#Contraintes_de_validation_sur_les_éléments_<input>">Valider une valeur avec une expression rationnelle</a> pour une introduction).</p> +L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que doit respecter la valeur saisie pour être considérée valide (cf. [Valider une valeur avec une expression rationnelle](/fr/docs/Web/Guide/HTML/Formulaires/Validation_donnees_formulaire#Contraintes_de_validation_sur_les_éléments_<input>) pour une introduction). -<p>Prenons un exemple. Imaginons qu'on veuille rechercher un produit grâce à son identifiant et que les identifiants commencent par deux lettres, suivies de 4 chiffres. Dans l'exemple qui suit, le formulaire n'accepte qu'une valeur dont la taille est comprise entre 4 et 8 caractères et qui commence par deux lettres puis termine par 4 chiffres.</p> +Prenons un exemple. Imaginons qu'on veuille rechercher un produit grâce à son identifiant et que les identifiants commencent par deux lettres, suivies de 4 chiffres. Dans l'exemple qui suit, le formulaire n'accepte qu'une valeur dont la taille est comprise entre 4 et 8 caractères et qui commence par deux lettres puis termine par 4 chiffres. -<pre class="brush: html"><form> - <div> - <label for="mySearch">Rechercher un produit par son code :</label> - <input type="search" id="mySearch" name="q" +```html +<form> + <div> + <label for="mySearch">Rechercher un produit par son code :</label> + <input type="search" id="mySearch" name="q" placeholder="2 lettres puis 4 chiffres" required - size="30" pattern="[A-z]{2}[0-9]{4}"> - <button>Rechercher</button> - <span class="validity"></span> - </div> -</form></pre> - -<pre class="brush: css hidden">input { + size="30" pattern="[A-z]{2}[0-9]{4}"> + <button>Rechercher</button> + <span class="validity"></span> + </div> +</form> +``` + +```css hidden +input { margin-right: 10px; } @@ -376,75 +341,72 @@ input:valid ~ span:after { content: '✓'; padding-left: 5px; position: absolute; -}</pre> +} +``` -<p>Voici le résultat obtenu avec ce fragment HTML :</p> +Voici le résultat obtenu avec ce fragment HTML : -<p>{{EmbedLiveSample('Indiquer_un_motif', 600, 40)}}</p> +{{EmbedLiveSample('Indiquer_un_motif', 600, 40)}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Vous pouvez consulter un exemple de formulaire de recherche dans notre exemple <a href="https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles">website-aria-roles</a> (<a href="http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/">voir la démonstration <em>live</em></a>).</p> +Vous pouvez consulter un exemple de formulaire de recherche dans notre exemple [website-aria-roles](https://github.com/mdn/learning-area/tree/master/accessibility/aria/website-aria-roles) ([voir la démonstration _live_](http://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)). -<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 la valeur contenue dans le champ de recherche.</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("required", "input")}}, {{htmlattrxref("size", "input")}}.</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><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 la valeur contenue dans le champ de recherche. + </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("required", "input")}}, {{htmlattrxref("size", "input")}}. + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><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', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="search">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="search">')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="search">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | +| {{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="search">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-search")}}</p> +{{Compat("html.elements.input.input-search")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li> - <li>{{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} DOM qu'il implémente</li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code></li> -</ul> +- [Les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) +- {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} DOM qu'il implémente +- [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text) diff --git a/files/fr/web/html/element/input/submit/index.md b/files/fr/web/html/element/input/submit/index.md index 0dea8aeac7..01d495d09b 100644 --- a/files/fr/web/html/element/input/submit/index.md +++ b/files/fr/web/html/element/input/submit/index.md @@ -9,263 +9,224 @@ tags: - Reference translation_of: Web/HTML/Element/input/submit --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"submit"</code></strong> sont affichés comme des boutons permettant d'envoyer les données d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des données du formulaire vers le serveur.</p> +Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"submit"`** sont affichés comme des boutons permettant d'envoyer les données d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des données du formulaire vers le serveur. -<h2 id="Exemple_simple">Exemple simple</h2> +## Exemple simple -<pre class="brush: html"><input type="submit" value="Envoyer le formulaire"></pre> +```html +<input type="submit" value="Envoyer le formulaire"> +``` -<p>{{EmbedLiveSample("Exemple_simple", 650, 30)}}</p> +{{EmbedLiveSample("Exemple_simple", 650, 30)}} -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un élément <code><input type="submit"></code> contient une chaîne de caractères ({{domxref("DOMString")}}) qui est utilisée comme étiquette pour le bouton.</p> +La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un élément `<input type="submit">` contient une chaîne de caractères ({{domxref("DOMString")}}) qui est utilisée comme étiquette pour le bouton. -<p>Si on n'indique aucune valeur, ce sera un texte par défaut (dépendant du navigateur) qui sera utilisé ainsi que du système d'éxploitation:</p> +Si on n'indique aucune valeur, ce sera un texte par défaut (dépendant du navigateur) qui sera utilisé ainsi que du système d'éxploitation: -<h3 id="Exemple_avec_valeur_par_défaut">Exemple avec valeur par défaut</h3> +### Exemple avec valeur par défaut -<pre class="brush: html"><input type="submit"></pre> +```html +<input type="submit"> +``` -<p>{{EmbedLiveSample("Exemple_avec_valeur_par_défaut", 650, 30)}}</p> +{{EmbedLiveSample("Exemple_avec_valeur_par_défaut", 650, 30)}} -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> +## Attributs supplémentaires -<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons <code>"submit"</code> permettent d'utiliser les attributs suivants :</p> +En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons `"submit"` permettent d'utiliser les attributs suivants : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("formaction")}}</code></td> - <td>L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.</td> - </tr> - <tr> - <td><code>{{anch("formenctype")}}</code></td> - <td>Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.</td> - </tr> - <tr> - <td><code>{{anch("formmethod")}}</code></td> - <td>La méthode HTTP ({{HTTPMethod("get")}} ou {{HTTPMethod("post")}}) à utiliser pour envoyer le formulaire.</td> - </tr> - <tr> - <td><code>{{anch("formnovalidate")}}</code></td> - <td>Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">aux contraintes de validation</a> avant l'envoi des données au serveur.</td> - </tr> - <tr> - <td><code>{{anch("formtarget")}}</code></td> - <td>Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.</td> - </tr> - </tbody> -</table> +| Attribut | Description | +| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("formaction")}}` | L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini. | +| `{{anch("formenctype")}}` | Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire. | +| `{{anch("formmethod")}}` | La méthode HTTP ({{HTTPMethod("get")}} ou {{HTTPMethod("post")}}) à utiliser pour envoyer le formulaire. | +| `{{anch("formnovalidate")}}` | Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis [aux contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) avant l'envoi des données au serveur. | +| `{{anch("formtarget")}}` | Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire. | -<h3 id="htmlattrdef(formaction)">{{htmlattrdef("formaction")}}</h3> +### {{htmlattrdef("formaction")}} -<p>Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ <code><input></code>.</p> +Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ `<input>`. -<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image"><input type="image"></a></code> et {{HTMLElement("button")}}.</p> +Cet attribut est également disponible pour les éléments [`<input type="image">`](/fr/docs/Web/HTML/Element/input/image) et {{HTMLElement("button")}}. -<h3 id="htmlattrdef(formenctype)">{{htmlattrdef("formenctype")}}</h3> +### {{htmlattrdef("formenctype")}} -<p>Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :</p> +Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées : -<dl> - <dt><code>application/x-www-form-urlencoded</code></dt> - <dd>Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. <strong>Cette valeur est la valeur par défaut.</strong></dd> - <dt><code>multipart/form-data</code></dt> - <dd>Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'<em>uploader</em>des fichiers. Cet encodage <em>doit</em> être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} <code>"file"</code> (<code><a href="/fr/docs/Web/HTML/Element/input/file"><input type="file"></a></code>).</dd> - <dt><code>text/plain</code></dt> - <dd>Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.</dd> -</dl> +- `application/x-www-form-urlencoded` + - : Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. **Cette valeur est la valeur par défaut.** +- `multipart/form-data` + - : Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'*uploader*des fichiers. Cet encodage _doit_ être utilisé s'il y a des éléments {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} `"file"` ([`<input type="file">`](/fr/docs/Web/HTML/Element/input/file)). +- `text/plain` + - : Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées. -<p>Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.</p> +Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire. -<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image"><input type="image"></a></code> et {{HTMLElement("button")}}.</p> +Cet attribut est également disponible pour les éléments [`<input type="image">`](/fr/docs/Web/HTML/Element/input/image) et {{HTMLElement("button")}}. -<h3 id="htmlattrdef(formmethod)">{{htmlattrdef("formmethod")}}</h3> +### {{htmlattrdef("formmethod")}} -<p>Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :</p> +Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont : -<dl> - <dt><code>get</code></dt> - <dd>Une URL est construite en commençant avec l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec <code>formenctype</code> ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. <strong>C'est la valeur par défaut.</strong></dd> - <dt><code>post</code></dt> - <dd>Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour <code>get</code>) et les pièces jointes sous forme de fichiers.</dd> - <dt><code>dialog</code></dt> - <dd>Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.</dd> -</dl> +- `get` + - : Une URL est construite en commençant avec l'URL fournie par l'attribut `formaction` ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec `formenctype` ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. **C'est la valeur par défaut.** +- `post` + - : Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut `formaction` ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour `get`) et les pièces jointes sous forme de fichiers. +- `dialog` + - : Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise. -<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image"><input type="image"></a></code> et {{HTMLElement("button")}}.</p> +Cet attribut est également disponible pour les éléments [`<input type="image">`](/fr/docs/Web/HTML/Element/input/image) et {{HTMLElement("button")}}. -<h3 id="htmlattrdef(formnovalidate)">{{htmlattrdef("formnovalidate")}}</h3> +### {{htmlattrdef("formnovalidate")}} -<p>Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.</p> +Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent. -<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image"><input type="image"></a></code> et {{HTMLElement("button")}}.</p> +Cet attribut est également disponible pour les éléments [`<input type="image">`](/fr/docs/Web/HTML/Element/input/image) et {{HTMLElement("button")}}. -<h3 id="htmlattrdef(formtarget)">{{htmlattrdef("formtarget")}}</h3> +### {{htmlattrdef("formtarget")}} -<p>Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom <strong>d'un contexte de navigation</strong> (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.</p> +Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom **d'un contexte de navigation** (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent. -<p>En complément des noms des onglets, fenêtres, <em>iframes</em>, quelques mots-clés spéciaux peuvent être utilisés :</p> +En complément des noms des onglets, fenêtres, _iframes_, quelques mots-clés spéciaux peuvent être utilisés : -<dl> - <dt><code>_self</code></dt> - <dd>La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. <strong>Cette valeur est la valeur par défaut.</strong></dd> - <dt><code>_blank</code></dt> - <dd>La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.</dd> - <dt><code>_parent</code></dt> - <dd>La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de <code>"_self"</code>.</dd> - <dt><code>_top</code></dt> - <dd>La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de <code>"_self"</code>.</dd> -</dl> +- `_self` + - : La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. **Cette valeur est la valeur par défaut.** +- `_blank` + - : La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur. +- `_parent` + - : La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de `"_self"`. +- `_top` + - : La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de `"_self"`. -<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image"><input type="image"></a></code> et {{HTMLElement("button")}}.</p> +Cet attribut est également disponible pour les éléments [`<input type="image">`](/fr/docs/Web/HTML/Element/input/image) et {{HTMLElement("button")}}. -<h2 id="Utiliser_les_boutons_d'envoi">Utiliser les boutons d'envoi</h2> +## Utiliser les boutons d'envoi -<p>Les boutons <code><input type="submit"></code> sont utilisés afin d'envoyer des formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement avec JavaScript, il sera préférable d'utiliser un élément {{HTMLElement("button")}} ou un élément <code><a href="/fr/docs/Web/HTML/Element/input/button"><input type="button"></a></code>.</p> +Les boutons `<input type="submit">` sont utilisés afin d'envoyer des formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement avec JavaScript, il sera préférable d'utiliser un élément {{HTMLElement("button")}} ou un élément [`<input type="button">`](/fr/docs/Web/HTML/Element/input/button). -<p>Attention, si un seul élément bouton est inséré dans un formulaire (par exemple <code><button>Mon bouton</button></code>), le navigateur considèrera que ce bouton doit servir comme bouton d'envoi. Il est donc nécessaire de déclarer explicitement un bouton d'envoi (<code><input type="submit"></code>) en plus d'autres boutons que vous souhaiteriez ajouter.</p> +Attention, si un seul élément bouton est inséré dans un formulaire (par exemple `<button>Mon bouton</button>`), le navigateur considèrera que ce bouton doit servir comme bouton d'envoi. Il est donc nécessaire de déclarer explicitement un bouton d'envoi (`<input type="submit">`) en plus d'autres boutons que vous souhaiteriez ajouter. -<h3 id="Un_bouton_pour_envoyer_simple">Un bouton pour envoyer simple</h3> +### Un bouton pour envoyer simple -<p>Commençons par un exemple simple :</p> +Commençons par un exemple simple : -<pre class="brush: html"><form> - <div> - <label for="example">Veuillez saisir un texte</label> - <input id="example" type="text" name="text"> - </div> - <div> - <input type="submit" value="Envoyer"> - </div> -</form> -</pre> +```html +<form> + <div> + <label for="example">Veuillez saisir un texte</label> + <input id="example" type="text" name="text"> + </div> + <div> + <input type="submit" value="Envoyer"> + </div> +</form> +``` -<p>Voici le résultat obtenu :</p> +Voici le résultat obtenu : -<p>{{EmbedLiveSample("Un_bouton_pour_envoyer_simple", 650, 100)}}</p> +{{EmbedLiveSample("Un_bouton_pour_envoyer_simple", 650, 100)}} -<p>Pour tester, vous pouvez saisir un texte dans le champ puis cliquer sur le bouton.</p> +Pour tester, vous pouvez saisir un texte dans le champ puis cliquer sur le bouton. -<p>Lorsque le formulaire est envoyé, les paires formées par les noms et les valeurs seront envoyées au serveur. Dans le cas précédent, la donnée envoyée aura la forme <code>text=monTexte</code> (la deuxième partie varie selon le texte saisi). La destination et la méthode utilisées pour l'envoi des données dépend des attributs utilisés sur l'élément <code><form></code> (ainsi que d'autres détails). Pour plus d'informations, vous pouvez lire <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoyer les données d'un formulaire</a>.</p> +Lorsque le formulaire est envoyé, les paires formées par les noms et les valeurs seront envoyées au serveur. Dans le cas précédent, la donnée envoyée aura la forme `text=monTexte` (la deuxième partie varie selon le texte saisi). La destination et la méthode utilisées pour l'envoi des données dépend des attributs utilisés sur l'élément `<form>` (ainsi que d'autres détails). Pour plus d'informations, vous pouvez lire [Envoyer les données d'un formulaire](/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires). -<h3 id="Ajouter_un_raccourci_clavier">Ajouter un raccourci clavier</h3> +### Ajouter un raccourci clavier -<p>Les raccourcis claviers permettent à l'utilisateur d'utiliser une touche du clavier ou une combinaison de touches afin de déclencher l'action d'un bouton. Pour ajouter un raccourci à un bouton d'envoi, on peut utiliser l'attribut universel {{htmlattrxref("accesskey")}}.</p> +Les raccourcis claviers permettent à l'utilisateur d'utiliser une touche du clavier ou une combinaison de touches afin de déclencher l'action d'un bouton. Pour ajouter un raccourci à un bouton d'envoi, on peut utiliser l'attribut universel {{htmlattrxref("accesskey")}}. -<p>Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. {{htmlattrxref("accesskey")}} pour la liste de ces touches).</p> +Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. {{htmlattrxref("accesskey")}} pour la liste de ces touches). -<pre class="brush: html"><form> - <div> - <label for="example">Veuillez saisir du texte</label> - <input id="example" type="text" name="text"> - </div> - <div> - <input type="submit" value="Envoyer" - accesskey="s"> - </div> -</form></pre> +```html +<form> + <div> + <label for="example">Veuillez saisir du texte</label> + <input id="example" type="text" name="text"> + </div> + <div> + <input type="submit" value="Envoyer" + accesskey="s"> + </div> +</form> +``` -<p>{{EmbedLiveSample("Ajouter_un_raccourci_clavier", 650, 100)}}</p> +{{EmbedLiveSample("Ajouter_un_raccourci_clavier", 650, 100)}} -<div class="note"> -<p><strong>Note :</strong> Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.</p> -</div> +> **Note :** Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles. -<h3 id="Activer_et_désactiver_un_bouton_d'envoi">Activer et désactiver un bouton d'envoi</h3> +### Activer et désactiver un bouton d'envoi -<p>Si on souhaite désactiver un bouton, il sufft d'utiliser l'attribut booléen universel {{htmlattrxref("disabled")}} :</p> +Si on souhaite désactiver un bouton, il sufft d'utiliser l'attribut booléen universel {{htmlattrxref("disabled")}} : -<pre class="brush: html"><input type="submit" value="Disabled" disabled></pre> +```html +<input type="submit" value="Disabled" disabled> +``` -<p>Pour activer / désactiver le bouton dynamiquement, on pourra manipuler l'attribut DOM <code>disabled</code> avec la valeur <code>true</code> ou <code>false</code> en JavaScript (avec une instruction similaire à <code>btn.disabled = true</code>).</p> +Pour activer / désactiver le bouton dynamiquement, on pourra manipuler l'attribut DOM `disabled` avec la valeur `true` ou `false` en JavaScript (avec une instruction similaire à `btn.disabled = true`). -<div class="note"> -<p><strong>Note :</strong> Voir la page <code><a href="/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton"><input type="button"></a></code> pour plus d'exemples concernant l'activation/désactivation des boutons liés à un formulaire.</p> -</div> +> **Note :** Voir la page [`<input type="button">`](/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton) pour plus d'exemples concernant l'activation/désactivation des boutons liés à un formulaire. -<div class="note"> -<p><strong>Note :</strong> À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p> -</div> +> **Note :** À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité. -<h2 id="Validation">Validation</h2> +## Validation -<p>Il n'existe pas de mécanisme de validation natif côté client pour les boutons d'envoi de formulaires.</p> +Il n'existe pas de mécanisme de validation natif côté client pour les boutons d'envoi de formulaires. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Voir les exemples ci-avant.</p> +Voir les exemples ci-avant. -<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")}}) utilisée comme étiquette (texte) pour le bouton.</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("click")}}</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>value</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>Aucune.</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères ({{domxref("DOMString")}}) utilisée + comme étiquette (texte) pour le bouton. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("click")}}</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + {{htmlattrxref("type", "input")}}, and + {{htmlattrxref("value", "input")}} + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>Aucune.</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#submit-button-state-(type=submit)', '<input type="submit">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '<input type="submit">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'forms.html#submit-button-state-(type=submit)', '<input type="submit">')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '<input type="submit">')}} | {{Spec2('HTML5 W3C')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-submit")}}</p> +{{Compat("html.elements.input.input-submit")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente</li> - <li>L'élément {{HTMLElement("button")}}.</li> - <li><a href="/fr/docs/Learn/HTML/Forms_and_buttons">Apprendre les formulaires et les boutons</a></li> - <li><a href="/fr/docs/Web/Accessibility/ARIA/forms">L'accessibilité et les formulaires</a></li> - <li><a href="/fr/docs/Learn/HTML/Forms">Les formulaires HTML</a></li> -</ul> +- L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente +- L'élément {{HTMLElement("button")}}. +- [Apprendre les formulaires et les boutons](/fr/docs/Learn/HTML/Forms_and_buttons) +- [L'accessibilité et les formulaires](/fr/docs/Web/Accessibility/ARIA/forms) +- [Les formulaires HTML](/fr/docs/Learn/HTML/Forms) 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) diff --git a/files/fr/web/html/element/input/text/index.md b/files/fr/web/html/element/input/text/index.md index 8e33c53029..1b616957e4 100644 --- a/files/fr/web/html/element/input/text/index.md +++ b/files/fr/web/html/element/input/text/index.md @@ -8,247 +8,198 @@ tags: - Reference translation_of: Web/HTML/Element/input/text --- -<div>{{HTMLRef}}</div> - -<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"text"</strong></code> permettent de créer des champs de saisie avec du texte sur une seule ligne.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-standard")}}</div> - -<h2 id="Valeur">Valeur</h2> - -<p>L'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) qui correspond à la valeur contenue dans le champ texte. En JavaScript, cette valeur peut être récupérée avec la propriété JavaScript {{domxref("HTMLInputElement.value","value")}}.</p> - -<pre class="brush: js">monTextInput.value; -</pre> - -<p>Si aucune contrainte de validation n'est ajoutée (cf. {{anch("Validation")}} pour plus d'informations), la valeur peut être n'importe quelle chaîne de caractères voire la chaîne vide ("").</p> - -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> - -<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs textuels prennent en charge les attributs suivants :</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 qui peut être écrit dans ce champ.</td> - </tr> - <tr> - <td><code>{{anch("minlength")}}</code></td> - <td>Le nombre de caractères minimal 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 texte 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> - <tr> - <td><code>{{anch("spellcheck")}}</code></td> - <td>Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.</td> - </tr> - </tbody> -</table> +{{HTMLRef}} -<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> +Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"text"`** permettent de créer des champs de saisie avec du texte sur une seule ligne. -<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-text.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 texte 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> +## Valeur -<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> +L'attribut {{htmlattrxref("value", "input")}} d'un tel élément contient une chaîne de caractères ({{domxref("DOMString")}}) qui correspond à la valeur contenue dans le champ texte. En JavaScript, cette valeur peut être récupérée avec la propriété JavaScript {{domxref("HTMLInputElement.value","value")}}. -<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> +```js +monTextInput.value; +``` -<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du texte 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> +Si aucune contrainte de validation n'est ajoutée (cf. {{anch("Validation")}} pour plus d'informations), la valeur peut être n'importe quelle chaîne de caractères voire la chaîne vide (""). -<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> +## Attributs supplémentaires -<p>L'attribut <code>pattern</code> est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">valide</a>. Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">ce guide</a>). Le marqueur <code>'u'</code> est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif.</p> +En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs textuels prennent en charge les attributs suivants : -<p>Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré.</p> +| Attribut | Description | +| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `{{anch("maxlength")}}` | Le nombre de caractères maximal qui peut être écrit dans ce champ. | +| `{{anch("minlength")}}` | Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide. | +| `{{anch("pattern")}}` | Une expression rationnelle à laquelle doit correspondre le texte 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. | +| `{{anch("spellcheck")}}` | Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée. | -<div class="note"> -<p><strong>Note :</strong> L'attribut {{htmlattrxref("title", "input")}} pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ.</p> -</div> +### {{htmlattrdef("maxlength")}} -<p>Voir <a href="#format">la section sur l'utilisation de cet attribut ci-après</a> pour plus d'exemples.</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`. -<h3 id="htmlattrdef(placeholder)">{{htmlattrdef("placeholder")}}</h3> +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) 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'utilisateur. -<p>L'attribut <code>placeholder</code> est une chaîne de caractères fournissant une courte indication à l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte ne doit pas contenir de saut à la ligne.</p> +### {{htmlattrdef("minlength")}} -<p>Si le contenu du contrôle respecte une directionnalité donnée ({{Glossary("LTR")}} ou {{Glossary("RTL")}}) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode (cf. {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}).</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`. -<div class="note"> -<p><strong>Note :</strong> On évitera, tant que faire se peut, d'utiliser l'attribut <code>placeholder</code> car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir {{SectionOnPage("/fr/docs/Web/HTML/Element/input", "Libellés et textes indicatifs")}} pour plus d'informations.</p> -</div> +Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) 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'utilisateur. -<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3> +### {{htmlattrdef("pattern")}} -<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut <code>value</code> peut toujours être modifiée via du code JavaScript qui définirait la propriété {{domxref("HTMLInputElement.value")}}.</p> +L'attribut `pattern` est une expression rationnelle que doit respecter la valeur ({{htmlattrxref("value")}}) du champ afin d'être [valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Cette expression rationnelle doit être une expression rationnelle valide pour JavaScript (telle qu'utilisée par {{jsxref("RegExp")}} et telle que documentée dans [ce guide](/fr/docs/Web/JavaScript/Guide/Expressions_régulières)). Le marqueur `'u'` est fourni par le navigateur lors de la compilation de l'expression rationnelle afin que le motif soit traité comme une séquence de points de code Unicode plutôt que comme des caractères ASCII. Aucune barre oblique (/) ne devrait être utilisée autour du motif. -<div class="note"> -<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura pas d'effet si l'attribut <code>readonly</code> est également présent.</p> -</div> +Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré. -<h3 id="htmlattrdef(size)">{{htmlattrdef("size")}}</h3> +> **Note :** L'attribut {{htmlattrxref("title", "input")}} pourra être utilisé afin d'afficher une bulle d'informations qui explique les conditions à respecter. Il est également conseillé d'inclure un texte explicatif à proximité du champ. -<p>L'attribut <code>size</code> est un nombre positif qui indique le nombre de caractères affichés à l'écran et qui définit donc la largeur du champ. La valeur par défaut de cet attribut est 20. Étant donné que la largeur des caractères peut varier cet attribut ne permet de définir une largeur exacte mais approximative.</p> +Voir [la section sur l'utilisation de cet attribut ci-après](#format) pour plus d'exemples. -<p>Cet attribut ne définit pas la limite du nombre de caractères saisissables dans le champ mais uniquement, et approximativement, le nombre de caractères qui peuvent être affichés à l'écran simultanément. Pour fixer une taille maximale sur la valeur du champ, on utilisera plutôt l'attribut <code>{{anch("maxlength")}}</code>.</p> +### {{htmlattrdef("placeholder")}} -<h3 id="htmlattrdef(spellcheck)">{{htmlattrdef("spellcheck")}}</h3> +L'attribut `placeholder` est une chaîne de caractères fournissant une courte indication à l'utilisateur quant à l'information attendue dans le champ. Cet attribut devrait être un mot ou une phrase courte qui illustre le type de donnée attendu plutôt qu'un message explicatif. Le texte ne doit pas contenir de saut à la ligne. -<p><code>spellcheck</code> est un attribut universel qui est utilisé afin d'indiquer si la vérification orthographique doit être utilisée pour un élément. Il peut être utilisé pour n'importe quel contenu éditable mais possède certaines spécificités pour les éléments {{HTMLElement("input")}}. Les valeurs autorisées pour cet attribut sont :</p> +Si le contenu du contrôle respecte une directionnalité donnée ({{Glossary("LTR")}} ou {{Glossary("RTL")}}) et que le texte indicatif doit être présenté dans l'autre sens, il est possible d'utiliser l'algorithme de formatage bidirectionnel Unicode (cf. {{SectionOnPage("/en-US/docs/Web/Localization/Unicode_Bidirectional_Text_Algorithm", "Overriding BiDi using Unicode control characters")}}). -<dl> - <dt><code>false</code></dt> - <dd>La vérification orthographique est désactivée pour cet élément.</dd> - <dt><code>true</code></dt> - <dd>La vérification orthographique est activée pour cet élément.</dd> - <dt><code>""</code> (chaîne de caractères vide) ou aucune valeur</dt> - <dd>La configuration par défaut de l'élément par rapport à la vérification orthographique sera respectée. Cette configuration par défaut peut provenir de la valeur de <code>spellcheck</code> pour les éléments parents ou d'autres facteurs.</dd> -</dl> +> **Note :** On évitera, tant que faire se peut, d'utiliser l'attribut `placeholder` car il n'est pas sémantiquement très utile pour expliquer le formulaire et car il peut causer certains problèmes avec le contenu. Voir {{SectionOnPage("/fr/docs/Web/HTML/Element/input", "Libellés et textes indicatifs")}} pour plus d'informations. -<p>Un champ de saisie peut avoir la vérification orthographique activée s'il ne possède pas l'attribut {{anch("readonly")}} et qu'il n'est pas désactivé.</p> +### {{htmlattrdef("readonly")}} -<p>La valeur renvoyée par l'attribut <code>spellcheck</code> peut ne pas refléter l'état réel de la vérification ortographique si certaines préférences de l'agent utilisateur surchargent le paramétrage par défaut.</p> +Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. Toutefois, la valeur de l'attribut `value` peut toujours être modifiée via du code JavaScript qui définirait la propriété {{domxref("HTMLInputElement.value")}}. -<h2 id="Attributs_non-standard">Attributs non-standard</h2> +> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura pas d'effet si l'attribut `readonly` est également présent. -<p>Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés.</p> +### {{htmlattrdef("size")}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("autocorrect")}}</code></td> - <td>Une chaîne de caractères qui 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> +L'attribut `size` est un nombre positif qui indique le nombre de caractères affichés à l'écran et qui définit donc la largeur du champ. La valeur par défaut de cet attribut est 20. Étant donné que la largeur des caractères peut varier cet attribut ne permet de définir une largeur exacte mais approximative. + +Cet attribut ne définit pas la limite du nombre de caractères saisissables dans le champ mais uniquement, et approximativement, le nombre de caractères qui peuvent être affichés à l'écran simultanément. Pour fixer une taille maximale sur la valeur du champ, on utilisera plutôt l'attribut `{{anch("maxlength")}}`. + +### {{htmlattrdef("spellcheck")}} + +`spellcheck` est un attribut universel qui est utilisé afin d'indiquer si la vérification orthographique doit être utilisée pour un élément. Il peut être utilisé pour n'importe quel contenu éditable mais possède certaines spécificités pour les éléments {{HTMLElement("input")}}. Les valeurs autorisées pour cet attribut sont : + +- `false` + - : La vérification orthographique est désactivée pour cet élément. +- `true` + - : La vérification orthographique est activée pour cet élément. +- `""` (chaîne de caractères vide) ou aucune valeur + - : La configuration par défaut de l'élément par rapport à la vérification orthographique sera respectée. Cette configuration par défaut peut provenir de la valeur de `spellcheck` pour les éléments parents ou d'autres facteurs. + +Un champ de saisie peut avoir la vérification orthographique activée s'il ne possède pas l'attribut {{anch("readonly")}} et qu'il n'est pas désactivé. -<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> +La valeur renvoyée par l'attribut `spellcheck` peut ne pas refléter l'état réel de la vérification ortographique si certaines préférences de l'agent utilisateur surchargent le paramétrage par défaut. -<p>Un attribut spécifique à Safari, sous la forme d'une chaîne de caractères, qui indique si la correction automatique doit être appliquée lors de l'édition du champ. Les valeurs autorisées pour cet attribut sont :</p> +## Attributs non-standard -<dl> - <dt><code>on</code></dt> - <dd>La correction automatique et les remplacements de texte sont appliqués.</dd> - <dt><code>off</code></dt> - <dd>Toute correction automatique et tout remplacement de texte est désactivé.</dd> -</dl> +Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés. -<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> +| Attribut | Description | +| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("autocorrect")}}` | Une chaîne de caractères qui 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.** | -<p>Un attribut spécifique à Mozilla (et plus particulièrement Firefox pour Android) qui fournit une indication quant au type d'action effectuée lorsque l'utilisateur appuie sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition. Cette information pourra être utilisée afin de choisir le libellé à afficher sur la touche <kbd>Entrée</kbd> du clavier virtuel.</p> +### {{htmlattrdef("autocorrect")}} {{non-standard_inline}} -<div class="note"> -<p><strong>Note :</strong> Cet attribut <a href="https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute">a été standardisé</a> sous l'attribut universel {{htmlattrxref("enterkeyhint")}} mais ce dernier n'est pas encore largement implémenté. Pour connaître le statut du changement d'implémentation pour Firefox, voir {{bug(1490661)}}.</p> -</div> +Un attribut spécifique à Safari, sous la forme d'une chaîne de caractères, qui indique si la correction automatique doit être appliquée lors de l'édition du champ. Les valeurs autorisées pour cet attribut sont : -<p>Les valeurs autorisées pour cet attribut sont : <code>go</code>, <code>done</code>, <code>next</code>, <code>search</code> et <code>send</code>. Le navigateur décide alors, selon la valeur, quel libellé utiliser pour la touche Entrée.</p> +- `on` + - : La correction automatique et les remplacements de texte sont appliqués. +- `off` + - : Toute correction automatique et tout remplacement de texte est désactivé. -<h2 id="Utiliser_<input_typetext>">Utiliser <code><input type="text"></code></h2> +### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} -<p>Les éléments <code><input></code> de type <code>text</code> sont utilisés pour créer des champs texte sur une seule ligne. Ils doivent être utilisés lorsqu'on souhaite saisir du texte sur une ligne et qu'il n'existe pas de meilleur contrôle disponible pour la valeur (ainsi, s'il s'agit d'une <a href="/fr/docs/Web/HTML/Element/input/datetime-local">date</a>, <a href="/fr/docs/Web/HTML/Element/input/url">d'une URL</a>, <a href="/fr/docs/Web/HTML/Element/input/email">d'une adresse électronique</a> ou <a href="/fr/docs/Web/HTML/Element/input/search">d'une recherch</a>, on pourra par exemple utiliser des éléments plus pertinents).</p> +Un attribut spécifique à Mozilla (et plus particulièrement Firefox pour Android) qui fournit une indication quant au type d'action effectuée lorsque l'utilisateur appuie sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition. Cette information pourra être utilisée afin de choisir le libellé à afficher sur la touche <kbd>Entrée</kbd> du clavier virtuel. -<h3 id="Exemple_simple">Exemple simple</h3> +> **Note :** Cet attribut [a été standardisé](https://html.spec.whatwg.org/#input-modalities:-the-enterkeyhint-attribute) sous l'attribut universel {{htmlattrxref("enterkeyhint")}} mais ce dernier n'est pas encore largement implémenté. Pour connaître le statut du changement d'implémentation pour Firefox, voir {{bug(1490661)}}. -<pre class="brush: html"><form> - <div> - <label for="uname">Veuillez choisir un nom d'utilisateur :</label> - <input type="text" id="uname" name="name"> - </div> - <div> - <button>Envoyer</button> - </div> -</form></pre> +Les valeurs autorisées pour cet attribut sont : `go`, `done`, `next`, `search` et `send`. Le navigateur décide alors, selon la valeur, quel libellé utiliser pour la touche Entrée. -<p>Voici ce qui sera obtenu :</p> +## Utiliser `<input type="text">` -<p>{{EmbedLiveSample("Exemple_simple", 600, 50)}}</p> +Les éléments `<input>` de type `text` sont utilisés pour créer des champs texte sur une seule ligne. Ils doivent être utilisés lorsqu'on souhaite saisir du texte sur une ligne et qu'il n'existe pas de meilleur contrôle disponible pour la valeur (ainsi, s'il s'agit d'une [date](/fr/docs/Web/HTML/Element/input/datetime-local), [d'une URL](/fr/docs/Web/HTML/Element/input/url), [d'une adresse électronique](/fr/docs/Web/HTML/Element/input/email) ou [d'une recherch](/fr/docs/Web/HTML/Element/input/search), on pourra par exemple utiliser des éléments plus pertinents). -<p>Lorsque le formulaire est envoyé, la paire nom/valeur est envoyée au serveur sous la forme <code>uname=Chris</code> (si "Chris" était le texte qui avait été saisi avant d'envoyer le formulaire). Il faut veiller à bien avoir un attribut <code>name</code> pour l'élément <code><input></code> car sinon, rien ne sera envoyé.</p> +### Exemple simple -<h3 id="Utiliser_des_textes_indicatifs_-_placeholders">Utiliser des textes indicatifs <em>- placeholders</em></h3> +```html +<form> + <div> + <label for="uname">Veuillez choisir un nom d'utilisateur :</label> + <input type="text" id="uname" name="name"> + </div> + <div> + <button>Envoyer</button> + </div> +</form> +``` -<p>Il est possible de fournir un texte indicatif qui sera affiché dans le champ lorsqu'aucune valeur n'a été saisi. Pour cela, on utilise l'attribut {{htmlattrxref("placeholder","input")}}. Par exemple :</p> +Voici ce qui sera obtenu : -<pre class="brush: html"><form> - <div> - <label for="uname">Veuillez choisir un nom d'utilisateur :</label> - <input type="text" id="uname" name="name" - placeholder="Un seul mot, en minuscules"> - </div> - <div> - <button>Envoyer</button> - </div> -</form></pre> +{{EmbedLiveSample("Exemple_simple", 600, 50)}} -<p>Voici le résultat qui sera obtenu :</p> +Lorsque le formulaire est envoyé, la paire nom/valeur est envoyée au serveur sous la forme `uname=Chris` (si "Chris" était le texte qui avait été saisi avant d'envoyer le formulaire). Il faut veiller à bien avoir un attribut `name` pour l'élément `<input>` car sinon, rien ne sera envoyé. -<p>{{EmbedLiveSample("Utiliser_des_textes_indicatifs_-_placeholders", 600, 50)}}</p> +### Utiliser des textes indicatifs _- placeholders_ -<p>Le texte indicatif est généralement affiché dans une couleur plus claire que le texte qui sera saisi par l'utilisateur.</p> +Il est possible de fournir un texte indicatif qui sera affiché dans le champ lorsqu'aucune valeur n'a été saisi. Pour cela, on utilise l'attribut {{htmlattrxref("placeholder","input")}}. Par exemple : -<h3 id="Contrôler_la_taille_physique_du_champ">Contrôler la taille physique du champ</h3> +```html +<form> + <div> + <label for="uname">Veuillez choisir un nom d'utilisateur :</label> + <input type="text" id="uname" name="name" + placeholder="Un seul mot, en minuscules"> + </div> + <div> + <button>Envoyer</button> + </div> +</form> +``` -<p>La taille physique du champ de saisie peut être adaptée grâce à l'attribut {{htmlattrxref("size", "input")}}. Sa valeur correspond au nombre de caractères qui seront affichés simultanément. Voici par exemple, un fragment de code HTML où la contrôle de saisie affichera au plus 30 caractères en même temps (on pourra saisir un texte plus long mais toutes les lettres ne seront pas affichées) :</p> +Voici le résultat qui sera obtenu : -<pre class="brush: html"><form> - <div> - <label for="uname">Veuillez choisir un nom d'utilisateur : </label> - <input type="text" id="uname" name="name" +{{EmbedLiveSample("Utiliser_des_textes_indicatifs_-_placeholders", 600, 50)}} + +Le texte indicatif est généralement affiché dans une couleur plus claire que le texte qui sera saisi par l'utilisateur. + +### Contrôler la taille physique du champ + +La taille physique du champ de saisie peut être adaptée grâce à l'attribut {{htmlattrxref("size", "input")}}. Sa valeur correspond au nombre de caractères qui seront affichés simultanément. Voici par exemple, un fragment de code HTML où la contrôle de saisie affichera au plus 30 caractères en même temps (on pourra saisir un texte plus long mais toutes les lettres ne seront pas affichées) : + +```html +<form> + <div> + <label for="uname">Veuillez choisir un nom d'utilisateur : </label> + <input type="text" id="uname" name="name" placeholder="Un seul mot, en minuscules" - size="30"> - </div> - <div> - <button>Envoyer</button> - </div> -</form></pre> + size="30"> + </div> + <div> + <button>Envoyer</button> + </div> +</form> +``` -<p>{{EmbedLiveSample("Contrôler_la_taille_physique_du_champ", 600, 50)}}</p> +{{EmbedLiveSample("Contrôler_la_taille_physique_du_champ", 600, 50)}} -<h2 id="Validation">Validation</h2> +## Validation -<p>Les éléments <code><input></code> de type <code>text</code> ne possède pas de mécanisme de validation automatique. En revanche, il est possible d'ajouter certaines contraintes qui seront vérifiées côté client et que nous allons voir ici.</p> +Les éléments `<input>` de type `text` ne possède pas de mécanisme de validation automatique. En revanche, il est possible d'ajouter certaines contraintes qui seront vérifiées côté client et que nous allons voir ici. -<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> +> **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. -<h3 id="Un_aparté_sur_la_mise_en_forme">Un aparté sur la mise en forme</h3> +### Un aparté sur la mise en forme -<p>Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont utiles pour mettre en forme les éléments qui ne respectent pas les contraintes de validation. Dans la suite de cette section, nous utiliserons cette feuille de style afin d'afficher une coche ou une croix après les valeurs valides ou invalides.</p> +Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont utiles pour mettre en forme les éléments qui ne respectent pas les contraintes de validation. Dans la suite de cette section, nous utiliserons cette feuille de style afin d'afficher une coche ou une croix après les valeurs valides ou invalides. -<pre class="brush: css">div { +```css +div { margin-bottom: 10px; position: relative; } @@ -266,84 +217,94 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> +} +``` -<p>Comme le montrent les sélecteurs utilisés, cette technique s'appuie sur la présence d'un élément {{htmlelement("span")}} placé après le formulaire et qui joue le rôle de réceptacle pour les icônes. Cette méthode de contournement est nécessaire car certains navigateurs n'affichent pas les icônes placées directement sur les éléments de formulaire.</p> +Comme le montrent les sélecteurs utilisés, cette technique s'appuie sur la présence d'un élément {{htmlelement("span")}} placé après le formulaire et qui joue le rôle de réceptacle pour les icônes. Cette méthode de contournement est nécessaire car certains navigateurs n'affichent pas les icônes placées directement sur les éléments de formulaire. -<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3> +### Rendre la valeur obligatoire -<p>On peut utiliser l'attribut {{htmlattrxref("required","input")}} afin d'indiquer que la valeur doit être remplie avant de pouvoir envoyer le formulaire :</p> +On peut utiliser l'attribut {{htmlattrxref("required","input")}} afin d'indiquer que la valeur doit être remplie avant de pouvoir envoyer le formulaire : -<pre class="brush: html"><form> - <div> - <label for="uname">Veuillez choisir un nom d'utilisateur : </label> - <input type="text" id="uname" name="name" required> - <span class="validity"></span> - </div> - <div> - <button>Envoyer</button> - </div> -</form></pre> +```html +<form> + <div> + <label for="uname">Veuillez choisir un nom d'utilisateur : </label> + <input type="text" id="uname" name="name" required> + <span class="validity"></span> + </div> + <div> + <button>Envoyer</button> + </div> +</form> +``` -<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } 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> +```css hidden +div { margin-bottom: 10px; position: relative; } 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; } +``` -<p>Ce qui produira ce résultat :</p> +Ce qui produira ce résultat : -<p>{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 70)}}</p> +{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 70)}} -<p>Si vous tentez d'envoyer le formulaire sans avoir saisi de valeur dans le champ texte, le navigateur affichera un message d'erreur.</p> +Si vous tentez d'envoyer le formulaire sans avoir saisi de valeur dans le champ texte, le navigateur affichera un message d'erreur. -<h3 id="Contraindre_la_longueur_du_texte_saisi">Contraindre la longueur du texte saisi</h3> +### Contraindre la longueur du texte saisi -<p>Il est possible d'indiquer la longueur minimale du texte grâce à l'attribut {{htmlattrxref("minlength", "input")}}. De même, on peut utiliser l'attribut {{htmlattrxref("maxlength", "input")}} pour indiquer le nombre maximal de caractères attendus.</p> +Il est possible d'indiquer la longueur minimale du texte grâce à l'attribut {{htmlattrxref("minlength", "input")}}. De même, on peut utiliser l'attribut {{htmlattrxref("maxlength", "input")}} pour indiquer le nombre maximal de caractères attendus. -<p>Dans l'exemple suivant, pour que le texte soit valide, il faut qu'il soit plus long que 4 caractères et moins long que 8 caractères.</p> +Dans l'exemple suivant, pour que le texte soit valide, il faut qu'il soit plus long que 4 caractères et moins long que 8 caractères. -<pre class="brush: html"><form> - <div> - <label for="uname">Choisir un nom d'utilisateur : </label> - <input type="text" id="uname" name="name" required size="45" +```html +<form> + <div> + <label for="uname">Choisir un nom d'utilisateur : </label> + <input type="text" id="uname" name="name" required size="45" placeholder="Le nom d'utilisateur doit mesurer entre 4 et 8 caractères" - minlength="4" maxlength="8"> - <span class="validity"></span> - </div> - <div> - <button>Envoyer</button> - </div> -</form></pre> - -<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } 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> - -<p>Voici le résultat qui est alors obtenu :</p> - -<p>{{EmbedLiveSample('Contraindre_la_longueur_du_texte_saisi', 600, 70)}}</p> - -<p>Si vous essayez d'envoyer le formulaire avec un nom d'utilisateur plus court (que 4 caractères), le navigateur affichera un message d'erreur. De plus le navigateur empêchera de saisir une valeur plus longue que 8 caractères.</p> - -<div class="note"> -<p><strong>Note :</strong> Si on indique <code>minlength</code> mais pas <code>required</code>, la valeur saisie est considérée comme valide car l'utilisateur peut ne pas saisir de valeur.</p> -</div> - -<h3 id="Contraindre_un_format_spécifique_-_expression_rationnelle">Contraindre un format spécifique - expression rationnelle</h3> - -<p>L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que devra respecter la valeur saisie afin d'être valide (cf. <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Valider un champ par rapport à une expression rationnelle</a> pour une introduction).</p> - -<p>Dans l'exemple qui suit, on restreint le format du texte afin que ce soit un texte en minuscules (pour lequel seules les lettres de "a" à "z" sont autorisées) et qui mesure entre 4 et 8 caractères.</p> - -<pre class="brush: html"><form> - <div> - <label for="uname">Veuillez choisir un nom d'utilisateur : </label> - <input type="text" id="uname" name="name" required size="45" - pattern="[a-z]{4,8}"> - <span class="validity"></span> - <p>Un nom d'utilisateur doit être en minuscules sur 4 à 8 caractères.</p> - </div> - <div> - <button>Envoyer</button> - </div> -</form></pre> - -<pre class="brush: css">div { + minlength="4" maxlength="8"> + <span class="validity"></span> + </div> + <div> + <button>Envoyer</button> + </div> +</form> +``` + +```css hidden +div { margin-bottom: 10px; position: relative; } 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 qui est alors obtenu : + +{{EmbedLiveSample('Contraindre_la_longueur_du_texte_saisi', 600, 70)}} + +Si vous essayez d'envoyer le formulaire avec un nom d'utilisateur plus court (que 4 caractères), le navigateur affichera un message d'erreur. De plus le navigateur empêchera de saisir une valeur plus longue que 8 caractères. + +> **Note :** Si on indique `minlength` mais pas `required`, la valeur saisie est considérée comme valide car l'utilisateur peut ne pas saisir de valeur. + +### Contraindre un format spécifique - expression rationnelle + +L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que devra respecter la valeur saisie afin d'être valide (cf. [Valider un champ par rapport à une expression rationnelle](/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression) pour une introduction). + +Dans l'exemple qui suit, on restreint le format du texte afin que ce soit un texte en minuscules (pour lequel seules les lettres de "a" à "z" sont autorisées) et qui mesure entre 4 et 8 caractères. + +```html +<form> + <div> + <label for="uname">Veuillez choisir un nom d'utilisateur : </label> + <input type="text" id="uname" name="name" required size="45" + pattern="[a-z]{4,8}"> + <span class="validity"></span> + <p>Un nom d'utilisateur doit être en minuscules sur 4 à 8 caractères.</p> + </div> + <div> + <button>Envoyer</button> + </div> +</form> +``` + +```css +div { margin-bottom: 10px; position: relative; } @@ -367,76 +328,71 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> +} +``` -<p>Voici le résultat qui sera obtenu :</p> +Voici le résultat qui sera obtenu : -<p>{{EmbedLiveSample("Contraindre_un_format_spécifique_-_expression_rationnelle", 600, 110)}}</p> +{{EmbedLiveSample("Contraindre_un_format_spécifique_-_expression_rationnelle", 600, 110)}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>En plus des exemples précédents, vous pouvez consulter les articles <a href="/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML">Un premier formulaire en HTML</a> et <a href="/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML">Comment organiser un formulaire HTML</a>.</p> +En plus des exemples précédents, vous pouvez consulter les articles [Un premier formulaire en HTML](/fr/docs/Web/Guide/HTML/Formulaires/Mon_premier_formulaire_HTML) et [Comment organiser un formulaire HTML](/fr/docs/Web/Guide/HTML/Formulaires/Comment_structurer_un_formulaire_HTML). -<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 la valeur contenue dans le champ texte.</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("change")}} et {{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("required", "input")}}, {{htmlattrxref("readonly", "input")}}, {{htmlattrxref("size", "input")}}.</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><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 la valeur contenue dans le champ texte. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{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("required", "input")}}, {{htmlattrxref("readonly", "input")}}, + {{htmlattrxref("size", "input")}}. + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><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', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="text">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="text">')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', 'input.html#text-(type=text)-state-and-search-state-(type=search)', '<input type="text">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | +| {{SpecName('HTML5.1', 'sec-forms.html#text-typetext-state-and-search-state-typesearch', '<input type="text">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-text")}}</p> +{{Compat("html.elements.input.input-text")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Les formulaires HTML</a></li> - <li>{{HTMLElement("input")}} ainsi que l'interface DOM {{domxref("HTMLInputElement")}} qui est implémentée par cet élément.</li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/search"><input type="search"></a></code></li> - <li>{{HTMLElement("textarea")}} : un élément qui permet de saisir du texte sur plusieurs lignes</li> -</ul> +- [Les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) +- {{HTMLElement("input")}} ainsi que l'interface DOM {{domxref("HTMLInputElement")}} qui est implémentée par cet élément. +- [`<input type="search">`](/fr/docs/Web/HTML/Element/input/search) +- {{HTMLElement("textarea")}} : un élément qui permet de saisir du texte sur plusieurs lignes diff --git a/files/fr/web/html/element/input/time/index.md b/files/fr/web/html/element/input/time/index.md index ad51788acf..21c42173cd 100644 --- a/files/fr/web/html/element/input/time/index.md +++ b/files/fr/web/html/element/input/time/index.md @@ -8,197 +8,190 @@ tags: - Reference translation_of: Web/HTML/Element/input/time --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <strong><code>time</code></strong> permettent de créer des contrôles où l'utilisateur peut saisir une heure (avec des minutes et éventuellement des secondes).</p> +Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`time`** permettent de créer des contrôles où l'utilisateur peut saisir une heure (avec des minutes et éventuellement des secondes). -<div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div> +{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}} -<p>L'interface utilisateur affichée pour le contrôle peut varier d'un navigateur à l'autre. À l'heure où nous écrivons ces lignes, seul Safari ne prend pas en charge ce type de contrôle. Pour ce dernier, l'élément sera transformé en simple <code><a href="/fr/docs/Web/HTML/Element/Input/text"><input type="text"></a></code>.</p> +L'interface utilisateur affichée pour le contrôle peut varier d'un navigateur à l'autre. À l'heure où nous écrivons ces lignes, seul Safari ne prend pas en charge ce type de contrôle. Pour ce dernier, l'élément sera transformé en simple [`<input type="text">`](/fr/docs/Web/HTML/Element/Input/text). -<h2 id="Apparence">Apparence</h2> +## Apparence -<h3 id="ChromeOpera">Chrome/Opera</h3> +### Chrome/Opera -<p>Pour Chrome/Opera, le contrôle <code>time</code> possède deux cases permettant de saisir les heures d'une part et les minutes d'autre part (sur 12 ou 24 heures selon la locale de l'ordinateur), deux flèches pour augmenter ou réduire la valeur et une croix permettant de supprimer la valeur.</p> +Pour Chrome/Opera, le contrôle `time` possède deux cases permettant de saisir les heures d'une part et les minutes d'autre part (sur 12 ou 24 heures selon la locale de l'ordinateur), deux flèches pour augmenter ou réduire la valeur et une croix permettant de supprimer la valeur. -<p><img alt="Contrôle Chrome pour une heure sur 12 heures" src="chrome_time.png">12 heures</p> +12 heures -<p><img alt="Contrôle Chrome pour une heure sur 24 heures" src="chrome-time.png">24 heures</p> +24 heures -<h3 id="Firefox">Firefox</h3> +### Firefox -<p>Pour Firefox, l'aspect du contrôle est similaire mais il ne possède pas les flèches d'incrément. L'horloge peut également s'utiliser sur un format 12 heures ou 24 heures (selon la locale du système). Un bouton rond avec une croix permet de réinitialiser la valeur du contrôle.</p> +Pour Firefox, l'aspect du contrôle est similaire mais il ne possède pas les flèches d'incrément. L'horloge peut également s'utiliser sur un format 12 heures ou 24 heures (selon la locale du système). Un bouton rond avec une croix permet de réinitialiser la valeur du contrôle. -<p><img alt="Contrôle Firefox pour une heure sur 12 heures" src="firefox-time.png">12 heures</p> +12 heures -<p><img alt="Contrôle Firefox pour une heure sur 24 heures" src="firefox-time-24.png">24 heures</p> +24 heures -<h3 id="Edge">Edge</h3> +### Edge -<p>Pour Edge, le contrôle affiché est un plus élaboré : il affiche un sélecteur avec deux bandes déroulantes pour choisir l'heure et les minutes (sur 12 ou 24 heures selon la locale) :</p> +Pour Edge, le contrôle affiché est un plus élaboré : il affiche un sélecteur avec deux bandes déroulantes pour choisir l'heure et les minutes (sur 12 ou 24 heures selon la locale) : -<p><img alt="Contrôle Edge pour la saisie sur 12 heures" src="edge_time.png">12 heures</p> +12 heures -<p><img alt="Contrôle Edge pour la saisie sur 24 heures" src="edge-time.png">24 heures</p> +24 heures -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de l'heure saisie dans le contrôle. Il est possible de définir une valeur par défaut en indiquant une heure dans l'attribut {{htmlattrxref("value", "input")}} :</p> +Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de l'heure saisie dans le contrôle. Il est possible de définir une valeur par défaut en indiquant une heure dans l'attribut {{htmlattrxref("value", "input")}} : -<pre class="brush: html"><label for="appt-time">Veuillez choisir une heure de rendez-vous :</label> -<input id="appt-time" type="time" name="appt-time" value="13:30"></pre> +```html +<label for="appt-time">Veuillez choisir une heure de rendez-vous :</label> +<input id="appt-time" type="time" name="appt-time" value="13:30"> +``` -<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> +{{EmbedLiveSample('Valeur', 600, 60)}} -<p>Il est également possible d'obtenir et de fixer l'heure en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p> +Il est également possible d'obtenir et de fixer l'heure en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple : -<pre class="brush: js">var timeControl = document.querySelector('input[type="time"]'); -timeControl.value = '15:30';</pre> +```js +var timeControl = document.querySelector('input[type="time"]'); +timeControl.value = '15:30'; +``` -<h3 id="Représentation_de_la_valeur">Représentation de la valeur</h3> +### Représentation de la valeur -<p>Attention, le format d'affichage peut être différent de la valeur exacte contenue dans l'attribut <code>value</code>. Le format d'affichage sera choisi en fonction de la locale du système d'exploitation de l'utilisateur alors que la valeur de <code>value</code> suivra toujours le format <code>hh:mm</code> (où <code>hh</code> représente les deux chiffres de l'heure sur 24 heures et où <code>mm</code> représente les deux chiffres pour les minutes). Ainsi, <code>13:30</code>, pourra être affiché sous la forme <code>1.30 PM</code> dans le contrôle mais la valeur envoyée avec le formulaire sera toujours <code>appt-time=13%3A30</code>. Pour en savoir plus, vous pouvez vous référer à <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">l'article sur les formats utilisés pour les représentations des dates et heures</a>.</p> +Attention, le format d'affichage peut être différent de la valeur exacte contenue dans l'attribut `value`. Le format d'affichage sera choisi en fonction de la locale du système d'exploitation de l'utilisateur alors que la valeur de `value` suivra toujours le format `hh:mm` (où `hh` représente les deux chiffres de l'heure sur 24 heures et où `mm` représente les deux chiffres pour les minutes). Ainsi, `13:30`, pourra être affiché sous la forme `1.30 PM` dans le contrôle mais la valeur envoyée avec le formulaire sera toujours `appt-time=13%3A30`. Pour en savoir plus, vous pouvez vous référer à [l'article sur les formats utilisés pour les représentations des dates et heures](/fr/docs/Web/HTML/Formats_date_heure_HTML). -<p>Prenons un autre exemple qui permet de voir simultanément la valeur dans le contrôle et celle stockée dans l'attribut :</p> +Prenons un autre exemple qui permet de voir simultanément la valeur dans le contrôle et celle stockée dans l'attribut : -<h4 id="HTML">HTML</h4> +#### HTML -<pre class="brush: html"><form> - <label for="startTime">Début : </label> - <input type="time" id="startTime"> - <p> - Valeur stockée dans <code>&lt;input time&gt;</code> :<code> - "<span id="value">n/a</span>"</code>. - </p> -</form></pre> +```html +<form> + <label for="startTime">Début : </label> + <input type="time" id="startTime"> + <p> + Valeur stockée dans <code><input time></code> :<code> + "<span id="value">n/a</span>"</code>. + </p> +</form> +``` -<h4 id="JavaScript">JavaScript</h4> +#### JavaScript -<p>On utilise quelques lignes de JavaScript afin de récupérer la valeur stockée et on l'insère dans l'élément <code><span></code> du fragment HTML précédent en surveillant l'évènement {{domxref("HTMLElement/input_event", "input")}} :</p> +On utilise quelques lignes de JavaScript afin de récupérer la valeur stockée et on l'insère dans l'élément `<span>` du fragment HTML précédent en surveillant l'évènement {{domxref("HTMLElement/input_event", "input")}} : -<pre class="brush: js">var startTime = document.getElementById("startTime"); +```js +var startTime = document.getElementById("startTime"); var valueSpan = document.getElementById("value"); startTime.addEventListener("input", function() { valueSpan.innerText = startTime.value; -}, false);</pre> - -<h4 id="Résultat">Résultat</h4> - -<p>{{EmbedLiveSample("Représentation_de_la_valeur", 600, 80)}}</p> - -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> - -<p>En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type <code>"time"</code> gèrent les attributs suivants :</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("max")}}</code></td> - <td>L'heure la plus tardive qui est accepté, au format <code>"hh:mm"</code>.</td> - </tr> - <tr> - <td><code>{{anch("min")}}</code></td> - <td>L'heure la plus tôt qui est acceptée au format <code>"hh:mm"</code>.</td> - </tr> - <tr> - <td><code>{{anch("readonly")}}</code></td> - <td>Un attribut booléen qui, lorsqu'il est présent, indique que le contenu du champ ne peut pas être édité par l'utilisateur.</td> - </tr> - <tr> - <td><code>{{anch("step")}}</code></td> - <td>Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation.</td> - </tr> - </tbody> -</table> +}, false); +``` + +#### Résultat + +{{EmbedLiveSample("Représentation_de_la_valeur", 600, 80)}} + +## Attributs supplémentaires + +En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"time"` gèrent les attributs suivants : + +| Attribut | Description | +| ------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("max")}}` | L'heure la plus tardive qui est accepté, au format `"hh:mm"`. | +| `{{anch("min")}}` | L'heure la plus tôt qui est acceptée au format `"hh:mm"`. | +| `{{anch("readonly")}}` | Un attribut booléen qui, lorsqu'il est présent, indique que le contenu du champ ne peut pas être édité par l'utilisateur. | +| `{{anch("step")}}` | Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation. | -<div class="note"> - <p><strong>Note :</strong> À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine <strong>périodique</strong>. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique <code>min</code> avec la valeur <code>"14:00"</code> et <code>max</code> avec la valeur <code>"2:00"</code>, cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant.</p> -</div> +> **Note :** À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine **périodique**. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique `min` avec la valeur `"14:00"` et `max` avec la valeur `"2:00"`, cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant. -<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> +### {{htmlattrdef("max")}} -<p>Une chaîne de caractères, au format <code>"hh:mm"</code>, qui indique l'heure la plus tardive qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun maximum n'est défini.</p> +Une chaîne de caractères, au format `"hh:mm"`, qui indique l'heure la plus tardive qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun maximum n'est défini. -<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> +### {{htmlattrdef("min")}} -<p>Une chaîne de caractères, au format <code>"hh:mm"</code>, qui indique l'heure la plus tôt qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun minimum n'est défini.</p> +Une chaîne de caractères, au format `"hh:mm"`, qui indique l'heure la plus tôt qui est considérée comme valide. Si la chaîne fournie n'est pas valide, aucun minimum n'est défini. -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} -<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> +### {{htmlattrdef("step")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> +{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} -<p>Pour les champs de type <code>time</code>, la valeur de l'attribut <code>step</code> est exprimée en secondes (avec un facteur de multiplication de 1000). Par défaut, la valeur de l'incrément est 60, ce qui correspond à 1 minute.</p> +Pour les champs de type `time`, la valeur de l'attribut `step` est exprimée en secondes (avec un facteur de multiplication de 1000). Par défaut, la valeur de l'incrément est 60, ce qui correspond à 1 minute. -<p><em>À l'heure où ces lignes sont écrites, la signification de la valeur <code>"any"</code> pour l'attribut <code>step</code> pour les champs <code>time</code> n'est pas certaine. Cette information sera mise à jour dès que possible.</em></p> +_À l'heure où ces lignes sont écrites, la signification de la valeur `"any"` pour l'attribut `step` pour les champs `time` n'est pas certaine. Cette information sera mise à jour dès que possible._ -<h2 id="Utiliser_<input_typetime>">Utiliser <code><input type="time"></code></h2> +## Utiliser `<input type="time">` -<p>Ces champs de saisie peuvent sembler pratiques : ils fournissent simplement une interface utilisateur pour sélectionner ds heures et normalisent les données dans un format (indépendant de la locale de l'utilisateur) avant de l'envoyer au serveur. Toutefois, quelques écueils peuvent apparaître en raison de la prise en charge hétérogène des différents navigateurs.</p> +Ces champs de saisie peuvent sembler pratiques : ils fournissent simplement une interface utilisateur pour sélectionner ds heures et normalisent les données dans un format (indépendant de la locale de l'utilisateur) avant de l'envoyer au serveur. Toutefois, quelques écueils peuvent apparaître en raison de la prise en charge hétérogène des différents navigateurs. -<p>Dans la suite de cet article, nous verrons des cas d'utilisation simples puis complexes autour de <code><input type="time"></code> puis nous verrons comment gérer l'absence de prise en charge des navigateur avec un exemple plus développé.</p> +Dans la suite de cet article, nous verrons des cas d'utilisation simples puis complexes autour de `<input type="time">` puis nous verrons comment gérer l'absence de prise en charge des navigateur avec un exemple plus développé. -<h3 id="Utilisation_simple">Utilisation simple</h3> +### Utilisation simple -<p>Dans sa forme la plus simple, <code><input type="time"></code> n'est accompagné que d'un élément {{htmlelement("label")}} :</p> +Dans sa forme la plus simple, `<input type="time">` n'est accompagné que d'un élément {{htmlelement("label")}} : -<pre class="brush: html"><form> - <label for="appt-time">Veuillez choisir une heure de rendez-vous : </label> - <input id="appt-time" type="time" name="appt-time"> -</form></pre> +```html +<form> + <label for="appt-time">Veuillez choisir une heure de rendez-vous : </label> + <input id="appt-time" type="time" name="appt-time"> +</form> +``` -<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p> +{{EmbedLiveSample('Utilisation_simple', 600, 40)}} -<h3 id="Ajuster_la_taille_du_contrôle">Ajuster la taille du contrôle</h3> +### Ajuster la taille du contrôle -<p><code><input type="time"></code> ne prend pas en charge d'attribut qui permette de le dimensionner (à la façon de {{htmlattrxref("size", "input")}}). Il faut donc utiliser <a href="/fr/docs/Web/CSS">CSS</a> si besoin.</p> +`<input type="time">` ne prend pas en charge d'attribut qui permette de le dimensionner (à la façon de {{htmlattrxref("size", "input")}}). Il faut donc utiliser [CSS](/fr/docs/Web/CSS) si besoin. -<h3 id="Utiliser_step">Utiliser <code>step</code></h3> +### Utiliser `step` -<p>L'attribut {{htmlattrxref("step", "input")}} peut être utilisé afin de faire varier l'incrément de temps lorsqu'on passe d'une valeur à la suivante ou à la précédente. Attention toutefois, cela n'est pas pris en charge ou homogène parmi les différents navigateurs.</p> +L'attribut {{htmlattrxref("step", "input")}} peut être utilisé afin de faire varier l'incrément de temps lorsqu'on passe d'une valeur à la suivante ou à la précédente. Attention toutefois, cela n'est pas pris en charge ou homogène parmi les différents navigateurs. -<p>La valeur de cet attribut est un entier exprimant le nombre de secondes à incrémenter. Si on choisit une valeur inférieure à 60 secondes (c'est-à-dire 1 minute), le contrôle <code>time</code> affichera alors une troisième section pour les secondes après les heures et les minutes:</p> +La valeur de cet attribut est un entier exprimant le nombre de secondes à incrémenter. Si on choisit une valeur inférieure à 60 secondes (c'est-à-dire 1 minute), le contrôle `time` affichera alors une troisième section pour les secondes après les heures et les minutes: -<pre class="brush: html"><form> - <label for="appt-time">Veuillez choisir une heure de rendez-vous : </label> - <input id="appt-time" type="time" name="appt-time" step="2"> -</form></pre> +```html +<form> + <label for="appt-time">Veuillez choisir une heure de rendez-vous : </label> + <input id="appt-time" type="time" name="appt-time" step="2"> +</form> +``` -<p>{{EmbedLiveSample("Utiliser_step", 600, 40)}}</p> +{{EmbedLiveSample("Utiliser_step", 600, 40)}} -<p>Cependant, cela ne semble avoir un effet prévisible que pour Chrome/Opera qui sont les deux navigateurs à posséder des flèches d'incrément. Avant l'exemple précédent, cliquer sur le flèche augmentera/réduira l'heure de deux secondes (si on souhaite manipuler des minutes, il faudra multiplier par 60 et de même pour les heures : un incrément de 120 correspondra à 2 minutes et un incrément de 7200 correspondra à 2 heures).</p> +Cependant, cela ne semble avoir un effet prévisible que pour Chrome/Opera qui sont les deux navigateurs à posséder des flèches d'incrément. Avant l'exemple précédent, cliquer sur le flèche augmentera/réduira l'heure de deux secondes (si on souhaite manipuler des minutes, il faudra multiplier par 60 et de même pour les heures : un incrément de 120 correspondra à 2 minutes et un incrément de 7200 correspondra à 2 heures). -<p>Cet attribut semble n'avoir aucun impact pour Firefox ou Edge voire empêche la validation de fonctionner (voir la prochaine section).</p> +Cet attribut semble n'avoir aucun impact pour Firefox ou Edge voire empêche la validation de fonctionner (voir la prochaine section). -<h2 id="Validation">Validation</h2> +## Validation -<p>Par défaut <code><input type="time"></code> ne valide pas les valeurs saisies. En effet, l'interface utilisateur ne permet de choisir une valeur exotique (par exemple 36:87).</p> +Par défaut `<input type="time">` ne valide pas les valeurs saisies. En effet, l'interface utilisateur ne permet de choisir une valeur exotique (par exemple 36:87). -<h3 id="Indiquer_une_heure_maximale_et_minimale">Indiquer une heure maximale et minimale</h3> +### Indiquer une heure maximale et minimale -<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de réduire la plage horaire valide pendant laquelle l'utilisateur peut sélectionner une heure. Dans l'exemple suivant, l'utilisateur peut saisir une heure minimum de <code>12:00</code> et une heure maximum de <code>18:00</code>:</p> +Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de réduire la plage horaire valide pendant laquelle l'utilisateur peut sélectionner une heure. Dans l'exemple suivant, l'utilisateur peut saisir une heure minimum de `12:00` et une heure maximum de `18:00`: -<pre class="brush: html"><form> - <label for="appt-time">Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : </label> - <input id="appt-time" type="time" name="appt-time" - min="12:00" max="18:00"> - <span class="validity"></span> -</form></pre> +```html +<form> + <label for="appt-time">Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00"> + <span class="validity"></span> +</form> +``` -<p>{{EmbedLiveSample('Indiquer_une_heure_maximale_et_minimale', 600, 40)}}</p> +{{EmbedLiveSample('Indiquer_une_heure_maximale_et_minimale', 600, 40)}} -<p>Voici la feuille de style CSS utilisée dans l'exemple précédent. On utilise les pseudos-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes qui indiquent cette validité ont été placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de placer du contenu généré dans le contrôle.</p> +Voici la feuille de style CSS utilisée dans l'exemple précédent. On utilise les pseudos-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes qui indiquent cette validité ont été placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de placer du contenu généré dans le contrôle. -<pre class="brush: css">div { +```css +div { margin-bottom: 10px; position: relative; } @@ -221,84 +214,85 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> +} +``` + +Avec ce fragment de code HTML : -<p>Avec ce fragment de code HTML :</p> +- Seules les heures comprises entre 12:00 et 18:00 sont affichées comme étant valides (les heures avant et après seront invalides). +- Selon le navigateur utilisé, il peut même être impossible de sélectionner une heure en dehors de la plage restreinte (avec Edge notamment). -<ul> - <li>Seules les heures comprises entre 12:00 et 18:00 sont affichées comme étant valides (les heures avant et après seront invalides).</li> - <li>Selon le navigateur utilisé, il peut même être impossible de sélectionner une heure en dehors de la plage restreinte (avec Edge notamment).</li> -</ul> +### Rendre la saisie obligatoire -<h3 id="Rendre_la_saisie_obligatoire">Rendre la saisie obligatoire</h3> +On peut également utiliseer l'attribut {{htmlattrxref("required", "input")}} afin que la saisie du champ soit obligatoire. Lorsque c'est le cas, les navigateurs afficheront un message d'erreur si l'utilisateur tente d'envoyer le formulaire sans avoir saisi de valeur (ou si celle-ci est en dehors de la plage indiquée). -<p>On peut également utiliseer l'attribut {{htmlattrxref("required", "input")}} afin que la saisie du champ soit obligatoire. Lorsque c'est le cas, les navigateurs afficheront un message d'erreur si l'utilisateur tente d'envoyer le formulaire sans avoir saisi de valeur (ou si celle-ci est en dehors de la plage indiquée).</p> +Prenons l'exemple suivant qui restreint la plage horaire sélectionnable et qui rend le champ obligatoire : -<p>Prenons l'exemple suivant qui restreint la plage horaire sélectionnable et qui rend le champ obligatoire :</p> +```html +<form> + <div> + <label for="appt-time">Veuillez choisir une heure de rendez-vous (horaires d'ouverture entre 12:00 et 18:00) : </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Envoyer le formulaire"> + </div> +</form> +``` -<pre class="brush: html"><form> - <div> - <label for="appt-time">Veuillez choisir une heure de rendez-vous (horaires d'ouverture entre 12:00 et 18:00) : </label> - <input id="appt-time" type="time" name="appt-time" - min="12:00" max="18:00" required> - <span class="validity"></span> - </div> - <div> - <input type="submit" value="Envoyer le formulaire"> - </div> -</form></pre> +Si vous essayez de soumettre le formulaire sans avoir saisi de valeur (ou avec une heure en dehors des heures d'ouverture indiquées), le navigateur affichera une erreur. Vous pouvez manipuler le résultat obtenu : -<p>Si vous essayez de soumettre le formulaire sans avoir saisi de valeur (ou avec une heure en dehors des heures d'ouverture indiquées), le navigateur affichera une erreur. Vous pouvez manipuler le résultat obtenu :</p> +{{EmbedLiveSample('Rendre_la_saisie_obligatoire', 600, 120)}} -<p>{{EmbedLiveSample('Rendre_la_saisie_obligatoire', 600, 120)}}</p> -<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> +> **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. -<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> +## Gérer la prise en charge des navigateurs -<p>Comme mentionné avant, un problème peut être l'hétérogénéité de la prise en charge des navigateurs : Safari ne prend pas en charge cette fonctionnalité sur les ordinateurs de bureau et les anciennes versions d'Internet Explorer n'implémentent pas cet élément.</p> +Comme mentionné avant, un problème peut être l'hétérogénéité de la prise en charge des navigateurs : Safari ne prend pas en charge cette fonctionnalité sur les ordinateurs de bureau et les anciennes versions d'Internet Explorer n'implémentent pas cet élément. -<p>Pour les plateformes mobiles (Android et iOS par exemple), les systèmes d'exploitation fournissent des interfaces particulièrement adaptées aux environnements tactiles. Voici par exemple le sélecteur d'heure pour Chrome sur Android :</p> +Pour les plateformes mobiles (Android et iOS par exemple), les systèmes d'exploitation fournissent des interfaces particulièrement adaptées aux environnements tactiles. Voici par exemple le sélecteur d'heure pour Chrome sur Android : -<p><img alt="" src="chrome-android-time.png"></p> + -<p>Lorsqu'un navigateur ne prend pas en charge ce type d'élément, il utilise un champ texte (<code><input type="text"></code>) à la place. Mais cela crée des problèmes, tant au niveau de l'interface utilisateur que de la cohérence des données et du format.</p> +Lorsqu'un navigateur ne prend pas en charge ce type d'élément, il utilise un champ texte (`<input type="text">`) à la place. Mais cela crée des problèmes, tant au niveau de l'interface utilisateur que de la cohérence des données et du format. -<p>C'est ce problème de format qui est le plus important. Comme nous l'avons expliqués plus haut, un champ<code>time</code> permet d'obtenir un valeur normalisée, respectant le format <code>hh:mm</code>. Avec un champ texte, le navigateur ne reconnaît pas de format particulier pour l'heure et les utilisateurs peuvent employer différentes formes pour décrire l'heure voulue :</p> +C'est ce problème de format qui est le plus important. Comme nous l'avons expliqués plus haut, un champ`time` permet d'obtenir un valeur normalisée, respectant le format `hh:mm`. Avec un champ texte, le navigateur ne reconnaît pas de format particulier pour l'heure et les utilisateurs peuvent employer différentes formes pour décrire l'heure voulue : -<ul> - <li><code>3.00 pm</code></li> - <li><code>3:00pm</code></li> - <li><code>15:00</code></li> - <li><code>3h de l'après-midi</code></li> - <li>etc.</li> -</ul> +- `3.00 pm` +- `3:00pm` +- `15:00` +- `3h de l'après-midi` +- etc. -<p>Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur le champ <code>time</code>. Bien quqe le champ <code>time</code> n'utilise pas cet attribut, le champ texte pourra l'utiliser. Vous pouvez par exemple tester ce fragment de code dans un navigateur qui ne prend pas en charge <code><input type="time"></code> :</p> +Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur le champ `time`. Bien quqe le champ `time` n'utilise pas cet attribut, le champ texte pourra l'utiliser. Vous pouvez par exemple tester ce fragment de code dans un navigateur qui ne prend pas en charge `<input type="time">` : -<pre class="brush: html"><form> - <div> - <label for="appt-time">Veuillez choisir une heure de rendez-vous (heures d'ouverture entre 12:00 et 18:00) : </label> - <input id="appt-time" type="time" name="appt-time" +```html +<form> + <div> + <label for="appt-time">Veuillez choisir une heure de rendez-vous (heures d'ouverture entre 12:00 et 18:00) : </label> + <input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" required - pattern="[0-9]{2}:[0-9]{2}"> - <span class="validity"></span> - </div> - <div> - <input type="submit" value="Envoyer"> - </div> -</form></pre> + pattern="[0-9]{2}:[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Envoyer"> + </div> +</form> +``` -<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p> +{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}} -<p>Si on essaie d'envoyer une valeur qui ne respecte pas le bon format, le navigateur affichera un message d'erreur et mettra en évidence le champ si celui-ci ne suit pas la forme <code>nn:nn</code> avec <code>n</code> un nombre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des heures invalides mais qui respectent ce format.</p> +Si on essaie d'envoyer une valeur qui ne respecte pas le bon format, le navigateur affichera un message d'erreur et mettra en évidence le champ si celui-ci ne suit pas la forme `nn:nn` avec `n` un nombre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des heures invalides mais qui respectent ce format. -<p>De plus, comment communiquer à l'utilisateur le format dans lequel saisir l'heure ?</p> +De plus, comment communiquer à l'utilisateur le format dans lequel saisir l'heure ? -<p>Il reste donc un problème.</p> +Il reste donc un problème. -<pre class="brush: css hidden">div { +```css hidden +div { margin-bottom: 10px; position: relative; } @@ -321,45 +315,49 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> - -<p>Actuellement, la meilleure façon de gérer ce type de saisie pour les différents navigateurs consiste à utiliser deux contrôles (le premier pour la saisie des heures et le second pour la saisie des minutes) avec deux éléments {{htmlelement("select")}} (cf. ci-après) ou d'utiliser certaines bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> ou encore <a href="http://timepicker.co/">jQuery timepicker plugin</a>.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Dans l'exemple qui suit, on crée deux ensembles d'éléments : un sélecteur natif avec <code><input type="time"></code> et un ensemble de deux éléments {{htmlelement("select")}} qui permettent de choisir des heures et des minutes dans les navigateurs qui ne prennent pas en charge le contrôle natif.</p> - -<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p> - -<p>Voici le fragment HTML utilisé :</p> - -<pre class="brush: html"><form> - <div class="nativeTimePicker"> - <label for="appt-time">Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : </label> - <input id="appt-time" type="time" name="appt-time" - min="12:00" max="18:00" required> - <span class="validity"></span> - </div> - <p class="fallbackLabel">Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : </p> - <div class="fallbackTimePicker"> - <div> - <span> - <label for="hour">Heures :</label> - <select id="hour" name="hour"> - </select> - </span> - <span> - <label for="minute">Minutes :</label> - <select id="minute" name="minute"> - </select> - </span> - </div> - </div> -</form></pre> - -<p>Les valeurs pour les heures et les minutes seront générées dynamiquement en JavaScript.</p> - -<pre class="brush: css hidden">div { +} +``` + +Actuellement, la meilleure façon de gérer ce type de saisie pour les différents navigateurs consiste à utiliser deux contrôles (le premier pour la saisie des heures et le second pour la saisie des minutes) avec deux éléments {{htmlelement("select")}} (cf. ci-après) ou d'utiliser certaines bibliothèques JavaScript telles que [jQuery date picker](https://jqueryui.com/datepicker/) ou encore [jQuery timepicker plugin](http://timepicker.co/). + +## Exemples + +Dans l'exemple qui suit, on crée deux ensembles d'éléments : un sélecteur natif avec `<input type="time">` et un ensemble de deux éléments {{htmlelement("select")}} qui permettent de choisir des heures et des minutes dans les navigateurs qui ne prennent pas en charge le contrôle natif. + +{{EmbedLiveSample('Exemples', 600, 140)}} + +Voici le fragment HTML utilisé : + +```html +<form> + <div class="nativeTimePicker"> + <label for="appt-time">Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : </label> + <input id="appt-time" type="time" name="appt-time" + min="12:00" max="18:00" required> + <span class="validity"></span> + </div> + <p class="fallbackLabel">Veuillez choisir une heure de rendez-vous (heures d'ouverture 12:00 à 18:00) : </p> + <div class="fallbackTimePicker"> + <div> + <span> + <label for="hour">Heures :</label> + <select id="hour" name="hour"> + </select> + </span> + <span> + <label for="minute">Minutes :</label> + <select id="minute" name="minute"> + </select> + </span> + </div> + </div> +</form> +``` + +Les valeurs pour les heures et les minutes seront générées dynamiquement en JavaScript. + +```css hidden +div { margin-bottom: 10px; position: relative; } @@ -382,11 +380,13 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> +} +``` -<p>La partie la plus intéressante du code est celle qui permet de détecter si le contrôle natif est pris en charge. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on modifie son attribut <code>type</code> afin qu'il vaille <code>time</code>, immédiatement après, on vérifie la valeur du type. Si le navigateur ne prend pas en charge l'élément, il renverra <code>text</code> car l'élément a été transformé en <code><input type="text"></code>, dans ce cas, on masque le sélecteur natif et on affiche l'interface alternative avec les deux éléments {{htmlelement("select")}}.</p> +La partie la plus intéressante du code est celle qui permet de détecter si le contrôle natif est pris en charge. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on modifie son attribut `type` afin qu'il vaille `time`, immédiatement après, on vérifie la valeur du type. Si le navigateur ne prend pas en charge l'élément, il renverra `text` car l'élément a été transformé en `<input type="text">`, dans ce cas, on masque le sélecteur natif et on affiche l'interface alternative avec les deux éléments {{htmlelement("select")}}. -<pre class="brush: js">// On définit quelques variables +```js +// On définit quelques variables var nativePicker = document.querySelector('.nativeTimePicker'); var fallbackPicker = document.querySelector('.fallbackTimePicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); @@ -418,9 +418,9 @@ if(test.type === 'text') { function populateHours() { // On ajoute les heures dans - // l'élément <select> avec les 6 + // l'élément <select> avec les 6 // heures ouvertes - for(var i = 12; i <= 18; i++) { + for(var i = 12; i <= 18; i++) { var option = document.createElement('option'); option.textContent = i; hourSelect.appendChild(option); @@ -429,9 +429,9 @@ function populateHours() { function populateMinutes() { // On génère 60 options pour 60 minutes - for(var i = 0; i <= 59; i++) { + for(var i = 0; i <= 59; i++) { var option = document.createElement('option'); - option.textContent = (i < 10) ? ("0" + i) : i; + option.textContent = (i < 10) ? ("0" + i) : i; minuteSelect.appendChild(option); } } @@ -446,63 +446,68 @@ function populateMinutes() { } hourSelect.onchange = setMinutesToZero; - minuteSelect.onchange = setMinutesToZero;</pre> + minuteSelect.onchange = setMinutesToZero; +``` -<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 heure (avec des minutes) ou bien une chaîne de caractères 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("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>list</code>.</td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères ({{domxref("DOMString")}}) qui + représente un heure (avec des minutes) ou bien une chaîne de caractères + 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("readonly", "input")}} et + {{htmlattrxref("step", "input")}}. + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td> + <code>value</code>, <code>valueAsDate</code>, + <code>valueAsNumber</code>, <code>list</code>. + </td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}}, + {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, + {{domxref("HTMLInputElement.stepUp", "stepUp()")}}. + </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#time-state-(type=time)', '<input type="time">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'forms.html#time-state-(type=time)', '<input type="time">')}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-time")}}</p> +{{Compat("html.elements.input.input-time")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM {{domxref("HTMLInputElement")}} qui peut être utilisée pour manipuler l'élément</li> - <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire">Un tutoriel pour les sélecteurs de date et d'heure</a></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/week"><input type="week"></a></code>, and <code><a href="/fr/docs/Web/HTML/Element/input/month"><input type="month"></a></code></li> -</ul> +- L'élément générique {{HTMLElement("input")}} ainsi que l'interface DOM {{domxref("HTMLInputElement")}} qui peut être utilisée pour manipuler l'élément +- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML) +- [Un tutoriel pour les sélecteurs de date et d'heure](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire) +- [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local), [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date), [`<input type="week">`](/fr/docs/Web/HTML/Element/input/week), and [`<input type="month">`](/fr/docs/Web/HTML/Element/input/month) diff --git a/files/fr/web/html/element/input/url/index.md b/files/fr/web/html/element/input/url/index.md index 56d928e2ab..e9f7950ab4 100644 --- a/files/fr/web/html/element/input/url/index.md +++ b/files/fr/web/html/element/input/url/index.md @@ -8,252 +8,213 @@ tags: - Reference translation_of: Web/HTML/Element/input/url --- -<div>{{HTMLRef}}</div> - -<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"url"</strong></code> sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</div> - -<p>La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées auomatiquement selon le cas de figure.</p> - -<div class="note"> -<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type<code>"url"</code> utiliseront à la place un élément {{HTMLElement("input/text", "text")}}.</p> -</div> - -<h2 id="Valeur">Valeur</h2> - -<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est automatiquement vérifiée afin de s'assurer que sa syntaxe est bien celle d'une URL. De façon plus précise, seuls deux formats sont autorisés :</p> - -<ol> - <li>Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a pas saisi de valeur ou que la valeur a été retirée.</li> - <li>Une seule URL bien formée. Cela ne signifie pas nécessairement que l'adresse existe mais qu'elle est formatée correctement. Autrement dit, la chaîne de caractères respecte la forme <code>"schema://restedelurl"</code>.</li> -</ol> - -<p>Voir {{anch("Validation")}} pour plus de détails sur le format des URL et leur validation.</p> - -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> - -<p>En complément des attributs qui fonctionnent pour tous les types d'éléments {{HTMLElement("input")}}, les champs de saisie d'URL prennent en charge les attributs suivants :</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>La longueur maximale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide.</td> - </tr> - <tr> - <td><code>{{anch("minlength")}}</code></td> - <td>La longueur minimale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide.</td> - </tr> - <tr> - <td><code>{{anch("pattern")}}</code></td> - <td>Une expression rationnelle que doit respecter la valeur afin d'être considérée comme valide.</td> - </tr> - <tr> - <td><code>{{anch("placeholder")}}</code></td> - <td>Une valeur d'exemple à afficher lorsqu'aucune valeur n'est saisie dans le champ.</td> - </tr> - <tr> - <td><code>{{anch("readonly")}}</code></td> - <td>Un attribut booléen qui indique si le champ est en lecture seule et ne peut être édité par l'utilisateur.</td> - </tr> - <tr> - <td><code>{{anch("size")}}</code></td> - <td>Le nombre de caractères qui doivent être visibles à l'écran.</td> - </tr> - <tr> - <td><code>{{anch("spellcheck")}}</code></td> - <td>Une chaîne de caractères qui contrôle si la vérification orthographique doit être activée.</td> - </tr> - </tbody> -</table> +{{HTMLRef}} -<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> +Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`"url"`** sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL. -<p>Le nombre maximal de caractères (en nombre de points de code UTF-16) qui peuvent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur maximale. La valeur de cet attribut doit être supérieure ou égale à celle de l'attribut <code>minlength</code>.</p> +{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}} -<p>La valeur <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne respectera pas la validation</a> si la longueur du texte saisi est supérieure à cet attribut.</p> +La valeur saisie est automatiquement validée par le navigateur qui vérifie qu'elle est vide ou formatée correctement avant que le formulaire puisse être envoyé. Les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées auomatiquement selon le cas de figure. -<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> +> **Note :** Les navigateurs qui ne prennent pas en charge le type`"url"` utiliseront à la place un élément {{HTMLElement("input/text", "text")}}. -<p>Le nombre minimal de caractères (en nombre de points de code UTF-16) qui doivent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur minimale. La valeur de cet attribut doit être inférieure ou égale à celle de l'attribut <code>maxlength</code>.</p> +## Valeur -<p>La valeur <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne respectera pas la validation</a> si la longueur du texte saisi est inférieure à cet attribut.</p> +La valeur de l'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères ({{domxref("DOMString")}}) dont la valeur est automatiquement vérifiée afin de s'assurer que sa syntaxe est bien celle d'une URL. De façon plus précise, seuls deux formats sont autorisés : -<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> +1. Une chaîne de caractères vide ("") qui indique que l'utilisateur n'a pas saisi de valeur ou que la valeur a été retirée. +2. Une seule URL bien formée. Cela ne signifie pas nécessairement que l'adresse existe mais qu'elle est formatée correctement. Autrement dit, la chaîne de caractères respecte la forme `"schema://restedelurl"`. -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> +Voir {{anch("Validation")}} pour plus de détails sur le format des URL et leur validation. -<p>Voir <a href="#format">la section ci-après sur le format</a> pour plus de détails et d'exemples.</p> +## Attributs supplémentaires -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> +En complément des attributs qui fonctionnent pour tous les types d'éléments {{HTMLElement("input")}}, les champs de saisie d'URL prennent en charge les attributs suivants : -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> +| Attribut | Description | +| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ | +| `{{anch("maxlength")}}` | La longueur maximale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide. | +| `{{anch("minlength")}}` | La longueur minimale de l'URL, exprimée en nombre de caractères UTF-16, afin qu'elle soit considérée comme valide. | +| `{{anch("pattern")}}` | Une expression rationnelle que doit respecter la valeur afin d'être considérée comme valide. | +| `{{anch("placeholder")}}` | Une valeur d'exemple à afficher lorsqu'aucune valeur n'est saisie dans le champ. | +| `{{anch("readonly")}}` | Un attribut booléen qui indique si le champ est en lecture seule et ne peut être édité par l'utilisateur. | +| `{{anch("size")}}` | Le nombre de caractères qui doivent être visibles à l'écran. | +| `{{anch("spellcheck")}}` | Une chaîne de caractères qui contrôle si la vérification orthographique doit être activée. | -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> +### {{htmlattrdef("maxlength")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p> +Le nombre maximal de caractères (en nombre de points de code UTF-16) qui peuvent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur maximale. La valeur de cet attribut doit être supérieure ou égale à celle de l'attribut `minlength`. -<h2 id="Attributs_non-standard">Attributs non-standard</h2> +La valeur [ne respectera pas la validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte saisi est supérieure à cet attribut. -<p>Il est possible (mais déconseillé) d'utiliser ces attributs non-standard sur les champs de saisie d'URL.</p> +### {{htmlattrdef("minlength")}} -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("autocorrect")}}</code></td> - <td>Autorise ou non la correction automatique lors de l'édition de ce champ. <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. Cet attribut est destiné à fournir un libellé équivoque pour la touche du clavier virtuel présenté à l'utilisateur.<strong> Uniquement pris en charge par Firefox pour Android.</strong></td> - </tr> - </tbody> -</table> +Le nombre minimal de caractères (en nombre de points de code UTF-16) qui doivent être saisis dans le champ de l'URL. Cette valeur doit être un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, le champ n'aura pas de longueur minimale. La valeur de cet attribut doit être inférieure ou égale à celle de l'attribut `maxlength`. + +La valeur [ne respectera pas la validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte saisi est inférieure à cet attribut. + +### {{htmlattrdef("pattern")}} + +{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}} + +Voir [la section ci-après sur le format](#format) pour plus de détails et d'exemples. + +{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} + +{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} -<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> +{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}} -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}} -<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> +## Attributs non-standard -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> +Il est possible (mais déconseillé) d'utiliser ces attributs non-standard sur les champs de saisie d'URL. -<h2 id="Utiliser_des_champs_de_saisie_d'URL">Utiliser des champs de saisie d'URL</h2> +| Attribut | Description | +| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("autocorrect")}}` | Autorise ou non la correction automatique lors de l'édition de ce champ. **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. Cet attribut est destiné à fournir un libellé équivoque pour la touche du clavier virtuel présenté à l'utilisateur. **Uniquement pris en charge par Firefox pour Android.** | -<p>Lorsqu'on crée un champ avec un attribut <code>type</code> qui vaut <code>"url"</code>, on obtient une validation automatique qui vérifie que le format de la valeur respecte bien celui d'une URL. Cela permet par exemple d'éviter des cas où des utilisateurs laissent une coquille dans la saisie d'une adresse d'un site web.</p> +### {{htmlattrdef("autocorrect")}} {{non-standard_inline}} -<p>Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien ou correspond à l'utilisateur. Seule une vérification de format est effectuée.</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}} -<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> +### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} -<h3 id="Un_simple_champ">Un simple champ</h3> +{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}} -<p>Actuellement, l'ensemble des navigateurs implémentent ce type de champ comme un champ texte qui dispose de fonctionnalités de validation basiques. Dans sa forme la plus simple, un champ de saisie d'URL ressemblera à :</p> +## Utiliser des champs de saisie d'URL -<pre class="brush: html"><input id="monURL" name="monURL" type="url"></pre> +Lorsqu'on crée un champ avec un attribut `type` qui vaut `"url"`, on obtient une validation automatique qui vérifie que le format de la valeur respecte bien celui d'une URL. Cela permet par exemple d'éviter des cas où des utilisateurs laissent une coquille dans la saisie d'une adresse d'un site web. -<p>{{EmbedLiveSample('Un_simple_champ', 600, 40)}}</p> +Toutefois, ce mécanisme ne vérifie pas que l'URL saisie existe bien ou correspond à l'utilisateur. Seule une vérification de format est effectuée. -<p>La valeur du champ est considérée valide lorsqu'elle est vide ou qu'il s'agit d'une URL correctement formatée, autrement elle est invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, la valeur vide n'est plus valide, il est nécessaire de saisir une valeur.</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. -<p>Ainsi, si l'utilisateur saisit l'URL <code>http://www.example.com</code>, voici ce qui sera envoyé vers le serveur : <code>monURL=http%3A%2F%2Fwww.example.com</code> (on notera la façon dont certains caractères sont échappés).</p> +### Un simple champ -<h3 id="Textes_indicatifs_-_placeholders">Textes indicatifs <em>- placeholders</em></h3> +Actuellement, l'ensemble des navigateurs implémentent ce type de champ comme un champ texte qui dispose de fonctionnalités de validation basiques. Dans sa forme la plus simple, un champ de saisie d'URL ressemblera à : -<p>Il est parfois utile de fournir une indication sur le type de donnée attendu. Sur les pages pour lesquelles la place est restreinte, on ne peut pas se servir de l'étiqutte du champ. On peut alors utiliser un texte indicatif qui apparaît lorsque la valeur du champ est vide et qui est retiré dès que l'utilisateur saisit quelqu chose. Pour cela, on utilise l'attribut <code>placeholder</code>.</p> +```html +<input id="monURL" name="monURL" type="url"> +``` -<p>Dans l'exemple qui suit, le contrôle contient le texte indicatif <code>"http://www.example.com"</code>. Dans le résultat, vous pouvez voir comment ce texte disparaît/réapparaît lorsqu'on saisit une valeur dans le contrôle.</p> +{{EmbedLiveSample('Un_simple_champ', 600, 40)}} -<pre class="brush: html"><input id="monURL" name="monURL" type="url" - placeholder="http://www.example.com"></pre> +La valeur du champ est considérée valide lorsqu'elle est vide ou qu'il s'agit d'une URL correctement formatée, autrement elle est invalide. Si on ajoute l'attribut {{htmlattrxref("required", "input")}}, la valeur vide n'est plus valide, il est nécessaire de saisir une valeur. -<p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p> +Ainsi, si l'utilisateur saisit l'URL `http://www.example.com`, voici ce qui sera envoyé vers le serveur : `monURL=http%3A%2F%2Fwww.example.com` (on notera la façon dont certains caractères sont échappés). -<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> +### Textes indicatifs _- placeholders_ -<p>Il est possible de contrôler la taille physique de la boîte utilisée pour le contrôle. On peut également contraindre la taille de la valeur saisie dans le champ (entre X et Y caractères par exemple).</p> +Il est parfois utile de fournir une indication sur le type de donnée attendu. Sur les pages pour lesquelles la place est restreinte, on ne peut pas se servir de l'étiqutte du champ. On peut alors utiliser un texte indicatif qui apparaît lorsque la valeur du champ est vide et qui est retiré dès que l'utilisateur saisit quelqu chose. Pour cela, on utilise l'attribut `placeholder`. -<h4 id="La_taille_physique">La taille physique</h4> +Dans l'exemple qui suit, le contrôle contient le texte indicatif `"http://www.example.com"`. Dans le résultat, vous pouvez voir comment ce texte disparaît/réapparaît lorsqu'on saisit une valeur dans le contrôle. -<p>C'est l'attribut {{htmlattrxref("size", "input")}} qui permet de contrôler la taille de la boîte utilisée. La valeur de cet attribut correspond au nombre de caractères qui seront affichés en même temps dans la boîte. Dans l'exemple suivant, on souhaite que la boîte de saisie mesure 30 caractères de large :</p> +```html +<input id="monURL" name="monURL" type="url" + placeholder="http://www.example.com"> +``` -<pre class="brush: html"><input id="monURL" name="monURL" type="url" - size="30"></pre> +{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}} -<p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</p> +### Contrôler la taille du champ -<h4 id="La_longueur_de_la_valeur">La longueur de la valeur</h4> +Il est possible de contrôler la taille physique de la boîte utilisée pour le contrôle. On peut également contraindre la taille de la valeur saisie dans le champ (entre X et Y caractères par exemple). -<p>L'attribut <code>size</code> ne limite pas la valeur qui peut être saisie mais uniquement l'affichage de celle-ci. Pour indiquer une longueur (exprimée en nombre de caractères) minimale d'URL à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, l'attribut {{htmlattrxref("maxlength", "input")}} indique la longueur maximale d'une URL qui peut être saisie dans le contrôle.</p> +#### La taille physique -<p>Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 30 caractères de large et on souhaite que l'URL soit plus longue que 10 caractères et moins longue que 80.</p> +C'est l'attribut {{htmlattrxref("size", "input")}} qui permet de contrôler la taille de la boîte utilisée. La valeur de cet attribut correspond au nombre de caractères qui seront affichés en même temps dans la boîte. Dans l'exemple suivant, on souhaite que la boîte de saisie mesure 30 caractères de large : -<pre class="brush: html"><input id="monURL" name="monURL" type="url" - size="30" minlength="10" maxlength="80"> -</pre> +```html +<input id="monURL" name="monURL" type="url" + size="30"> +``` -<p>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</p> +{{EmbedLiveSample('La_taille_physique', 600, 40)}} -<div class="note"> -<p><strong>Note :</strong> Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec <code>maxlength</code>.</p> -</div> +#### La longueur de la valeur -<h3 id="Fournir_des_valeurs_par_défaut">Fournir des valeurs par défaut</h3> +L'attribut `size` ne limite pas la valeur qui peut être saisie mais uniquement l'affichage de celle-ci. Pour indiquer une longueur (exprimée en nombre de caractères) minimale d'URL à saisir, on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, l'attribut {{htmlattrxref("maxlength", "input")}} indique la longueur maximale d'une URL qui peut être saisie dans le contrôle. -<p>On peut fournir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :</p> +Dans l'exemple qui suit, on affiche une boîte de saisie qui mesure 30 caractères de large et on souhaite que l'URL soit plus longue que 10 caractères et moins longue que 80. -<pre class="brush: html"><input id="monURL" name="monURL" type="url" - value="http://www.example.com"></pre> +```html +<input id="monURL" name="monURL" type="url" + size="30" minlength="10" maxlength="80"> +``` -<p>{{EmbedLiveSample("Fournir_des_valeurs_par_défaut", 600, 40)}}</p> +{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}} -<h4 id="Fournir_des_suggestions">Fournir des suggestions</h4> +> **Note :** Ces attributs jouent un rôle lors de la validation. Si la valeur saisie est plus courte que la longueur minimale indiquée ou plus grande que la longueur maximale indiquée, alors elle seera considérée comme invalide. De plus, la plupart des navigateurs ne permettent pas de saisir une valeur plus grande que la longueur maximale indiquée avec `maxlength`. -<p>On peut également fournir une liste d'options parmi lesquelles l'utilisateur peut choisir via l'attribut {{htmlattrxref("list", "input")}}. Cette liste ne limite pas l'utilisateur à ces choix mais permet de choisir certaines URL fréquemment utilisées plus facilement. Cette liste peut également être utilisée par l'attribut {{htmlattrxref("autocomplete", "input")}}. La valeur de l'attribut <code>list</code> est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. La valeur de l'attribut <code>value</code> de chacun de ces éléments <code><option></code> correspondra à la valeur qui sera suggérée dans le champ de saisie.</p> +### Fournir des valeurs par défaut -<pre class="brush: html"><input id="monURL" name="monURL" type="url" - list="defaultURLs"> +On peut fournir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} : -<datalist id="defaultURLs"> - <option value="http://www.example.com"> - <option value="https://www.example.com"> - <option value="http://www.example.org"> - <option value="https://www.example.org"> -</datalist></pre> +```html +<input id="monURL" name="monURL" type="url" + value="http://www.example.com"> +``` -<p>{{EmbedLiveSample("Fournir_des_suggestions", 600, 40)}}</p> +{{EmbedLiveSample("Fournir_des_valeurs_par_défaut", 600, 40)}} -<p>Avec cet élément {{HTMLElement("datalist")}} et les éléments {{HTMLElement("option")}} associés, le navigateur affichera les valeurs proposées sous la forme d'une liste déroulante (voire sous un autre format). Au fur et à mesure que l'utilisateur saisit dans le champ, la liste se réduit pour ne contenir que les valeurs correspondantes (et ce jusqu'à ce que l'utilisateur saisisse une autre valeur ou sélectionne une valeur parmi la liste).</p> +#### Fournir des suggestions -<h2 id="Validation">Validation</h2> +On peut également fournir une liste d'options parmi lesquelles l'utilisateur peut choisir via l'attribut {{htmlattrxref("list", "input")}}. Cette liste ne limite pas l'utilisateur à ces choix mais permet de choisir certaines URL fréquemment utilisées plus facilement. Cette liste peut également être utilisée par l'attribut {{htmlattrxref("autocomplete", "input")}}. La valeur de l'attribut `list` est un identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. La valeur de l'attribut `value` de chacun de ces éléments `<option>` correspondra à la valeur qui sera suggérée dans le champ de saisie. -<p>Il existe deux niveaux de validation pour les contrôles de type <code>"url"</code>. Tout d'abord, le contrôle natif, toujours présent qui s'asssure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue.</p> +```html +<input id="monURL" name="monURL" type="url" + list="defaultURLs"> -<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> +<datalist id="defaultURLs"> + <option value="http://www.example.com"> + <option value="https://www.example.com"> + <option value="http://www.example.org"> + <option value="https://www.example.org"> +</datalist> +``` -<h3 id="Validation_simple">Validation simple</h3> +{{EmbedLiveSample("Fournir_des_suggestions", 600, 40)}} -<p>Les navigateurs qui prennent en charge le type <code>"url"</code> fournissent automatiquement un mécanisme de validation pour s'assurer que la valeur saisie correspond à une URL bien formée.</p> +Avec cet élément {{HTMLElement("datalist")}} et les éléments {{HTMLElement("option")}} associés, le navigateur affichera les valeurs proposées sous la forme d'une liste déroulante (voire sous un autre format). Au fur et à mesure que l'utilisateur saisit dans le champ, la liste se réduit pour ne contenir que les valeurs correspondantes (et ce jusqu'à ce que l'utilisateur saisisse une autre valeur ou sélectionne une valeur parmi la liste). -<h3 id="Rendre_le_champ_URL_obligatoire">Rendre le champ URL obligatoire</h3> +## Validation -<p>Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut {{htmlattrxref("required", "input")}} :</p> +Il existe deux niveaux de validation pour les contrôles de type `"url"`. Tout d'abord, le contrôle natif, toujours présent qui s'asssure que la valeur correspond à une URL bien formée. Ensuite, on peut ajouter des options supplémentaires pour personnaliser le format de l'URL attendue. -<pre class="brush: html"><form> - <input id="monURL" name="monURL" type="url" required> - <button>Envoyer</button> -</form></pre> +> **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. -<p>{{EmbedLiveSample("Rendre_le_champ_URL_obligatoire", 600, 40)}}</p> +### Validation simple -<p>Vous pouvez essayer d'envoyer le formulaire précédent sans valeur saisie et voir le résultat obtenu.</p> +Les navigateurs qui prennent en charge le type `"url"` fournissent automatiquement un mécanisme de validation pour s'assurer que la valeur saisie correspond à une URL bien formée. -<h3 id="Utiliser_un_format_particulier">Utiliser un format particulier</h3> +### Rendre le champ URL obligatoire -<p>S'il faut restreindre l'URL plus fortement, on peut utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer une <a href="/fr/docs/Web/JavaScript/Guide/Expressions_régulières">expression rationnelle</a> que la valeur saisie doit respecter afin d'être valide.</p> +Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut {{htmlattrxref("required", "input")}} : -<p>Prenons comme exemple la construction d'un formulaire de support pour les employés de MaBoîte Inc. Ce formulaire permet d'indiquer à un service une des pages du site interne qui pose problème. Dans l'exemple simplifié, l'utilisateur indique l'URL de la page problématique ainsi qu'un message descriptif. Ici, on souhaite que l'URL saisit ne soit valide que si elle correspond au domaine <code>maboite</code>.</p> +```html +<form> + <input id="monURL" name="monURL" type="url" required> + <button>Envoyer</button> +</form> +``` -<p>Les contrôles de type <code>"url"</code> utilisant la validation native pour vérifier que c'est une URL bien formée et une validation spécifique via l'attribut {{htmlattrxref("pattern", "input")}}, on peut implémenter cette contrainte facilement :</p> +{{EmbedLiveSample("Rendre_le_champ_URL_obligatoire", 600, 40)}} -<pre class="brush: css hidden">div { +Vous pouvez essayer d'envoyer le formulaire précédent sans valeur saisie et voir le résultat obtenu. + +### Utiliser un format particulier + +S'il faut restreindre l'URL plus fortement, on peut utiliser l'attribut {{htmlattrxref("pattern", "input")}} afin d'indiquer une [expression rationnelle](/fr/docs/Web/JavaScript/Guide/Expressions_régulières) que la valeur saisie doit respecter afin d'être valide. + +Prenons comme exemple la construction d'un formulaire de support pour les employés de MaBoîte Inc. Ce formulaire permet d'indiquer à un service une des pages du site interne qui pose problème. Dans l'exemple simplifié, l'utilisateur indique l'URL de la page problématique ainsi qu'un message descriptif. Ici, on souhaite que l'URL saisit ne soit valide que si elle correspond au domaine `maboite`. + +Les contrôles de type `"url"` utilisant la validation native pour vérifier que c'est une URL bien formée et une validation spécifique via l'attribut {{htmlattrxref("pattern", "input")}}, on peut implémenter cette contrainte facilement : + +```css hidden +div { margin-bottom: 10px; position: relative; } @@ -276,113 +237,108 @@ translation_of: Web/HTML/Element/input/url content: '✓'; padding-left: 5px; } -</pre> +``` -<pre class="brush: html"><form> - <div> - <label for="myURL">Veuillez saisir l'adresse de la page problématique:</label> - <input id="myURL" name="myURL" type="url" +```html +<form> + <div> + <label for="myURL">Veuillez saisir l'adresse de la page problématique:</label> + <input id="myURL" name="myURL" type="url" required pattern=".*\.maboite\..*" - title="L'URL doit être sur le domaine maboite."> - <span class="validity"></span> - </div> - <div> - <label for="myComment">Quel est le problème ?</label> - <input id="myComment" name="myComment" type="text" - required> - <span class="validity"></span> - </div> - <div> - <button>Envoyer</button> - </div> -</form> -</pre> + title="L'URL doit être sur le domaine maboite."> + <span class="validity"></span> + </div> + <div> + <label for="myComment">Quel est le problème ?</label> + <input id="myComment" name="myComment" type="text" + required> + <span class="validity"></span> + </div> + <div> + <button>Envoyer</button> + </div> +</form> +``` -<p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 150)}}</p> +{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 150)}} -<p>Si on étudie le contrôle, on peut voir qu'on commence par utiliser l'attribut {{htmlattrxref("required", "input")}} afin de rendre le champ obligatoire.</p> +Si on étudie le contrôle, on peut voir qu'on commence par utiliser l'attribut {{htmlattrxref("required", "input")}} afin de rendre le champ obligatoire. -<p>Ensuite, on utilise l'attribut <code>pattern</code> avec l'expression rationnelle <code>".*\.maboite\..*"</code>. Cet expression rationnelle indique que la chaîne de caractères saisie doit contenir des caractères quelconques suivis d'un point, suivi de "maboite", suivi d'un point, suivi de n'importe quels caractères.</p> +Ensuite, on utilise l'attribut `pattern` avec l'expression rationnelle `".*\.maboite\..*"`. Cet expression rationnelle indique que la chaîne de caractères saisie doit contenir des caractères quelconques suivis d'un point, suivi de "maboite", suivi d'un point, suivi de n'importe quels caractères. -<p>Cette expression rationnelle est loin d'être parfaite mais suffit pour les besoins de cet exemple.</p> +Cette expression rationnelle est loin d'être parfaite mais suffit pour les besoins de cet exemple. -<p>Il est conseillé d'utiliser l'attribut {{htmlattrxref("title")}} quand on utilise l'attribut <code>pattern</code>. Dans ce cas, l'attribut <code>title</code> doit alors décrire l'expression rationnelle (et l'explication de la contrainte) plutôt que le rôle du champ. En effet, la valeur contenue dans <code>title</code> pourrait alors être affichée ou vocalisée comme message d'erreur. Un navigateur pourra ainsi affiche un message : "Le texte saisi ne respecte pas la format souhaité." suivi du texte contenu dans <code>title</code>. Si la valeur de <code>title</code> est simplement "URL", le message complet obtenu serait "Le texte saisi ne respecte pas la format souhaité. URL" (ce qui n'est pas très parlant).</p> +Il est conseillé d'utiliser l'attribut {{htmlattrxref("title")}} quand on utilise l'attribut `pattern`. Dans ce cas, l'attribut `title` doit alors décrire l'expression rationnelle (et l'explication de la contrainte) plutôt que le rôle du champ. En effet, la valeur contenue dans `title` pourrait alors être affichée ou vocalisée comme message d'erreur. Un navigateur pourra ainsi affiche un message : "Le texte saisi ne respecte pas la format souhaité." suivi du texte contenu dans `title`. Si la valeur de `title` est simplement "URL", le message complet obtenu serait "Le texte saisi ne respecte pas la format souhaité. URL" (ce qui n'est pas très parlant). -<p>C'est pourquoi nous avons écrit "L'URL doit être sur le domaine maboite" qui est plus détaillé.</p> +C'est pourquoi nous avons écrit "L'URL doit être sur le domaine maboite" qui est plus détaillé. -<div class="note"> -<p><strong>Note :</strong> Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème.</p> -</div> +> **Note :** Si vous rencontrez des problèmes avec ces expressions rationnelles et qu'elles ne semblent pas fonctionner correctement, vérifiez la console de votre navigateur. Il est possible que des messages d'erreur y soient affichés et puissent vous aider à diagnostiquer le problème. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>En plus des exemples précédents, vous pouvez consulter <a href="https://github.com/mdn/learning-area/blob/master/html/forms/url-example/index.html">l'exemple de validation de format sur GitHub</a> (et voir <a href="https://mdn.github.io/learning-area/html/forms/url-example/">le résultat <em>live</em></a>).</p> +En plus des exemples précédents, vous pouvez consulter [l'exemple de validation de format sur GitHub](https://github.com/mdn/learning-area/blob/master/html/forms/url-example/index.html) (et voir [le résultat _live_](https://mdn.github.io/learning-area/html/forms/url-example/)). -<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 une URL ou une chaîne de caractères vide.</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{event("change")}} et {{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")}}, {{htmlattrxref("required", "input")}} et {{htmlattrxref("size", "input")}}</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>list</code>, <code>value</code>, <code>selectionEnd</code>, <code>selectionDirection</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 une URL ou une chaîne de caractères vide. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{event("change")}} et {{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")}}, {{htmlattrxref("required", "input")}} + et {{htmlattrxref("size", "input")}} + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td> + <code>list</code>, <code>value</code>, <code>selectionEnd</code>, + <code>selectionDirection</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#url-state-(type=url)', '<input type="url">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName('HTML5.1', 'sec-forms.html#url-state-typeurl', '<input type="url">')}}</td> - <td>{{Spec2('HTML5.1')}}</td> - <td>Définition initiale.</td> - </tr> - <tr> - <td>{{SpecName("URL", "#urls", "URL syntax")}}</td> - <td>{{Spec2("URL")}}</td> - <td></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', 'forms.html#url-state-(type=url)', '<input type="url">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | +| {{SpecName('HTML5.1', 'sec-forms.html#url-state-typeurl', '<input type="url">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | +| {{SpecName("URL", "#urls", "URL syntax")}} | {{Spec2("URL")}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-url")}}</p> +{{Compat("html.elements.input.input-url")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Guide sur les formulaires HTML</a></li> - <li>{{HTMLElement("input")}}</li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/tel"><input type="tel"></a></code></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/email"><input type="email"></a></code></li> -</ul> +- [Guide sur les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) +- {{HTMLElement("input")}} +- [`<input type="tel">`](/fr/docs/Web/HTML/Element/input/tel) +- [`<input type="email">`](/fr/docs/Web/HTML/Element/input/email) diff --git a/files/fr/web/html/element/input/week/index.md b/files/fr/web/html/element/input/week/index.md index b010c0cf18..d5c2616a00 100644 --- a/files/fr/web/html/element/input/week/index.md +++ b/files/fr/web/html/element/input/week/index.md @@ -9,138 +9,127 @@ tags: - Reference translation_of: Web/HTML/Element/input/week --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <code><strong>week</strong></code> permettent de créer des champs de saisie où l'on peut saisir une année et le numéro de la semaine pendant cette année (allant de 1 à 52 ou 53, suivant la norme <a href="https://fr.wikipedia.org/wiki/ISO_8601#Num%C3%A9ro_de_semaine">ISO 8601</a>).</p> +Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`week`** permettent de créer des champs de saisie où l'on peut saisir une année et le numéro de la semaine pendant cette année (allant de 1 à 52 ou 53, suivant la norme [ISO 8601](https://fr.wikipedia.org/wiki/ISO_8601#Num%C3%A9ro_de_semaine)). -<div>{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}</div> +{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}} -<p>L'interface utilisateur offerte par un tel contrôle varie en fonction des navigateurs. Au moment où nous écrivons ces lignes, seuls Chrome/Opera et Edge prennent en charge cette fonctionnalité. Pour les navigateurs qui ne l'implémentent pas, l'élément est interprété comme un élément <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> +L'interface utilisateur offerte par un tel contrôle varie en fonction des navigateurs. Au moment où nous écrivons ces lignes, seuls Chrome/Opera et Edge prennent en charge cette fonctionnalité. Pour les navigateurs qui ne l'implémentent pas, l'élément est interprété comme un élément [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text). -<p>Sous Chrome/Opera, le contrôle <code>week</code> fournit des emplacements pour les deux valeurs. Un calendrier est affiché afin de sélectionner plus faiclement la semaine et l'année. Un bouton avec une croix permet de supprimer la valeur saisie dans le contrôle.</p> +Sous Chrome/Opera, le contrôle `week` fournit des emplacements pour les deux valeurs. Un calendrier est affiché afin de sélectionner plus faiclement la semaine et l'année. Un bouton avec une croix permet de supprimer la valeur saisie dans le contrôle. -<p><img alt="" src="week-control-chrome.png"></p> + -<p>Pour Edge, le contrôle associé à <code>month</code> est plus élaboré et se compose de deux listes qu'on peut faire défiler séparement pour la semaine d'une part et l'année d'autre part.</p> +Pour Edge, le contrôle associé à `month` est plus élaboré et se compose de deux listes qu'on peut faire défiler séparement pour la semaine d'une part et l'année d'autre part. -<p><img alt="" src="week-control-edge.png"></p> + -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la semaine et de l'année saisies dans le champ. Le format précis de représentation d'une semaine donnée est décrit dans <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_semaines">l'article sur les formats des dates et heures en HTML</a>.</p> +Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur de la semaine et de l'année saisies dans le champ. Le format précis de représentation d'une semaine donnée est décrit dans [l'article sur les formats des dates et heures en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_semaines). -<p>Il est possible de définir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :</p> +Il est possible de définir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} de la façon suivante : -<pre class="brush: html"><label for="week">À quelle semaine souhaiteriez-vous démarrer ?</label> -<input id="week" type="week" name="week" value="2017-W01"></pre> +```html +<label for="week">À quelle semaine souhaiteriez-vous démarrer ?</label> +<input id="week" type="week" name="week" value="2017-W01"> +``` -<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> +{{EmbedLiveSample('Valeur', 600, 60)}} -<p>On notera que le format affiché peut être différent de la valeur réellement utilisée pour l'attribut <code>value</code>. Cette dernière respecte toujours le format <code>yyyy-Www</code> (soit les quatre chiffres de l'année, suivi d'un tiret, suivi d'un W majuscule suivi des deux chiffres pour la semaine). Dans l'exemple précédent par exemple, l'interface utilisateur pourra afficher <code>Semaine 01 de l'année 2017</code> mais la valeur envoyée via le formulaire aura toujours la structure <code>week=2017-W01</code>.</p> +On notera que le format affiché peut être différent de la valeur réellement utilisée pour l'attribut `value`. Cette dernière respecte toujours le format `yyyy-Www` (soit les quatre chiffres de l'année, suivi d'un tiret, suivi d'un W majuscule suivi des deux chiffres pour la semaine). Dans l'exemple précédent par exemple, l'interface utilisateur pourra afficher `Semaine 01 de l'année 2017` mais la valeur envoyée via le formulaire aura toujours la structure `week=2017-W01`. -<p>Il est également possible d'accéder à la valeur ou de la définir en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p> +Il est également possible d'accéder à la valeur ou de la définir en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple : -<pre class="brush: js">var weekControl = document.querySelector('input[type="week"]'); -weekControl.value = '2017-W45';</pre> +```js +var weekControl = document.querySelector('input[type="week"]'); +weekControl.value = '2017-W45'; +``` -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> +## Attributs supplémentaires -<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de semaine gèrent les attributs suivants :</p> +En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs de semaine gèrent les attributs suivants : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("max")}}</code></td> - <td>La semaine (avec l'année) la plus tardive qui est considérée comme valide.</td> - </tr> - <tr> - <td><code>{{anch("min")}}</code></td> - <td>La semaine (avec l'année) la plus tôt qui est considérée comme valide.</td> - </tr> - <tr> - <td><code>{{anch("readonly")}}</code></td> - <td>Un booléen qui indique si l'utilisateur peut modifier la valeur du champ.</td> - </tr> - <tr> - <td><code>{{anch("step")}}</code></td> - <td>Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur.</td> - </tr> - </tbody> -</table> +| Attribut | Description | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("max")}}` | La semaine (avec l'année) la plus tardive qui est considérée comme valide. | +| `{{anch("min")}}` | La semaine (avec l'année) la plus tôt qui est considérée comme valide. | +| `{{anch("readonly")}}` | Un booléen qui indique si l'utilisateur peut modifier la valeur du champ. | +| `{{anch("step")}}` | Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur. | -<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> +### {{htmlattrdef("max")}} -<p>La semaine la plus tardive, indiquée avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-Www"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle.</p> +La semaine la plus tardive, indiquée avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-Www"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle. -<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> +Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut `min`. -<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> +### {{htmlattrdef("min")}} -<p>La semaine la plus tôt, indiquée avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-Www"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle.</p> +La semaine la plus tôt, indiquée avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-Www"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle. -<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> +Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut `max`. -<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> +{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} -<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> +### {{htmlattrdef("step")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> +{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} -<p>Pour les champs de type <code>week</code>, la valeur de l'attribut <code>step</code> est indiquée en nombre de semaine et le facteur de multiplication est 604 800 000 (qui correspond au nombre de millisecondes dans une semaine). Par défaut, la valeur de <code>step</code> est 1. La base à partir de laquelle incrémenter par défaut est -259 200 000 qui correspond à la première semaine de 1970 (<code>"1970-W01"</code>).</p> +Pour les champs de type `week`, la valeur de l'attribut `step` est indiquée en nombre de semaine et le facteur de multiplication est 604 800 000 (qui correspond au nombre de millisecondes dans une semaine). Par défaut, la valeur de `step` est 1. La base à partir de laquelle incrémenter par défaut est -259 200 000 qui correspond à la première semaine de 1970 (`"1970-W01"`). -<p><em>À l'heure où ces lignes sont écrites, la signification de la valeur <code>"any"</code> pour l'attribut <code>step</code> pour les champs <code>week</code> n'est pas certaine. Cette information sera mise à jour dès que possible.</em></p> +_À l'heure où ces lignes sont écrites, la signification de la valeur `"any"` pour l'attribut `step` pour les champs `week` n'est pas certaine. Cette information sera mise à jour dès que possible._ -<h2 id="Utiliser_les_contrôles_de_type_week">Utiliser les contrôles de type <code>week</code></h2> +## Utiliser les contrôles de type `week` -<p>Ces contrôles peuvent être pratiques selon certains aspects : ils permettent de sélectionner une semaine de façon simple, les données envoyées au serveur sont normalisées quelle que soit la langue ou le navigateur de l'utilisateur. Toutefois, en raison de la prise en charge des navigateurs actuellement limitée, <code><input type="week"></code> pose quelques défis.</p> +Ces contrôles peuvent être pratiques selon certains aspects : ils permettent de sélectionner une semaine de façon simple, les données envoyées au serveur sont normalisées quelle que soit la langue ou le navigateur de l'utilisateur. Toutefois, en raison de la prise en charge des navigateurs actuellement limitée, `<input type="week">` pose quelques défis. -<p>Nous verrons par la suite quelques cas d'utilisation simples puis complexes avant de voir comment gérer l'hétérogénéité des différents navigateurs (cf. {{anch("Gérer la prise en charge des navigateurs")}}).</p> +Nous verrons par la suite quelques cas d'utilisation simples puis complexes avant de voir comment gérer l'hétérogénéité des différents navigateurs (cf. {{anch("Gérer la prise en charge des navigateurs")}}). -<h3 id="Utilisation_simple">Utilisation simple</h3> +### Utilisation simple -<p>La forme la plus simple de <code><input type="week"></code> se compose d'un élément <code><input></code> et d'un élément {{htmlelement("label")}} :</p> +La forme la plus simple de `<input type="week">` se compose d'un élément `<input>` et d'un élément {{htmlelement("label")}} : -<pre class="brush: html"><form> - <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label> - <input id="week" type="week" name="week"> -</form></pre> +```html +<form> + <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label> + <input id="week" type="week" name="week"> +</form> +``` -<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p> +{{EmbedLiveSample('Utilisation_simple', 600, 40)}} -<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> +### Contrôler la taille du champ -<p><code><input type="week"></code> ne prend pas en charge des attributs de dimensionnement (tel que {{htmlattrxref("size", "input")}}). Il sera nécessaire d'utiliser <a href="/fr/docs/Web/CSS">CSS</a> si on a besoin de modifier la taille du contrôle.</p> +`<input type="week">` ne prend pas en charge des attributs de dimensionnement (tel que {{htmlattrxref("size", "input")}}). Il sera nécessaire d'utiliser [CSS](/fr/docs/Web/CSS) si on a besoin de modifier la taille du contrôle. -<h3 id="Utiliser_l'attribut_step">Utiliser l'attribut <code>step</code></h3> +### Utiliser l'attribut `step` -<p>En théorie, l'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être employé pour définir l'incrément minimal entre chaque semaine sélectionnable. Toutefois, il ne semble avoir encore aucun effet pour les navigateurs qui prennent en charge ce contrôle.</p> +En théorie, l'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être employé pour définir l'incrément minimal entre chaque semaine sélectionnable. Toutefois, il ne semble avoir encore aucun effet pour les navigateurs qui prennent en charge ce contrôle. -<h2 id="Validation">Validation</h2> +## Validation -<p>Par défaut, <code><input type="week"></code> n'applique aucune validation aux valeurs saisies. Les interfaces utilisateurs affichées ne permettent pas de saisir autre chose qu'un couple semaine / année. Toutefois, il est toujours possible de ne sélectionner aucune valeur, on peut également vouloir restreindre la plage de semaines qui peuvent être sélectionnées.</p> +Par défaut, `<input type="week">` n'applique aucune validation aux valeurs saisies. Les interfaces utilisateurs affichées ne permettent pas de saisir autre chose qu'un couple semaine / année. Toutefois, il est toujours possible de ne sélectionner aucune valeur, on peut également vouloir restreindre la plage de semaines qui peuvent être sélectionnées. -<h3 id="Paramétrer_des_semaines_minimum_et_maximum">Paramétrer des semaines minimum et maximum</h3> +### Paramétrer des semaines minimum et maximum -<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être utilisés afin de restreindre les semaines qui peuvent être sélectionnées par l'utilisateur. Dans l'exemple qui suit, on indique une valeur minimale correspondant à la première semaine de 2017 et une valeur maximale correspondant à la dernière semaine de 2017 :</p> +Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} peuvent être utilisés afin de restreindre les semaines qui peuvent être sélectionnées par l'utilisateur. Dans l'exemple qui suit, on indique une valeur minimale correspondant à la première semaine de 2017 et une valeur maximale correspondant à la dernière semaine de 2017 : -<pre class="brush: html"><form> - <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label> - <input id="week" type="week" name="week" - min="2017-W01" max="2017-W52"> - <span class="validity"></span> -</form></pre> +```html +<form> + <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2017-W52"> + <span class="validity"></span> +</form> +``` -<p>{{EmbedLiveSample('Paramétrer_des_semaines_minimum_et_maximum', 600, 40)}}</p> +{{EmbedLiveSample('Paramétrer_des_semaines_minimum_et_maximum', 600, 40)}} -<p>Voici la feuille de style utilisée dans l'exemple précédent. Vous pourrez noter qu'on utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes associées sont placées dans un élément {{htmlelement("span")}} situé à côté du champ et non sur le champ même car, pour Chrome, le contenu généré dynamiquement avec les pseudo-éléments serait placé dans le contrôle du formulaire et ne pourrait être mis en forme efficacement.</p> +Voici la feuille de style utilisée dans l'exemple précédent. Vous pourrez noter qu'on utilise les pseudo-classes {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est valide ou non. Les icônes associées sont placées dans un élément {{htmlelement("span")}} situé à côté du champ et non sur le champ même car, pour Chrome, le contenu généré dynamiquement avec les pseudo-éléments serait placé dans le contrôle du formulaire et ne pourrait être mis en forme efficacement. -<pre class="brush: css">div { +```css +div { margin-bottom: 10px; position: relative; } @@ -163,98 +152,100 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> +} +``` -<p>Pour les navigateurs qui prennent en charge ce contrôle et ces fonctionnalités, on ne pourra sélectionner que les semaines de l'année 2017.</p> +Pour les navigateurs qui prennent en charge ce contrôle et ces fonctionnalités, on ne pourra sélectionner que les semaines de l'année 2017. -<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3> +### Rendre la valeur obligatoire -<p>On peut aussi utiliser l'attribut {{htmlattrxref("required", "input")}} afin que la saisie de la valeur soit obligatoire. Pour les navigateurs qui prennent en charge cette fonctionnalité, une erreur sera affichée lorsqu'on tentera d'envoyer un formulaire avec un champ vide pour une semaine.</p> +On peut aussi utiliser l'attribut {{htmlattrxref("required", "input")}} afin que la saisie de la valeur soit obligatoire. Pour les navigateurs qui prennent en charge cette fonctionnalité, une erreur sera affichée lorsqu'on tentera d'envoyer un formulaire avec un champ vide pour une semaine. -<p>Prenons un autre exemple (où la période a été restreinte comme précédemment) et où le champ est obligatoire :</p> +Prenons un autre exemple (où la période a été restreinte comme précédemment) et où le champ est obligatoire : -<pre class="brush: html"><form> - <div> - <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label> - <input id="week" type="week" name="week" - min="2017-W01" max="2017-W52" required> - <span class="validity"></span> - </div> - <div> - <input type="submit" value="Envoyer le formulaire"> - </div> -</form></pre> +```html +<form> + <div> + <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2017-W52" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Envoyer le formulaire"> + </div> +</form> +``` -<p>Si vous essayez de soumettre le formulaire sans aucune valeur, le navigateur affichera une erreur. Vous pouvez tester avec l'exemple qui suit :</p> +Si vous essayez de soumettre le formulaire sans aucune valeur, le navigateur affichera une erreur. Vous pouvez tester avec l'exemple qui suit : -<p>{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 120)}}</p> +{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 120)}} -<p>Voici une capture d'écran du résultat obtenu si votre navigateur ne prend pas en charge cette fonctionnalité :</p> +Voici une capture d'écran du résultat obtenu si votre navigateur ne prend pas en charge cette fonctionnalité : -<p><img alt="" src="week-validation-chrome.png"></p> + -<div class="warning"> -<p><strong>Attention :</strong> la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques.</p> -</div> +> **Attention :** la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques. -<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> +## Gérer la prise en charge des navigateurs -<p>Comme évoqué plus haut, le principal problème associé à ce type de contrôle est l'absence de prise en charge par Safari, Firefox (hors mobile) et les anciennes versions d'Internet Explorer (pré-Edge).</p> +Comme évoqué plus haut, le principal problème associé à ce type de contrôle est l'absence de prise en charge par Safari, Firefox (hors mobile) et les anciennes versions d'Internet Explorer (pré-Edge). -<p>Les plateformes mobiles comme Android et iOS fournissent un contrôle natif à l'ergonomie tactile adaptée. Voici par exemple le sélecteur <code>week</code> sur Chrome pour Android :</p> +Les plateformes mobiles comme Android et iOS fournissent un contrôle natif à l'ergonomie tactile adaptée. Voici par exemple le sélecteur `week` sur Chrome pour Android : -<p><img alt="" src="week-chrome-android.png"></p> + -<p>Les navigateurs qui ne prennent pas en charge ce type de contrôle l'interprètent comme un champ texte mais cela crée des problèmes de cohérence tant au niveau de l'ergonomie qu'au niveau de la représentation des données.</p> +Les navigateurs qui ne prennent pas en charge ce type de contrôle l'interprètent comme un champ texte mais cela crée des problèmes de cohérence tant au niveau de l'ergonomie qu'au niveau de la représentation des données. -<p>C'est ce deuxième aspect qui peut poser le plus de problème. Comme nous l'avons mentionné avant, un contrôle <code>week</code> verra sa valeur normalisée pour respecter le format <code>yyyy-Www</code>. En revanche, pour un champ texte non reconnu par le navigateur, les utilisateurs pourraient saisir des semaines selon une variété de formats :</p> +C'est ce deuxième aspect qui peut poser le plus de problème. Comme nous l'avons mentionné avant, un contrôle `week` verra sa valeur normalisée pour respecter le format `yyyy-Www`. En revanche, pour un champ texte non reconnu par le navigateur, les utilisateurs pourraient saisir des semaines selon une variété de formats : -<ul> - <li><code>Première semaine de 2017</code></li> - <li><code>Du 2 au 8 janvier 2017</code></li> - <li><code>2017-W01</code></li> - <li>etc.</li> -</ul> +- `Première semaine de 2017` +- `Du 2 au 8 janvier 2017` +- `2017-W01` +- etc. -<p>Si on souhaite gérer cette saisie de façon compatible entre les différents navigateurs, on utilisera alors deux contrôles distincts (représentés par des éléments {{htmlelement("select")}}) qui représenteront respectivement le numéro de la semaine et l'année.</p> +Si on souhaite gérer cette saisie de façon compatible entre les différents navigateurs, on utilisera alors deux contrôles distincts (représentés par des éléments {{htmlelement("select")}}) qui représenteront respectivement le numéro de la semaine et l'année. -<h2 id="Exemples">Exemples</h2> +## Exemples -<p>Dans l'exemple qui suit, on construit deux ensembles d'éléments pour sélectionner une semaine : un sélecteur natif avec <code><input type="week"></code> et un second composé de deux éléments {{htmlelement("select")}} qui permettent de choisir la semaine et l'année sur les navigateurs qui ne prennent pas en charge le contrôle natif.</p> +Dans l'exemple qui suit, on construit deux ensembles d'éléments pour sélectionner une semaine : un sélecteur natif avec `<input type="week">` et un second composé de deux éléments {{htmlelement("select")}} qui permettent de choisir la semaine et l'année sur les navigateurs qui ne prennent pas en charge le contrôle natif. -<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p> +{{EmbedLiveSample('Exemples', 600, 140)}} -<p>Voici le code HTML utilisé :</p> +Voici le code HTML utilisé : -<pre class="brush: html"><form> - <div class="nativeWeekPicker"> - <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label> - <input id="week" type="week" name="week" - min="2017-W01" max="2018-W52" required> - <span class="validity"></span> - </div> - <p class="fallbackLabel">À quelle semaine souhaiteriez-vous commencer ?</p> - <div class="fallbackWeekPicker"> - <div> - <span> - <label for="week">Semaine :</label> - <select id="fallbackWeek" name="week"> - </select> - </span> - <span> - <label for="year">Année :</label> - <select id="year" name="year"> - <option value="2017" selected>2017</option> - <option value="2018">2018</option> - </select> - </span> - </div> - </div> -</form></pre> +```html +<form> + <div class="nativeWeekPicker"> + <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label> + <input id="week" type="week" name="week" + min="2017-W01" max="2018-W52" required> + <span class="validity"></span> + </div> + <p class="fallbackLabel">À quelle semaine souhaiteriez-vous commencer ?</p> + <div class="fallbackWeekPicker"> + <div> + <span> + <label for="week">Semaine :</label> + <select id="fallbackWeek" name="week"> + </select> + </span> + <span> + <label for="year">Année :</label> + <select id="year" name="year"> + <option value="2017" selected>2017</option> + <option value="2018">2018</option> + </select> + </span> + </div> + </div> +</form> +``` -<p>On génère les valeurs des semaines dynamiquement.</p> +On génère les valeurs des semaines dynamiquement. -<pre class="brush: css hidden">div { +```css hidden +div { margin-bottom: 10px; position: relative; } @@ -277,11 +268,13 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> +} +``` -<p>Dans le fragment de code JavaScript qui suit, on montre comment détecter si la fonctionnalité est prise en charge ou non. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on règle son <code>type</code> sur <code>week</code> puis on vérifie immédiatement la valeur de son type. Les navigateurs qui ne prennent pas en charge la fonctionnalité renverront <code>text</code>. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif composé des deux éléments {{htmlelement("select")}}.</p> +Dans le fragment de code JavaScript qui suit, on montre comment détecter si la fonctionnalité est prise en charge ou non. Pour cela, on crée un nouvel élément {{htmlelement("input")}} et on règle son `type` sur `week` puis on vérifie immédiatement la valeur de son type. Les navigateurs qui ne prennent pas en charge la fonctionnalité renverront `text`. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif composé des deux éléments {{htmlelement("select")}}. -<pre class="brush: js">// On définit certaines variables +```js +// On définit certaines variables var nativePicker = document.querySelector('.nativeWeekPicker'); var fallbackPicker = document.querySelector('.fallbackWeekPicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); @@ -312,72 +305,74 @@ if(test.type === 'text') { function populateWeeks() { // On ajoute 52 semaines grâce à une boucle - for(var i = 1; i <= 52; i++) { + for(var i = 1; i <= 52; i++) { var option = document.createElement('option'); - option.textContent = (i < 10) ? ("0" + i) : i; + option.textContent = (i < 10) ? ("0" + i) : i; weekSelect.appendChild(option); } -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p> -</div> +> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. -<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 une semaine et une année ou la chaîne 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("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>, <code>list</code>.</td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères ({{domxref("DOMString")}}) qui + représente une semaine et une année ou la chaîne 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("readonly", "input")}} et + {{htmlattrxref("step", "input")}}. + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td> + <code>value</code>, <code>valueAsDate</code>, + <code>valueAsNumber</code>, <code>list</code>. + </td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}}, + {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, + {{domxref("HTMLInputElement.stepUp", "stepUp()")}}. + </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#week-state-(type=week)', '<input type="week">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'forms.html#week-state-(type=week)', '<input type="week">')}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-week")}}</p> +{{Compat("html.elements.input.input-week")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément générique {{HTMLElement("input")}}</li> - <li>L'interface du DOM qui permet de le manipuler {{domxref("HTMLInputElement")}}</li> - <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/time"><input type="time"></a></code>, and <code><a href="/fr/docs/Web/HTML/Element/input/month"><input type="month"></a></code></li> -</ul> +- L'élément générique {{HTMLElement("input")}} +- L'interface du DOM qui permet de le manipuler {{domxref("HTMLInputElement")}} +- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML) +- [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local), [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date), [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time), and [`<input type="month">`](/fr/docs/Web/HTML/Element/input/month) |