diff options
Diffstat (limited to 'files/fr/web/html/element/input')
24 files changed, 9200 insertions, 0 deletions
diff --git a/files/fr/web/html/element/input/button/index.html b/files/fr/web/html/element/input/button/index.html new file mode 100644 index 0000000000..da1c6786e2 --- /dev/null +++ b/files/fr/web/html/element/input/button/index.html @@ -0,0 +1,348 @@ +--- +title: <input type ="button"> +slug: Web/HTML/Element/Input/button +tags: + - Element + - HTML + - Input + - Reference + - Web +translation_of: Web/HTML/Element/input/button +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">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")}}).</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<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> + +<h2 id="Valeur">Valeur</h2> + +<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> + +<div id="summary-example3"> +<pre class="brush: html"><input type="button" value="Bouton cliquer"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p>Si on n'indique aucune valeur, le bouton sera vide :</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="button"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Utiliser_les_boutons_<input>">Utiliser les boutons <code><input></code></h2> + +<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> + +<h3 id="Un_bouton_simple">Un bouton simple</h3> + +<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> + +<pre class="brush: html"><form> + <input type="button" value="Démarrer la machine"> +</form> +<p>La machine est arrêtée.</p></pre> + +<pre class="brush: js">var btn = document.querySelector('input'); +var txt = document.querySelector('p'); + +btn.addEventListener('click', updateBtn); + +function updateBtn() { + if (btn.value === 'Démarrer la machine') { + btn.value = 'Arrêter la machine'; + txt.textContent = 'La machine est démarrée !'; + } else { + 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> + +<p>{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}</p> + +<h3 id="Ajouter_des_raccourcis_clavier">Ajouter des raccourcis clavier</h3> + +<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> + +<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> + +<div id="accesskey-example1"> +<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> + +<div class="hidden"> +<pre class="brush: js">var btn = document.querySelector('input'); +var txt = document.querySelector('p'); + +btn.addEventListener('click', updateBtn); + +function updateBtn() { + if (btn.value === 'Démarrer la machine') { + btn.value = 'Arrêter la machine'; + txt.textContent = 'La machine est démarrée !'; + } else { + btn.value = 'Démarrer la machine'; + txt.textContent = 'La machine est arrêtée.'; + } +}</pre> +</div> + +<p>{{EmbedLiveSample("Ajouter_des_raccourcis_clavier", 650, 100)}}</p> + +<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> + +<h3 id="Désactiver_et_activer_un_bouton">Désactiver et activer un bouton</h3> + +<p>Pour désactiver un bouton, il suffit d'ajouter l'attribut universel {{htmlattrxref("disabled")}} :</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="button" value="Je suis désactivé" disabled></pre> +</div> + +<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> + +<div class="hidden"> +<h6 id="Hidden_code_1">Hidden code 1</h6> + +<pre class="brush: html"><input type="button" value="Activé"></pre> + +<pre class="brush: js">var btn = document.querySelector('input'); + +btn.addEventListener('click', disableBtn); + +function disableBtn() { + btn.disabled = true; + btn.value = 'Désactivé'; + window.setTimeout(function() { + btn.disabled = false; + btn.value = 'Activé'; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> + +<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> + +<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> + +<div class="hidden"> +<h6 id="Hidden_code_2">Hidden code 2</h6> + +<pre class="brush: html"><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> + +<pre class="brush: js">var btn = document.querySelector('input'); +var fieldset = document.querySelector('fieldset'); + +btn.addEventListener('click', disableBtn); + +function disableBtn() { + fieldset.disabled = true; + window.setTimeout(function() { + fieldset.disabled = false; + }, 2000); +}</pre> +</div> + +<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> + +<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> + +<h2 id="Validation">Validation</h2> + +<p>Les éléments <code><input</code><code> type="button"</code><code>></code> n'ont pas de contrainte de validation.</p> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<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> + +<canvas class="myCanvas"> + <p>Votre navigateur ne semble pas prendre en charge cette fonctionnalité.</p> +</canvas></pre> + +<div class="hidden"> +<pre class="brush: css">body { + margin: 0; + overflow: hidden; + background: #ccc; +} + +.toolbar { + width: 150px; + height: 75px; + background: #ccc; + padding: 5px; +} + +input[type="color"], input[type="button"] { + width: 90%; + margin: 0 auto; + display: block; +} + +input[type="range"] { + width: 70%; +} + + span { + position: relative; + bottom: 5px; + }</pre> +</div> + +<pre class="brush: js">var canvas = document.querySelector('.myCanvas'); +var width = canvas.width = window.innerWidth; +var height = canvas.height = window.innerHeight-85; +var ctx = canvas.getContext('2d'); + +ctx.fillStyle = 'rgb(0,0,0)'; +ctx.fillRect(0,0,width,height); + +var colorPicker = document.querySelector('input[type="color"]'); +var sizePicker = document.querySelector('input[type="range"]'); +var output = document.querySelector('.output'); +var clearBtn = document.querySelector('input[type="button"]'); + +// On convertit des degrés en radians +function degToRad(degrees) { + return degrees * Math.PI / 180; +}; + +// On met à jour la valeur pour le sélecteur +// de taille +sizePicker.oninput = function() { + output.textContent = sizePicker.value; +} + +// On enregistre les coordonnées du pointeur de la souris +// emouse pointer coordinates, and whether the button is pressed +var curX; +var curY; +var pressed = false; + +// On met à jour les coordonnées du pointeur +document.onmousemove = function(e) { + curX = (window.Event) ? e.pageX : e.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft); + curY = (window.Event) ? e.pageY : e.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); +} + +canvas.onmousedown = function() { + pressed = true; +}; + +canvas.onmouseup = function() { + pressed = false; +} + +clearBtn.onclick = function() { + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0,0,width,height); +} + +function draw() { + if(pressed) { + ctx.fillStyle = colorPicker.value; + ctx.beginPath(); + ctx.arc(curX, curY-85, sizePicker.value, degToRad(0), degToRad(360), false); + ctx.fill(); + } + + requestAnimationFrame(draw); +} + +draw();</pre> + +<p>{{EmbedLiveSample("Exemples", '100%', 600)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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> +</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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-button")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/checkbox/index.html b/files/fr/web/html/element/input/checkbox/index.html new file mode 100644 index 0000000000..7d6b99e4fb --- /dev/null +++ b/files/fr/web/html/element/input/checkbox/index.html @@ -0,0 +1,344 @@ +--- +title: <input type="checkbox"> +slug: Web/HTML/Element/Input/checkbox +tags: + - Element + - HTML + - Input + - Reference + - Web +translation_of: Web/HTML/Element/input/checkbox +--- +<div>{{HTMLRef}}</div> + +<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> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<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> + +<h2 id="Valeur">Valeur</h2> + +<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> + +<pre class="brush: html notranslate"><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> + +<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> + +<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> + +<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> + +<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> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<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> + +<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> + +<h3 id="htmlattrdefchecked">{{htmlattrdef("checked")}}</h3> + +<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> + +<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> + +<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> + +<h3 id="htmlattrdefvalue">{{htmlattrdef("value")}}</h3> + +<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> + +<h2 id="Utiliser_les_cases_à_cocher">Utiliser les cases à cocher</h2> + +<h3 id="Gérer_plusieurs_cases_à_cocher">Gérer plusieurs cases à cocher</h3> + +<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> + +<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> + +<pre class="brush: html notranslate"><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> + +<p>{{EmbedLiveSample('Gérer_plusieurs_cases_à_cocher', 600, 100)}}</p> + +<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 class="question-hyperlink" 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> + +<h3 id="Cocher_certaines_cases_par_défaut">Cocher certaines cases par défaut</h3> + +<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> + +<pre class="brush: html notranslate"><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> + +<p>{{EmbedLiveSample('Cocher_certaines_cases_par_défaut', 600, 100)}}</p> + +<h3 id="Fournir_une_zone_cliquable_plus_grande">Fournir une zone cliquable plus grande</h3> + +<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> + +<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> + +<h3 id="Gérer_un_état_indéterminé">Gérer un état indéterminé</h3> + +<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> + +<pre class="brush: js notranslate">inputInstance.indeterminate = true;</pre> + +<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> + +<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> + +<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> + +<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> + +<pre class="brush: js notranslate" id="line1"><span> var overall = document.querySelector('input[id="EnchTbl"]'); + var ingredients = document.querySelectorAll('ul input'); + + overall.addEventListener('click', function(e) { + e.preventDefault(); + }); + + for(var i = 0; i </span><span>< </span><span>ingredients.length; i++) { + ingredients[i].addEventListener('click', updateDisplay); + } + + function updateDisplay() { + var checkedCount = 1; + for(var i = 0; i </span><span>< </span><span>ingredients.length; i++) { + if(ingredients[i].checked) { + checkedCount++; + } + } + if(checkedCount === 0) { + overall.checked = false; + overall.indeterminate = false; + } else if(checkedCount </span><span>===</span><span> ingredients.length) { + overall.checked = true; + overall.indeterminate = false; + } else { + overall.checked = false; + overall.indeterminate = true; + } + }</span></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 notranslate"><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 notranslate">html { + font-family: sans-serif; +} + +form { + width: 600px; + margin: 0 auto; +} + +div { + margin-bottom: 10px; +} + +fieldset { + background: cyan; + border: 5px solid blue; +} + +legend { + padding: 10px; + background: blue; + color: cyan; +} + +#otherValue +{ + display: none; +} + +#other:checked ~ #otherValue +{ + display: inline-block; +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">var otherCheckbox = document.querySelector('input[value="other"]'); +var otherText = document.querySelector('input[id="otherValue"]'); +otherText.style.visibility = 'hidden'; + +otherCheckbox.onchange = function() { + if(otherCheckbox.checked) { + otherText.style.visibility = 'visible'; + otherText.value = ''; + } else { + otherText.style.visibility = 'hidden'; + } +};</pre> + +<p>{{EmbedLiveSample('Exemples', '100%', 300)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-checkbox")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/color/index.html b/files/fr/web/html/element/input/color/index.html new file mode 100644 index 0000000000..5db15d6272 --- /dev/null +++ b/files/fr/web/html/element/input/color/index.html @@ -0,0 +1,215 @@ +--- +title: <input type="color"> +slug: Web/HTML/Element/Input/color +tags: + - Element + - HTML + - Input + - Reference + - Web +translation_of: Web/HTML/Element/input/color +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">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.</span></p> + +<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> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-color.html", "tabbed-standard")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Valeur">Valeur</h2> + +<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> + +<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> + +<h2 id="Utiliser_les_contrôles_de_saisie_des_couleurs">Utiliser les contrôles de saisie des couleurs</h2> + +<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> + +<h3 id="Fournir_une_couleur_par_défaut">Fournir une couleur par défaut</h3> + +<p>Il est possible de créer un sélecteur de couleur qui emploie une valeur par défaut :</p> + +<pre class="brush: html notranslate"><input type="color" value="#ff0000"></pre> + +<p>{{EmbedLiveSample("Fournir_une_couleur_par_défaut", 700, 30)}}</p> + +<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> + +<h3 id="Détecter_le_changement_de_couleur">Détecter le changement de couleur</h3> + +<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> + +<pre class="brush: js notranslate">colorPicker.addEventListener("input", updateFirst, false); +colorPicker.addEventListener("change", watchColorPicker, false); + +function watchColorPicker(event) { + document.querySelectorAll("p").forEach(function(p) { + p.style.color = event.target.value; + }); +} +</pre> + +<h3 id="Sélectionner_la_valeur">Sélectionner la valeur</h3> + +<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.</p> + +<pre class="brush: js notranslate">colorWell.select();</pre> + +<h3 id="Différences_daspect">Différences d'aspect</h3> + +<p>Comme mentionné précédemment, lorsqu'un navigateur ne prend pas en charge l'affichage d'un sélecteur de couleur, c'est un champ texte qui sera affiché. Par exemple, sous Safari 10.1, on peut voir le résultat suivant :</p> + +<p><img alt="Screenshot of the example taken in Safari." src="https://mdn.mozillademos.org/files/14899/input-color-safari.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>Avec Firefox Firefox 55, on aura cet affichage :</p> + +<p><img alt="Screenshot of the example taken in Firefox 55 for macOS" src="https://mdn.mozillademos.org/files/14901/input-color-firefox.png" style="border-style: solid; border-width: 1px; height: 160px; width: 598px;"></p> + +<p>Pour ce deuxième cas, en cliquant sur le carré coloré, cela ouvrira le sélecteur de couleur natif du système d'exploitation :</p> + +<p><img alt="Screenshot of the element with the color picker open in Firefox Mac." src="https://mdn.mozillademos.org/files/14903/input-with-picker-firefox-mac.png" style="border-style: solid; border-width: 1px; height: 405px; width: 682px;"></p> + +<h2 id="Validation">Validation</h2> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<h3 id="HTML">HTML</h3> + +<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> + +<pre class="brush: html notranslate"><p>Un exemple qui illustre l'utilisation de <code>&lt;input type="color"&gt;</code>.</p> + +<label for="colorWell">Couleur :</label> +<input type="color" value="#ff0000" id="colorWell"> + +<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> + +<h3 id="JavaScript">JavaScript</h3> + +<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> + +<pre class="brush: js notranslate">var colorWell +var defaultColor = "#0000ff"; + +window.addEventListener("load", startup, false); +</pre> + +<h4 id="Initialisation">Initialisation</h4> + +<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> + +<pre class="brush: js notranslate">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> + +<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> + +<h4 id="Réagir_suite_aux_modifications_de_couleurs">Réagir suite aux modifications de couleurs</h4> + +<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> + +<pre class="brush: js notranslate">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> + +<pre class="brush: js notranslate">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> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample("Exemples", 700, 200)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-color")}}</p> diff --git a/files/fr/web/html/element/input/date/index.html b/files/fr/web/html/element/input/date/index.html new file mode 100644 index 0000000000..29f8409818 --- /dev/null +++ b/files/fr/web/html/element/input/date/index.html @@ -0,0 +1,516 @@ +--- +title: <input type="date"> +slug: Web/HTML/Element/Input/date +tags: + - Element + - HTML + - Input + - Reference + - Web +translation_of: Web/HTML/Element/input/date +--- +<div>{{HTMLRef}}</div> + +<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> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<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> + +<p>Si votre navigateur actuel prend en charge cette fonctionnalité, voici ce à quoi ressemble le contrôle sous Chrome/Opera :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> + +<p>et pour Edge :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> + +<p>Le contrôle de sélection de date pour Firefox ressemble à :</p> + +<p><img alt="Interface utilisateur du sélecteur de date dans Firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Valeur">Valeur</h2> + +<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> + +<pre class="brush: html"><input id="date" type="date" value="2017-06-01"></pre> + +<p>{{EmbedLiveSample('Valeur', 600, 40) }}</p> + +<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> + +<p>On peut également récupérer la valeur de la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}} :</p> + +<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]'); +dateControl.value = '2017-06-01';</pre> + +<h2 id="Utiliser_les_contrôles_de_saisie_de_date">Utiliser les contrôles de saisie de date</h2> + +<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> + +<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> + +<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>"date"</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>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> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<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> + +<p>La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<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> + +<p>La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<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> + +<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> + +<h2 id="Utilisation_des_contrôles_de_saisie_des_dates">Utilisation des contrôles de saisie des dates</h2> + +<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> + +<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> + +<h3 id="Utilisation_simple">Utilisation simple</h3> + +<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> + +<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> + +<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p> + +<h3 id="Paramétrer_une_date_maximale_et_une_date_minimale">Paramétrer une date maximale et une date minimale</h3> + +<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> + +<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> + +<p>{{EmbedLiveSample('Paramétrer_une_date_maximale_et_une_date_minimale', 600, 40)}}</p> + +<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> + +<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> + +<h3 id="Contrôler_la_taille_du_champ_de_saisie">Contrôler la taille du champ de saisie</h3> + +<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> + +<h2 id="Validation">Validation</h2> + +<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> + +<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> + +<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> + +<p>Prenons un exemple où la date est contrainte entre deux dates et que le champ est obligatoire :</p> + +<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> + +<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> + +<p>{{EmbedLiveSample('Validation', 600, 100)}}</p> + +<p>Voici une capture d'écran illustrant ce qui se produit dans un navigateur qui implémente cette fonctionnalité :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<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> + +<pre class="brush: css">div { + margin-bottom: 10px; + display: flex; + align-items: center; +} + +label { + display: inline-block; + width: 300px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +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> + +<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> + +<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. Par exemple, le sélecteur de date implémenté dans Firefox pour Android ressemblera à :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> + +<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> + +<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> + +<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> + +<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> + +<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> + +<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p> + +<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> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +} + +input:invalid + span { + position: relative; +} + +input:invalid + span:after { + content: '✖'; + position: absolute; + right: -18px; +} + +input:valid + span { + position: relative; +} + +input:valid + span:after { + content: '✓'; + position: absolute; + right: -18px; +}</pre> +</div> + +<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> + +<div class="hidden"> +<pre class="brush: css">input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<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> + +<pre class="brush: js">// On définit les différentes variables +var nativePicker = document.querySelector('.nativeDatePicker'); +var fallbackPicker = document.querySelector('.fallbackDatePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); +var daySelect = document.querySelector('#day'); + +// Initialement, on masque le sélecteur non-natif +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// 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> + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // On affiche les jours et les années + // de façon dynamique + populateDays(monthSelect.value); + populateYears(); +} + +function populateDays(month) { + // 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); + } + + // On crée une variable afin de contenir le nombre + // de jours à afficher + var dayNum; + + // 31 ou 30 jours ? + if(month === 'Janvier' || month === 'Mars' || month === 'Mai' || month === 'Juillet' || month === 'Août' || month === 'Octobre' || month === 'Décembre') { + dayNum = 31; + } else if(month === 'Avril' || month === 'Juin' || month === 'Septembre' || month === 'Novembre') { + dayNum = 30; + } else { + // Si le mois est février, on calcule si l'année est bissextile + var year = yearSelect.value; + var leap = new Date(year, 1, 29).getMonth() == 1; + dayNum = leap ? 29 : 28; + } + + // on ajoute le bon nombre de jours dans autant + // d'éléments <option> pour l'élément <select> + // pour la journée + for(i = 1; i <= dayNum; i++) { + var option = document.createElement('option'); + option.textContent = i; + daySelect.appendChild(option); + } + + // Si le jour précédent a déjà été défini on utilise + // la valeur de ce jour pour daySelect afin d'éviter de + // réinitialiser le jour lorsqu'on change l'année + if(previousDay) { + daySelect.value = previousDay; + + // Si le jour précédent correspond au dernier jour d'un mois + // et que le mois sélectionné possède moins de jours (par + // exemple en février) + if(daySelect.value === "") { + daySelect.value = previousDay - 1; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 2; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 3; + } + } +} + +function populateYears() { + // On obtient l'année courante + var date = new Date(); + var year = date.getFullYear(); + + // On affiche l'année courante et les 100 années + // précédentes pour l'élément <select> destiné à + // stocker l'année + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +} + +// Lorsque la valeur du mois ou de l'année est modifiée +// on relance populateDays() +yearSelect.onchange = function() { + populateDays(monthSelect.value); +} + +monthSelect.onchange = function() { + populateDays(monthSelect.value); +} + +// On conserve le jour sélectionné +var previousDay; + +// On met à jour la journée utilisé précédemment +// (voir la fin de populateDays() pour voir où +// 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> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-date")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/datetime-local/index.html b/files/fr/web/html/element/input/datetime-local/index.html new file mode 100644 index 0000000000..6ac8c983c7 --- /dev/null +++ b/files/fr/web/html/element/input/datetime-local/index.html @@ -0,0 +1,613 @@ +--- +title: <input type="datetime-local"> +slug: Web/HTML/Element/Input/datetime-local +tags: + - Date + - Element + - Formulaires + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/datetime-local +--- +<div>{{HTMLRef}}</div> + +<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> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-datetime-local.html", "tabbed-shorter")}}</div> + +<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> + +<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> + +<p>Les secondes ne sont pas prises en charge.</p> + +<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> + +<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> + +<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> + +<p>Voici, ci-après, un aperçu du contrôle obtenu dans un navigateur fonctionnel. En cliquant sur la flèche vers le bas, cela fait apparaître un sélecteur de date et il faut ensuite saisir l'heure manuellement. Pour Chrome / Opera :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14949/datetime-local-chrome.png" style="display: block; height: 224px; margin: 0px auto; width: 280px;"></p> + +<p>Pour Edge, le contrôle associé à <code>datetime-local</code> se décompose en deux sélecteurs : un pour la date et un pour l'heure qui apparaissent quand on clique sur les éléments respectifs du champ :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14953/datetime-local-picker-edge1.png" style="display: block; height: 398px; margin: 0px auto; width: 320px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14955/datetime-local-picker-edge2.png" style="display: block; height: 394px; margin: 0px auto; width: 264px;"></p> + +<h2 id="Valeur">Valeur</h2> + +<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> + +<pre class="brush: html notranslate"><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> + +<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> + +<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> + +<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> + +<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> + +<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="datetime-local"]'); +date.value = '2017-06-01T08:30';</pre> + +<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> + +<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>"date"</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>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> + +<h3 id="htmlattrdefmax">{{htmlattrdef("max")}}</h3> + +<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> + +<p>La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> + +<h3 id="htmlattrdefmin">{{htmlattrdef("min")}}</h3> + +<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> + +<p>La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> + +<h3 id="htmlattrdefstep">{{htmlattrdef("step")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<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> + +<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> + +<h2 id="Utiliser_les_contrôles_datetime-local">Utiliser les contrôles <code>datetime-local</code></h2> + +<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> + +<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> + +<h3 id="Utilisation_simple_de_datetime-local">Utilisation simple de <code>datetime-local</code></h3> + +<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> + +<pre class="brush: html notranslate"><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> + +<p>{{EmbedLiveSample('Utilisation_simple_de_datetime-local', 600, 40)}}</p> + +<h3 id="Paramétrer_des_dates_et_heures_minimalesmaximales">Paramétrer des dates et heures minimales/maximales</h3> + +<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> + +<pre class="brush: html notranslate"> <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> + +<p>{{EmbedLiveSample('Paramétrer_des_dates_et_heures_minimales/maximales', 600, 40)}}</p> + +<p>Par conséquent :</p> + +<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> + +<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> + +<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> + +<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> + +<h3 id="Paramétrer_le_fuseau_horaire">Paramétrer le fuseau horaire</h3> + +<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> + +<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> + +<pre class="brush: html notranslate"><input type="hidden" id="timezone" name="timezone" value="-08:00"></pre> + +<p>Sinon, on peut proposer la sélection d'un fuseau horaire grâce à un élément {{htmlelement("select")}} :</p> + +<pre class="brush: html notranslate"><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> + + ... + +</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> + +<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> + +<h2 id="Validation">Validation</h2> + +<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> + +<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> + +<p>Prenons un exemple avec des dates mini/maxi et le champ obligatoire :</p> + +<pre class="brush: html notranslate"><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> + +<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> + +<p>{{EmbedLiveSample('Validation', 600, 120)}}</p> + +<p>Voici une capture d'écran illustrant un message d'erreur dans un navigateur qui prend en charge cette fonctionnalité :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14957/datetime-local-error.png" style="display: block; height: 100px; margin: 0px auto; width: 558px;"></p> + +<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> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + display: flex; + align-items: center; +} + +label { + display: inline-block; + width: 300px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + content: '✓'; + padding-left: 5px; +}</pre> + +<div class="warning"> +<p><strong>Important </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> + +<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. Voici, par exemple, l'interface utilisateur du sélecteur <code>datetime-local</code> de Firefox pour Android :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14951/datetime-local-fxa.png" style="display: block; height: 640px; margin: 0px auto; width: 360px;"></p> + +<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> + +<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> + +<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> + +<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> + +<pre class="brush: html notranslate"><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> + +<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p> + +<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> + +<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> + +<p>Bref, il y a toujours un problème.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +input:invalid + span { + position: relative; +} + +input:invalid + span:after { + content: '✖'; + position: absolute; + right: -18px; +} + +input:valid + span { + position: relative; +} + +input:valid + span:after { + content: '✓'; + position: absolute; + right: -18px; +}</pre> +</div> + +<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 notranslate"><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> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<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> + +<pre class="brush: js notranslate">// On définit les différentes variables +var nativePicker = document.querySelector('.nativeDateTimePicker'); +var fallbackPicker = document.querySelector('.fallbackDateTimePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); +var daySelect = document.querySelector('#day'); +var hourSelect = document.querySelector('#hour'); +var minuteSelect = document.querySelector('#minute'); + +// Initialement, on masque le sélecteur non-natif +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// 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> + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // On affiche les jours, années, heures + // et minutes de façon dynamique + populateDays(monthSelect.value); + populateYears(); + populateHours(); + populateMinutes(); +} + +function populateDays(month) { + // 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); + } + + // On crée une variable afin de contenir le nombre + // de jours à afficher + var dayNum; + + // 31 ou 30 jours ? + if(month === 'Janvier' || month === 'Mars' || month === 'Mai' || month === 'Juillet' || month === 'Août' || month === 'Octobre' || month === 'Décembre') { + dayNum = 31; + } else if(month === 'Avril' || month === 'Juin' || month === 'Septembre' || month === 'Novembre') { + dayNum = 30; + } else { + // Si le mois est février, on calcule si l'année est bissextile + var year = yearSelect.value; + var leap = new Date(year, 1, 29).getMonth() == 1; + leap ? dayNum = 29 : dayNum = 28; + } + + // on ajoute le bon nombre de jours dans autant + // d'éléments <option> pour l'élément <select> + // pour la journée + for(i = 1; i <= dayNum; i++) { + var option = document.createElement('option'); + option.textContent = i; + daySelect.appendChild(option); + } + + // Si le jour précédent a déjà été défini on utilise + // la valeur de ce jour pour daySelect afin d'éviter de + // réinitialiser le jour lorsqu'on change l'année + if(previousDay) { + daySelect.value = previousDay; + + // Si le jour précédent correspond au dernier jour d'un mois + // et que le mois sélectionné possède moins de jours (par + // exemple en février) + if(daySelect.value === "") { + daySelect.value = previousDay - 1; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 2; + } + + if(daySelect.value === "") { + daySelect.value = previousDay - 3; + } + } +} + +function populateYears() { + // On obtient l'année courante + var date = new Date(); + var year = date.getFullYear(); + + // On affiche l'année courante et les 100 années + // précédentes pour l'élément <select> destiné à + // stocker l'année + for(var i = 0; i <= 100; i++) { + var option = document.createElement('option'); + option.textContent = year-i; + yearSelect.appendChild(option); + } +} + +function populateHours() { + // on crée 24 valeurs pour l'élément <select> + // associé aux heures + for(var i = 0; i <= 23; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + hourSelect.appendChild(option); + } +} + +function populateMinutes() { + // On crée 60 valeurs pour l'élément <select> + // associé aux minutes + for(var i = 0; i <= 59; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + minuteSelect.appendChild(option); + } +} + +// Lorsque la valeur du mois ou de l'année est modifiée +// on relance populateDays() +yearSelect.onchange = function() { + populateDays(monthSelect.value); +} + +monthSelect.onchange = function() { + populateDays(monthSelect.value); +} + +// On conserve le jour sélectionné +var previousDay; + +// On met à jour la journée utilisé précédemment +// (voir la fin de populateDays() pour voir où +// 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> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-datetime-local")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/datetime/index.html b/files/fr/web/html/element/input/datetime/index.html new file mode 100644 index 0000000000..e3ddf4012c --- /dev/null +++ b/files/fr/web/html/element/input/datetime/index.html @@ -0,0 +1,24 @@ +--- +title: <input type="datetime"> +slug: Web/HTML/Element/Input/datetime +tags: + - Element + - HTML + - Input + - Obsolete + - Reference + - Web +translation_of: Web/HTML/Element/input/datetime +--- +<div>{{HTMLRef}}{{obsolete_header}}</div> + +<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> + +<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> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/email/index.html b/files/fr/web/html/element/input/email/index.html new file mode 100644 index 0000000000..d250ab460a --- /dev/null +++ b/files/fr/web/html/element/input/email/index.html @@ -0,0 +1,437 @@ +--- +title: <input type="email"> +slug: Web/HTML/Element/Input/email +tags: + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/email +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">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.</span> 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="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> + +<div class="note"> +<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type <code>"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 s {{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> + +<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> + + + +<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du 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> + + + +<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> + + + +<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du 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> + + + +<h3 id="htmlattrdef(multiple)">{{htmlattrdef("multiple")}}</h3> + +<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> + +<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> + +<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>Voir la section sur la validation d'un motif ci-après pour plus de détails.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p> + +<h2 id="Attributs_non-standard">Attributs non-standard</h2> + +<p>Les attributs non-standard suivant sont disponibles pour les champs d'email dans certains navigateurs mais devraient ne pas être utilisés.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>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> + +<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> + +<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> + +<h2 id="Utiliser_les_champs_de_saisie_d'adresses_électroniques">Utiliser les champs de saisie d'adresses électroniques</h2> + +<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> + +<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> + +<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> + +<h3 id="Un_champ_email_simple">Un champ email simple</h3> + +<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> + +<pre class="brush: html"><input id="emailAddress" type="email"></pre> + +<p>{{EmbedLiveSample('Un_champ_email_simple', 600, 40)}}</p> + +<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> + +<h3 id="Gérer_plusieurs_adresses_mail">Gérer plusieurs adresses mail</h3> + +<p>Grâce à l'attribut {{htmlattrxref("multiple", "input")}}, on peut configurer le champ afin de saisir plusieurs adresses mail.</p> + +<pre class="brush: html"><input id="emailAddress" type="email" multiple></pre> + +<p>{{EmbedLiveSample('Gérer_plusieurs_adresses_mail', 600, 40)}}</p> + +<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> + +<p>Voici certains exemples de chaînes de caractères valides lorsque <code>"multiple"</code> est utilisé :</p> + +<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> + +<p>En revanche, les exemples suivants sont considérés invalides :</p> + +<ul> + <li><code>","</code></li> + <li><code>"me"</code></li> + <li><code>"me@example.org you@example.org"</code></li> +</ul> + +<h3 id="Textes_indicatifs_(placeholders)">Textes indicatifs (<em>placeholders</em>)</h3> + +<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> + +<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> + +<pre class="brush: html"><input type="email" placeholder="sophie@example.com"></pre> + +<p>{{EmbedLiveSample('Textes_indicatifs_(placeholders)', 600, 40)}}</p> + +<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> + +<p>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> + +<h4 id="Contrôler_la_taille_physique">Contrôler la taille physique</h4> + +<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> + +<pre class="brush: html"><input type="email" size="15"></pre> + +<p>{{ EmbedLiveSample('Contrôler_la_taille_physique', 600, 40)}}</p> + +<h4 id="Contrôler_la_taille_de_la_valeur">Contrôler la taille de la valeur</h4> + +<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> + +<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> + +<pre class="brush: html"><input type="email" size="32" minlength="3" maxlength="64"></pre> + +<p>{{EmbedLiveSample("Contrôler_la_taille_de_la_valeur", 600, 40)}}</p> + +<h3 id="Fournir_une_option_par_défaut">Fournir une option par défaut</h3> + +<p>On peut également fournir une valeur par défaut en remplissant l'attribut {{htmlattrxref("value", "input")}} de l'élément :</p> + +<div id="Default_value"> +<pre class="brush: html"><input type="email" value="default@example.com"></pre> +</div> + +<p>{{EmbedLiveSample("Fournir_une_option_par_défaut", 600, 40)}}</p> + +<h4 id="Proposer_des_suggestions">Proposer des suggestions</h4> + +<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> + +<pre class="brush: 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> + +<p>{{EmbedLiveSample("Proposer_des_suggestions", 600, 40)}}</p> + +<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> + +<p><img alt="Animation: Using keyboard entry to filter the list of suggested email addresses" src="https://mdn.mozillademos.org/files/14831/html-input-email1.gif" style="border-style: solid; border-width: 1px; height: 168px; width: 352px;"></p> + +<h2 id="Validation">Validation</h2> + +<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> + +<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> + +<h3 id="Validation_simple">Validation simple</h3> + +<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> + +<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> + +<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> + +<h3 id="Validation_grâce_à_une_expression_rationnelle">Validation grâce à une expression rationnelle</h3> + +<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> + +<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> + +<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> + +<div class="hidden"> +<pre class="brush: css">body { + font: 16px sans-serif; +} + +.emailBox { + padding-bottom: 20px; +} + +.messageBox { + padding-bottom: 20px; +} + +label { + line-height: 22px; +} + +label::after { + content: ":"; +}</pre> +</div> + +<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 + placeholder="nomutilisateur@beststartupever.com" pattern=".+@beststartupever.com" + 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> + +<p>{{EmbedLiveSample("Validation_grâce_à_une_expression_rationnelle", 700, 275)}}</p> + +<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> + +<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> + +<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> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14855/enter-valid-email-address.png" style="height: 125px; width: 530px;"></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> + +<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> + +<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> + +<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> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14853/email-pattern-match-bad.png" style="height: 140px; width: 536px;"></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> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<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> + +<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> + +<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> + +<p>{{EmbedLiveSample('Exemples', 600, 50)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-email")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/file/index.html b/files/fr/web/html/element/input/file/index.html new file mode 100644 index 0000000000..6c64a3e012 --- /dev/null +++ b/files/fr/web/html/element/input/file/index.html @@ -0,0 +1,502 @@ +--- +title: <input type="file"> +slug: Web/HTML/Element/Input/file +tags: + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/file +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">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>.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<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"><strong>Note :</strong> + +<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> + +<h3 id="htmlattrdefaccept">{{htmlattrdef("accept")}}</h3> + +<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> + +<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> + +<pre class="brush: html"><input type="file" id="docpicker" + accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"></pre> + +<h3 id="htmlattrdefcapture">{{htmlattrdef("capture")}}</h3> + +<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> + +<div class="note"><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.</div> + +<h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3> + +<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> + +<h3 id="htmlattrdefmultiple">{{htmlattrdef("multiple")}}</h3> + +<p>Lorsque cet attribut booléen est indiqué, le champ peut être utilisé afin de sélectionner plus d'un fichier.</p> + +<h2 id="Attribut_non-standard">Attribut non-standard</h2> + +<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> + +<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> + +<h3 id="htmlattrdefwebkitdirectory_non-standard_inline">{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}</h3> + +<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> + +<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> + +<h2 id="Identifiants_de_type_de_fichier">Identifiants de type de fichier</h2> + +<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> + +<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> + +<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> + +<pre class="brush: html"><input type="file" accept="image/*,.pdf"></pre> + +<h2 id="Utiliser_<input_typefile>">Utiliser <code><input type="file"></code></h2> + +<h3 id="Un_exemple_simple">Un exemple simple</h3> + +<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> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>Ce fragment de code HTML produira le résultat suivant :</p> + +<p>{{EmbedLiveSample('Un_exemple_simple', 650, 60)}}</p> + +<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> + +<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> + +<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> + +<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> + +<h3 id="Obtenir_des_informations_sur_les_fichiers_sélectionnés">Obtenir des informations sur les fichiers sélectionnés</h3> + +<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> + +<p>Chaque objet <code>File</code> contient les informations suivantes :</p> + +<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> + +<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> + +<h3 id="Restreindre_les_types_de_fichiers_acceptés">Restreindre les types de fichiers acceptés</h3> + +<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> + +<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> + +<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> + +<p>Prenons un exemple :</p> + +<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> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; +}</pre> +</div> + +<p>Voici le résultat produit :</p> + +<p>{{EmbedLiveSample('Restreindre_les_types_de_fichiers_acceptés', 650, 60)}}</p> + +<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> + +<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> + +<p><img alt="Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable." src="https://mdn.mozillademos.org/files/15183/file-chooser.png" style="margin: 0 auto;"></p> + +<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> + +<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> + +<h3 id="Notes">Notes</h3> + +<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> + + <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> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<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> + +<p>Tout d'abord, voici le fragment de code HTML utilisé :</p> + +<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> + +<div class="hidden"> +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + width: 600px; + background: #ccc; + margin: 0 auto; + padding: 20px; + border: 1px solid black; +} + +form ol { + padding-left: 0; +} + +form li, div > p { + background: #eee; + display: flex; + justify-content: space-between; + margin-bottom: 10px; + list-style-type: none; + border: 1px solid black; +} + +form img { + height: 64px; + order: 1; +} + +form p { + line-height: 32px; + padding-left: 10px; +} + +form label, form button { + background-color: #7F9CCB; + padding: 5px 10px; + border-radius: 5px; + border: 1px ridge black; + font-size: 0.8rem; + height: auto; +} + +form label:hover, form button:hover { + background-color: #2D5BA3; + color: white; +} + +form label:active, form button:active { + background-color: #0D3F8F; + color: white; +}</pre> +</div> + +<p>Pour l'instant, le fragment HTML ressemble à ce que nous avons déjà vu avant, rien de spécial.</p> + +<p>Voyons maintenant le code JavaScript utilisé :</p> + +<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> + +<pre class="brush: 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() { + while(preview.firstChild) { + preview.removeChild(preview.firstChild); + } + + var curFiles = input.files; + if(curFiles.length === 0) { + var para = document.createElement('p'); + para.textContent = 'No files currently selected for upload'; + preview.appendChild(para); + } else { + var list = document.createElement('ol'); + preview.appendChild(list); + for(var i = 0; i < curFiles.length; i++) { + var listItem = document.createElement('li'); + var para = document.createElement('p'); + if(validFileType(curFiles[i])) { + para.textContent = 'File name ' + curFiles[i].name + ', file size ' + returnFileSize(curFiles[i].size) + '.'; + var image = document.createElement('img'); + image.src = window.URL.createObjectURL(curFiles[i]); + + listItem.appendChild(image); + listItem.appendChild(para); + + } else { + para.textContent = 'File name ' + curFiles[i].name + ': Not a valid file type. Update your selection.'; + listItem.appendChild(para); + } + + 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> + +<pre class="brush: js">var fileTypes = [ + 'image/jpeg', + 'image/pjpeg', + 'image/png' +] + +function validFileType(file) { + 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> + +<pre class="brush: js">function returnFileSize(number) { + if(number < 1024) { + return number + ' octets'; + } else if(number >= 1024 && number < 1048576) { + return (number/1024).toFixed(1) + ' Ko'; + } else if(number >= 1048576) { + return (number/1048576).toFixed(1) + ' Mo'; + } +}</pre> + +<p>Et voici le résultat :</p> + +<p>{{EmbedLiveSample('Exemples', '100%', 200)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-file")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/hidden/index.html b/files/fr/web/html/element/input/hidden/index.html new file mode 100644 index 0000000000..f58ba589fd --- /dev/null +++ b/files/fr/web/html/element/input/hidden/index.html @@ -0,0 +1,232 @@ +--- +title: <input type="hidden"> +slug: Web/HTML/Element/Input/hidden +tags: + - Element + - Input + - Reference +translation_of: Web/HTML/Element/input/hidden +--- +<div>{{HTMLRef}}</div> + +<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> + +<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> + +<div id="Basic_example"> +<pre class="brush: html"><input id="prodId" name="prodId" type="hidden" value="xm234jq"></pre> + +<p>{{EmbedLiveSample('Basic_example', 600, 40)}}</p> + +<div class="blockIndicator 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> +</div> + +<h2 id="Valeur">Valeur</h2> + +<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> + +<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> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<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> + +<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> + +<h3 id="htmlattrdef(name)">{{htmlattrdef("name")}}</h3> + +<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> + +<h2 id="Utiliser_les_valeurs_masquées_dans_les_formulaires">Utiliser les valeurs masquées dans les formulaires</h2> + +<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> + +<h3 id="Suivre_les_modifications_apportées_au_contenu">Suivre les modifications apportées au contenu</h3> + +<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> + +<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> + +<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> + +<p>Pour un exemple complet, voir la section {{anch("Exemples")}} ci-après.</p> + +<h3 id="Contribuer_à_la_sécurité_d'un_site_web">Contribuer à la sécurité d'un site web</h3> + +<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> + +<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> + +<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> + +<h2 id="Validation">Validation</h2> + +<p>Aucune contrainte de validation n'est appliquée sur ces valeurs.</p> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<h3 id="HTML">HTML</h3> + +<p>Voici le fragment HTML pour le formulaire :</p> + +<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"> +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> + +<h3 id="CSS">CSS</h3> + +<p>Ajoutons quelques éléments de mise en forme :</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + width: 500px; +} + +div { + display: flex; + margin-bottom: 10px; +} + +label { + flex: 2; + line-height: 2; + text-align: right; + padding-right: 20px; +} + +input, textarea { + flex: 7; + font-family: sans-serif; + font-size: 1.1rem; + padding: 5px; +} + +textarea { + height: 60px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<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> + +<h3 id="Résultat">Résultat</h3> + +<p>{{EmbedLiveSample('Exemples', '100%', 200)}}</p> + +<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> + +<p>Lorsque le formulaire est envoyé, les données envoyées au serveur ressembleront à :</p> + +<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> + +<p>Bien que le champ masqué soit invisible sur la page, il fait toujours partie des données envoyées.</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-hidden")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/image/index.html b/files/fr/web/html/element/input/image/index.html new file mode 100644 index 0000000000..41560c72d2 --- /dev/null +++ b/files/fr/web/html/element/input/image/index.html @@ -0,0 +1,399 @@ +--- +title: <input type="image"> +slug: Web/HTML/Element/Input/image +tags: + - Element + - HTML + - Input + - Reference + - 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> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<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> + +<h3 id="htmlattrdefalt">{{htmlattrdef("alt")}}</h3> + +<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> + +<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> + +<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> + +<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> + +<h3 id="htmlattrdefformaction">{{htmlattrdef("formaction")}}</h3> + +<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> + +<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> + +<h3 id="htmlattrdefformenctype">{{htmlattrdef("formenctype")}}</h3> + +<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> + +<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> + +<p>Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.</p> + +<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> + +<h3 id="htmlattrdefformmethod">{{htmlattrdef("formmethod")}}</h3> + +<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> + +<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> + +<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> + +<h3 id="htmlattrdefformnovalidate">{{htmlattrdef("formnovalidate")}}</h3> + +<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> + +<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> + +<h3 id="htmlattrdefformtarget">{{htmlattrdef("formtarget")}}</h3> + +<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> + +<p>En complément des noms des onglets, fenêtres, <em>iframes</em>, quelques mots-clés spéciaux peuvent être utilisés :</p> + +<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> + +<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> + +<h3 id="htmlattrdefheight">{{htmlattrdef("height")}}</h3> + +<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> + +<h3 id="htmlattrdefsrc">{{htmlattrdef("src")}}</h3> + +<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> + +<h3 id="htmlattrdefwidth">{{htmlattrdef("width")}}</h3> + +<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> + +<h2 id="Attributs_obsolètes">Attributs obsolètes</h2> + +<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> + +<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> + +<h3 id="htmlattrdefusemap">{{htmlattrdef("usemap")}}</h3> + +<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> + +<h2 id="Utiliser_les_contrôles_<input_typeimage>">Utiliser les contrôles <code><input type="image"></code></h2> + +<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> + +<h3 id="Les_fonctionnalités_essentielles">Les fonctionnalités essentielles</h3> + +<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> + +<pre class="brush: html notranslate"><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> + +<p>{{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}}</p> + +<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> + +<h3 id="Surcharger_le_comportement_par_défaut">Surcharger le comportement par défaut</h3> + +<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> + +<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> + + <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> + + <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> + +<h3 id="Utiliser_les_coordonnées_x_et_y">Utiliser les coordonnées <code>x</code> et <code>y</code></h3> + +<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> + +<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> + +<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> + +<h3 id="Ajuster_la_position_et_léchelle_de_limage">Ajuster la position et l'échelle de l'image</h3> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Un_formulaire_de_connexion">Un formulaire de connexion</h3> + +<p>Dans l'exemple suivant, on insère le bouton vu précedemment dans un formulaire de connexion.</p> + +<p>{{EmbedLiveSample('Un_formulaire_de_connexion', 600, 170)}}</p> + +<p>Voici le fragment de code HTML utilisé :</p> + +<pre class="brush: html notranslate"><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> + +<p>Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +label { + display: inline-block; + 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> + +<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> + +<p>{{EmbedLiveSample("Ajuster_la_position_et_l’échelle_de_l’image", 600, 300)}}</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><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> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; +} + +label { + display: inline-block; + width: 70px; + text-align: right; + padding-right: 10px; +} + +#image { + object-position: right top; + 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> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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> +</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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-image")}}</p> + +<h2 id="Voir_ausi">Voir ausi</h2> + +<ul> + <li>L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente.</li> +</ul> diff --git a/files/fr/web/html/element/input/index.html b/files/fr/web/html/element/input/index.html new file mode 100644 index 0000000000..5503eb8024 --- /dev/null +++ b/files/fr/web/html/element/input/index.html @@ -0,0 +1,465 @@ +--- +title: <input> +slug: Web/HTML/Element/Input +tags: + - Element + - Formulaires + - HTML + - Input + - Reference + - 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> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<h2 id="Les_différents_types_de_champs_<input>"><a id="types" name="types">Les différents types de champs <code><input></code></a></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"><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.</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> + +<h4 id="htmlattrdef(autocomplete)">{{htmlattrdef("autocomplete")}}</h4> + +<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> + +<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> + +<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> + +<h4 id="htmlattrdef(autofocus)">{{htmlattrdef("autofocus")}}</h4> + +<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> + +<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> + +<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> + +<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> + +<h4 id="htmlattrdef(disabled)">{{htmlattrdef("disabled")}}</h4> + +<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> + +<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> + +<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> + +<h4 id="htmlattrdef(form)">{{htmlattrdef("form")}}</h4> + +<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> + +<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> + +<div class="note"> +<p><strong>Note :</strong> Un champ ne peut être associé qu'à un seul formulaire.</p> +</div> + +<h4 id="htmlattrdef(list)">{{htmlattrdef("list")}}</h4> + +<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> + +<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> + +<h4 id="htmlattrdef(name)">{{htmlattrdef("name")}}</h4> + +<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> + +<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> + +<pre class="brush: js">let form = document.querySelector("form"); +let guestName = form.elements.guest; +let hatSize = form.elements["hat-size"]; +</pre> + +<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> + +<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> + +<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> + +<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> + +<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> + +<h4 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h4> + +<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> + +<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> + +<div class="blockIndicator note"> +<p><strong>Notes :</strong></p> + +<p>L'attribut <code>required</code> n'est pas autorisé sur les éléments <code><input></code> avec l'attribut <code>readonly</code>.</p> + +<p>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> + +<h4 id="htmlattrdef(required)">{{htmlattrdef("required")}}</h4> + +<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> + +<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> + +<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> + +<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> + +<h4 id="htmlattrdef(tabindex)">{{htmlattrdef("tabindex")}}</h4> + +<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> + +<p>Les valeurs de <code>tabindex</code> auront un sens différents selon leur signe :</p> + +<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> + +<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> + +<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> + +<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> + +<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> + +<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> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><p>Un élément de saisie simple </p> +<input type="text" value="Saisir un texte ici"> +</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample('Exemple_simple', '', '100')}}</p> + +<h3 id="Un_scénario_fréquent">Un scénario fréquent</h3> + +<h4 id="HTML_2">HTML</h4> + +<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> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample('Un_scénario_fréquent', '', '200')}}</p> + +<h2 id="Localisation">Localisation</h2> + +<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> + +<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> + +<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> + +<h2 id="Accessibilité">Accessibilité</h2> + +<h3 id="Utilisation_de_libellés">Utilisation de libellés</h3> + +<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> + +<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> + +<pre><label for="ptipois">Aimez-vous les petits-pois ?</label> +<input type="checkbox" name="petitspois" id="ptipois"> +</pre> + +<h3 id="Dimensionnement_-_taille">Dimensionnement - taille</h3> + +<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> + +<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> + +<h2 id="Notes">Notes</h2> + +<h3 id="Messages_personnalisés_pour_les_erreurs">Messages personnalisés pour les erreurs</h3> + +<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> + +<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> + +<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> + +<p>Si on souhaite plutôt afficher un message d'erreur personnalisé, on pourra utiliser un fragment de code JavaScript comme celui-ci :</p> + +<pre class="brush: js">const nameInput = document.querySelector('input'); +const form = document.querySelector('form'); + +nameInput.addEventListener('input', () => { + nameInput.setCustomValidity(''); + nameInput.checkValidity(); +}); + +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> + +<p>{{EmbedLiveSample("Messages_personnalisés_pour_les_erreurs")}}</p> + +<p>Voici un récapitulatif de la logique de cet exemple :</p> + +<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> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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> +</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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/month/index.html b/files/fr/web/html/element/input/month/index.html new file mode 100644 index 0000000000..f32b084bff --- /dev/null +++ b/files/fr/web/html/element/input/month/index.html @@ -0,0 +1,465 @@ +--- +title: <input type="month"> +slug: Web/HTML/Element/Input/month +tags: + - Element + - Input + - Reference +translation_of: Web/HTML/Element/input/month +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">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.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}</div> + +<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> + +<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> + +<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> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15391/month-control-chrome.png" style="display: block; height: 216px; margin: 0px auto; width: 273px;"></p> + +<p>Voici un aperçu du contrôle sous Edge :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15393/month-control-edge.png" style="display: block; height: 389px; margin: 0px auto; width: 227px;"></p> + +<h2 id="Valeur">Valeur</h2> + +<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> + +<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> + +<div id="value-example-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> + +<p>{{EmbedLiveSample('value-example-1', 600, 60)}}</p> +</div> + +<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> + +<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> + +<p>Il est également possible de manipuler la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p> + +<div id="value-example-2"> +<div class="hidden"> +<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> +</div> + +<pre class="brush: js">var monthControl = document.querySelector('input[type="month"]'); +monthControl.value = '1978-06';</pre> + +<p>{{EmbedLiveSample("value-example-2", 600, 60)}}</p> +</div> + +<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 pour les mois 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>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> + +<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> + +<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> + +<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> + +<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> + +<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> + +<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> + +<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3> + +<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> + +<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> + +<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<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> + +<h2 id="Utiliser_<input_typemonth>">Utiliser <code><input type="month"></code></h2> + +<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> + +<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> + +<h3 id="Utilisation_simple">Utilisation simple</h3> + +<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> + +<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> + +<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p> + +<h3 id="Indiquer_une_date_maximale_et_une_date_minimale">Indiquer une date maximale et une date minimale</h3> + +<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> + +<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> + +<p>{{EmbedLiveSample('Indiquer_une_date_maximale_et_une_date_minimale', 600, 40)}}</p> + +<p>Grâce ce fragment de code :</p> + +<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> + +<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> + +<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> + +<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> + +<h2 id="Validation">Validation</h2> + +<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> + +<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> + +<p>Prenons un exemple avec une période délimitée et un champ obligatoire :</p> + +<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> + +<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> + +<p>{{EmbedLiveSample('Validation', 600, 120)}}</p> + +<p>Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15395/month-required.png" style="display: block; margin: 0 auto;"></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> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<div 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> + +<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> + +<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> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15397/month-android.png" style="display: block; margin: 0 auto;"></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> + +<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> + +<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> + +<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> + +<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" + 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> + +<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p> + +<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> + +<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> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<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> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<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> + +<pre class="brush: js">// On définit des variables +var nativePicker = document.querySelector('.nativeDatePicker'); +var fallbackPicker = document.querySelector('.fallbackDatePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var monthSelect = document.querySelector('#month'); + +// Par défaut on masque le sélecteur alternatif +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// On teste si un nouveau contrôle est automatiquement +// converti en un champ texte +var test = document.createElement('input'); +test.type = 'month'; +// Si c'est le cas, on exécute le code dans ce bloc if +if(test.type === 'text') { + // on masque le sélecteur natif et on masque le sélecteur alternatif + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // on génère les valeurs pour les années + populateYears(); +} + +function populateYears() { + // On récupère l'année courante + var date = new Date(); + 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++) { + 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> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-month")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/number/index.html b/files/fr/web/html/element/input/number/index.html new file mode 100644 index 0000000000..e134aa2a77 --- /dev/null +++ b/files/fr/web/html/element/input/number/index.html @@ -0,0 +1,432 @@ +--- +title: <input type="number"> +slug: Web/HTML/Element/Input/number +tags: + - Element + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/number +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">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.</span> 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="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> + +<div class="note"> +<p><strong>Note </strong>: 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> + +<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> + +<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> + +<p>Cette valeur doit être supérieure ou égale à l'attribut <code>min</code>.</p> + +<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> + +<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> + +<p>Cette valeur doit être inférieure ou égale à l'attribut <code>max</code>.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> + +<div id="step-include"> +<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> + +<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> + +<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> +</div> + +<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> + +<h2 id="Utiliser_les_contrôles_de_saisie_numérique">Utiliser les contrôles de saisie numérique</h2> + +<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> + +<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> + +<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> + +<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> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14963/number-keyboard-fxa.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<h3 id="Un_contrôle_simple">Un contrôle simple</h3> + +<p>Dans sa forme la plus simple, on peut implémenter un contrôle de saisie numérique avec le fragment HTML suivant :</p> + +<pre class="brush: html"><label for="ticketNum">Nombre de tickets à acheter :</label> +<input id="ticketNum" type="number" name="ticketNum" value="0"></pre> + +<p>{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}</p> + +<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> + +<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> + +<h3 id="Indicateurs_de_saisie_-_placeholders">Indicateurs de saisie - <em>placeholders</em></h3> + +<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> + +<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> + +<pre class="brush: html"><input type="number" placeholder="Multiple de 10"></pre> + +<p>{{ EmbedLiveSample('Indicateurs_de_saisie_-_placeholders', 600, 40) }}</p> + +<h3 id="Paramétrer_la_taille_de_l’incrément">Paramétrer la taille de l’incrément</h3> + +<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> + +<pre class="brush: html"><input type="number" placeholder="Multiple de 10" step="10"></pre> + +<p>{{EmbedLiveSample("Paramétrer_la_taille_de_l’incrément", 600, 40)}}</p> + +<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> + +<h3 id="Indiquer_un_minimum_et_un_maximum">Indiquer un minimum et un maximum</h3> + +<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> + +<pre class="brush: html"><input type="number" placeholder="Multiple de 10" step="10" min="0" max="100"></pre> + +<p>{{EmbedLiveSample('Indiquer_un_minimum_et_un_maximum', 600, 40)}}</p> + +<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> + +<h3 id="Autoriser_les_valeurs_décimales">Autoriser les valeurs décimales</h3> + +<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> + +<pre class="brush: html"><input type="number" placeholder="1.0" step="0.01" min="0" max="10"></pre> + +<p>{{EmbedLiveSample("Autoriser_les_valeurs_décimales", 600, 40)}}</p> + +<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> + +<h3 id="Paramétrer_la_taille_du_contrôle">Paramétrer la taille du contrôle</h3> + +<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> + +<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> + +<pre class="brush: html"><input type="number" placeholder="x10" step="10" min="0" max="100" id="number"></pre> + +<p>On ajoute ensuite une déclaration CSS dans la feuille de style pour l'élément avec un identifiant <code>"number"</code> :</p> + +<pre class="brush: css">#number { + width: 3em; +}</pre> + +<p>Le résultat ressemblera à :</p> + +<p>{{EmbedLiveSample('Paramétrer_la_taille_du_contrôle', 600, 40)}}</p> + +<h3 id="Ajouter_des_valeurs_suggérées">Ajouter des valeurs suggérées</h3> + +<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> + +<pre class="brush: 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> + +<p>{{EmbedLiveSample("Ajouter_des_valeurs_suggérées", 600, 40)}}</p> + +<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> + +<h2 id="Validation">Validation</h2> + +<p>Plusieurs mécanismes de validation sont mis en place par le navigateur pour les contrôles de saisie numérique :</p> + +<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> + +<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> + +<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> + +<p>{{EmbedLiveSample("Validation", 600, 80)}}</p> + +<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> + +<p>Voici les règles CSS appliquées :</p> + +<pre class="brush: css">div { + margin-bottom: 10px; +} + +input:invalid+span:after { + content: '✖'; + padding-left: 5px; +} + +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> + +<div class="warning"> +<p><strong>Important </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> + +<h3 id="Utilisation_d'un_motif_de_validation">Utilisation d'un motif de validation</h3> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<p>{{EmbedLiveSample("Exemples", 600, 100)}}</p> + +<h3 id="HTML">HTML</h3> + +<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> + <div class="feetInputGroup" style="display: none;"> + <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> + +<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> + +<p>Par défaut on masque la saisie en pieds avec <code>style="display: none;"</code>.</p> + +<h3 id="CSS">CSS</h3> + +<p>La feuille CSS ressemble de près à celle vue précédemment :</p> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>Enfin, voici le code JavaScript utilisé :</p> + +<pre class="brush: js">var metersInputGroup = document.querySelector('.metersInputGroup'); +var feetInputGroup = document.querySelector('.feetInputGroup'); +var metersInput = document.querySelector('#meters'); +var feetInput = document.querySelector('#feet'); +var inchesInput = document.querySelector('#inches'); +var switchBtn = document.querySelector('input[type="button"]'); + +switchBtn.addEventListener('click', function() { + if(switchBtn.getAttribute('class') === 'meters') { + switchBtn.setAttribute('class', 'feet'); + switchBtn.value = 'Saisir la taille en mètres'; + + metersInputGroup.style.display = 'none'; + feetInputGroup.style.display = 'block'; + + feetInput.setAttribute('required', ''); + inchesInput.setAttribute('required', ''); + metersInput.removeAttribute('required'); + + metersInput.value = ''; + } else { + switchBtn.setAttribute('class', 'meters'); + switchBtn.value = 'Saisir la taille en pieds'; + + metersInputGroup.style.display = 'block'; + feetInputGroup.style.display = 'none'; + + feetInput.removeAttribute('required'); + inchesInput.removeAttribute('required'); + metersInput.setAttribute('required', ''); + + 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> + +<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> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<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> +</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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-number")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/password/index.html b/files/fr/web/html/element/input/password/index.html new file mode 100644 index 0000000000..e9262a6d46 --- /dev/null +++ b/files/fr/web/html/element/input/password/index.html @@ -0,0 +1,289 @@ +--- +title: <input type="password"> +slug: Web/HTML/Element/Input/password +tags: + - Formulaires + - HTML + - Input + - Reference + - 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> + +<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> + +<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>Note : 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> + +<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> + +<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> + +<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> + +<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> + +<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> + +<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> + +<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<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> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3> + +<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> + +<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> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h2 id="Utiliser_les_contrôles_de_saisie_de_mot_de_passe">Utiliser les contrôles de saisie de mot de passe</h2> + +<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> + +<h3 id="Un_contrôle_basique">Un contrôle basique</h3> + +<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> + +<pre class="brush: html"><label for="userPassword">Mot de passe :</label> +<input id="userPassword" type="password"></pre> + +<p>{{EmbedLiveSample("Un_contrôle_basique", 600, 40)}}</p> + +<h3 id="Paramétrer_l’autocomplétion">Paramétrer l’autocomplétion</h3> + +<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> + +<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> + +<div id="Autocomplete_sample1"> +<pre class="brush: html"><label for="userPassword">Mot de passe :</label> +<input id="userPassword" type="password" autocomplete="current-password"></pre> +</div> + +<p>{{EmbedLiveSample("Paramétrer_l’autocomplétion", 600, 40)}}</p> + +<h3 id="Rendre_le_champ_obligatoire">Rendre le champ obligatoire</h3> + +<p>Pour indiquer à l'utilisateur que le mot de passe est obligatoire, on pourra utiliser l'attribut {{htmlattrxref("required", "input")}}.</p> + +<pre class="brush: html"><label for="userPassword">Mot de passe :</label> +<input id="userPassword" type="password" required></pre> + +<p>{{EmbedLiveSample("Rendre_le_champ_obligatoire", 600, 40)}}</p> + +<h3 id="Définir_un_mode_de_saisie">Définir un mode de saisie</h3> + +<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> + +<pre class="brush: html"><label for="pin">PIN :</label> +<input id="pin" type="password" inputmode="numeric"></pre> + +<p>{{EmbedLiveSample("Définir_un_mode_de_saisie", 600, 40)}}</p> + +<h3 id="Indiquer_des_critères_de_longueur">Indiquer des critères de longueur</h3> + +<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> + +<pre class="brush: html"><label for="pin">PIN :</label> +<input id="pin" type="password" inputmode="numeric" minlength="4" + maxlength="8" size="8"></pre> + +<p>{{EmbedLiveSample("Indiquer_des_critères_de_longueur", 600, 40)}}</p> + +<h3 id="Sélectionner_le_texte_saisi">Sélectionner le texte saisi</h3> + +<p>Il est possible d'utiliser la méthode {{domxref("HTMLInputElement.select", "select()")}} pour sélectionner le texte saisi dans le contrôle.</p> + +<h4 id="HTML">HTML</h4> + +<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> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">document.getElementById("selectAll").onclick = function(event) { + document.getElementById("userPassword").select(); +}</pre> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Sélectionner_le_texte_saisi", 600, 40)}}</p> + +<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> + +<h2 id="Validation">Validation</h2> + +<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> + +<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> + +<div id="Validation_sample1"> +<pre class="brush: 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> +</div> + +<p>{{EmbedLiveSample("Validation", 600, 40)}}</p> + +<h2 id="Désactiver_le_champ">Désactiver le champ</h2> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<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> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: 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> + +<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> + +<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> + +<h4 id="Résultat_2">Résultat</h4> + +<p>{{EmbedLiveSample("Saisir_un_numéro_de_sécurité_sociale_américain_comme_mot_de_passe", 600, 60)}}</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-password")}}</p> diff --git a/files/fr/web/html/element/input/radio/index.html b/files/fr/web/html/element/input/radio/index.html new file mode 100644 index 0000000000..5370a19374 --- /dev/null +++ b/files/fr/web/html/element/input/radio/index.html @@ -0,0 +1,357 @@ +--- +title: <input type="radio"> +slug: Web/HTML/Element/Input/radio +tags: + - Formulaires + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/radio +--- +<div>{{HTMLRef}}</div> + +<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> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-radio.html", "tabbed-standard")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<p>On les appelle boutons radios par analogie avec les boutons qui étaient utilisés sur les anciens postes de radios.</p> + +<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> + +<h2 id="Valeur">Valeur</h2> + +<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> + +<h3 id="Définir_un_groupe_de_boutons_radio">Définir un groupe de boutons radio</h3> + +<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> + +<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> + +<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> + +<p>Voici le fragment de code HTML correspondant à cet exemple :</p> + +<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> + + <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> + +<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> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample('Définir_un_groupe_de_boutons_radio', 600, 130)}}</p> + +<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> + +<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> + +<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> + +<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> + +<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> + +<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> + +<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> + + <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> +</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> + +<pre class="brush: js">var form = document.querySelector("form"); +var log = document.querySelector("#log"); + +form.addEventListener("submit", function(event) { + var data = new FormData(form); + var output = ""; + for (const entry of data) { + output = entry[0] + "=" + entry[1] + "\r"; + }; + 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> + +<h3 id="htmlattrdef(checked)">{{htmlattrdef("checked")}}</h3> + +<p>Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.<span><a id="cke_1832" title="Delete Rows"></a></span></p> + +<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> + +<h3 id="htmlattrdef(value)">{{htmlattrdef("value")}}</h3> + +<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> + +<h2 id="Utiliser_les_boutons_radio">Utiliser les boutons radio</h2> + +<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> + +<h3 id="Sélectionner_un_bouton_radio_par_défaut">Sélectionner un bouton radio par défaut</h3> + +<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> + +<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> + + <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> + +<p>{{EmbedLiveSample('Sélectionner_un_bouton_radio_par_défaut', 600, 130)}}</p> + +<p>Ici, c'est le premier bouton radio qui sera sélectionné par défaut.</p> + +<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> + +<h3 id="Fournir_une_plus_grande_zone_de_sélection">Fournir une plus grande zone de sélection</h3> + +<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> + +<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> + +<h2 id="Validation">Validation</h2> + +<p>Il n'existe pas de contrainte de validation particulière pour les boutons radio.</p> + +<h2 id="Mettre_en_forme_les_boutons_radio">Mettre en forme les boutons radio</h2> + +<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> + +<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> + + <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> + </fieldset> +</form></pre> + +<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> + +<p>La feuille de style CSS utilisée est la suivante :</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +div:first-of-type { + display: flex; + align-items: flex-start; + margin-bottom: 5px; +} + +label { + margin-right: 15px; + line-height: 32px; +} + +input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + + border-radius: 50%; + width: 16px; + height: 16px; + + border: 2px solid #999; + transition: 0.2s all linear; + margin-right: 5px; + + position: relative; + top: 4px; +} + +input:checked { + border: 6px solid black; +} + +button, +legend { + color: white; + background-color: black; + padding: 5px 10px; + border-radius: 0; + border: 0; + font-size: 14px; +} + +button:hover, +button:focus { + color: #999; +} + +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> + +<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> + +<p>{{EmbedLiveSample('Mettre_en_forme_les_boutons_radio', 600, 120)}}</p> + +<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> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères {{domxref("DOMString")}} qui représente 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-radio")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/range/index.html b/files/fr/web/html/element/input/range/index.html new file mode 100644 index 0000000000..61acbc913c --- /dev/null +++ b/files/fr/web/html/element/input/range/index.html @@ -0,0 +1,382 @@ +--- +title: <input type="range"> +slug: Web/HTML/Element/Input/range +tags: + - Element + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/range +--- +<div>{{HTMLRef}}</div> + +<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> + +<p>{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}</p> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<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> + +<h2 id="Valeur">Valeur</h2> + +<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> + +<pre class="brush: js">defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min + : rangeElem.min + (rangeElem.max - rangeElem.min)/2;</pre> + +<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> + +<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 intervalles 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 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> + +<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> + +<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> + +<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> + +<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> + +<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> + +<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> + +<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<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> + +<h2 id="Utiliser_les_intervalles">Utiliser les intervalles</h2> + +<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> + +<p>Voici quelques scénarios où un intervalle de saisie est plus pertinent :</p> + +<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> + +<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> + +<h3 id="Indiquer_le_minimum_et_le_maximum">Indiquer le minimum et le maximum</h3> + +<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> + +<p>Par exemple, afin de demander à un utilisateur de choisir une valeur approximative dans l'intervalle [-10 , 10], on pourra utiliser :</p> + +<pre class="brush: html"><input type="range" min="-10" max="10"></pre> + +<p>{{EmbedLiveSample("Indiquer_le_minimum_et_le_maximum", 600, 40)}}</p> + +<h3 id="Définir_la_granularité">Définir la granularité</h3> + +<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> + +<div id="Granularity_sample1"> +<pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> + +<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> +</div> + +<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> + +<div id="Granularity_sample2"> +<pre class="brush: html"><input type="range" min="0" max="3.14" step="any"></pre> + +<p>{{EmbedLiveSample("Granularity_sample2", 600, 40)}}</p> + +<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> + +<h3 id="Ajouter_des_marques_et_des_étiquettes">Ajouter des marques et des étiquettes</h3> + +<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> + +<h4 id="Aperçus">Aperçus</h4> + +<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> + +<h5 id="Un_contrôle_sans_marque">Un contrôle sans marque</h5> + +<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> + +<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="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14989/macslider-plain.png" style="height: 28px; width: 184px;"></td> + </tr> + </tbody> +</table> + +<h5 id="Un_contrôle_avec_des_marques">Un contrôle avec des marques</h5> + +<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> + +<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="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14991/macslider-ticks.png" style="height: 28px; width: 184px;"></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> + +<p>Il est possible d'ajouter des étiquettes grâce à l'attribut {{htmlattrxref("label", "option")}} des éléments {{HTMLElement("option")}} correspondants aux marques.</p> + +<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="Screenshot of a plain slider control on macOS" src="https://mdn.mozillademos.org/files/14993/macslider-labels.png" style="height: 44px; width: 184px;"></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> + +<h3 id="Modifier_l'orientation_du_curseur">Modifier l'orientation du curseur</h3> + +<div class="hidden"> +<p>Par défaut, le contrôle est affiché horizontalement dans le navigateur (le curseur se déplace de gauche à droite). Il est toutefois possible de tourner le contrôle avec CSS.</p> + +<div class="note"> +<p><strong>Note :</strong> Actuellement, cela n'est pas implémenté par les navigateurs (voir {{bug(981916)}} pour Firefox et le <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=341071">bug 341071</a> pour Chrome).</p> +</div> + +<p>Par exemple :</p> + +<div id="Orientation_sample1"> +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> +</div> + +<p>{{EmbedLiveSample("Orientation_sample1", 200, 200, "https://mdn.mozillademos.org/files/14983/Orientation_sample1.png")}}</p> + +<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> + +<div id="Orientation_sample2"> +<h4 id="CSS">CSS</h4> + +<pre class="brush: css">#volume { + height: 150px; + width: 50px; +}</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> + +<h4 id="Result">Result</h4> + +<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> + +<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> +</div> +</div> + +<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> + +<div id="Orientation_sample3"> +<h4 id="HTML_2">HTML</h4> + +<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> + +<pre class="brush: html"><div class="slider-wrapper"> + <input type="range" min="0" max="11" value="7" step="1"> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<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> + +<pre class="brush: 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> : + +<pre class="brush: 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> + +<h4 id="Résultat">Résultat</h4> + +<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> +</div> + +<h2 id="Validation">Validation</h2> + +<p>Il n'existe pas de motif de validation. Cependant, voici les formes de validation automatiques qui sont appliquées :</p> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<p>Pour compléter les exemples précédents, on pourra consulter l'article suivant :</p> + +<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> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-range")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/reset/index.html b/files/fr/web/html/element/input/reset/index.html new file mode 100644 index 0000000000..d06649fce1 --- /dev/null +++ b/files/fr/web/html/element/input/reset/index.html @@ -0,0 +1,171 @@ +--- +title: <input type="reset"> +slug: Web/HTML/Element/Input/reset +tags: + - Element + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/reset +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">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.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<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> + +<h2 id="Valeur">Valeur</h2> + +<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> + +<div id="summary-example3"> +<pre class="brush: html"><input type="reset" value="Réinitialiser le formulaire"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> + +<p>Si aucune valeur n'est indiquée, le bouton aura le texte par défaut « Réinitialiser » :</p> + +<div id="summary-example1"> +<pre class="brush: html"><input type="reset"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> + +<h2 id="Utiliser_les_boutons_de_réinitialisation">Utiliser les boutons de réinitialisation</h2> + +<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> + +<h3 id="Un_bouton_simple">Un bouton simple</h3> + +<p>Commençons par créer un bouton de réinitialisation simple :</p> + +<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> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}</p> + +<p>Pour essayer, saisissez un peu de texte dans le champ puis appuyez sur le bouton de réinitialisation.</p> + +<h3 id="Ajouter_un_raccourci_au_bouton">Ajouter un raccourci au bouton</h3> + +<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> + +<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> + +<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> + +<p>{{EmbedLiveSample("Ajouter_un_raccourci_au_bouton", 650, 100)}}</p> + +<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> + +<h3 id="DésactiverActiver_un_bouton">Désactiver/Activer un bouton</h3> + +<p>Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribut {{htmlattrxref("disabled")}} sur l'élément :</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="reset" value="Désactivé" disabled></pre> +</div> + +<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> + +<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> + +<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> + +<h2 id="Validation">Validation</h2> + +<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> + + +<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> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<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> +</table> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-reset")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/search/index.html b/files/fr/web/html/element/input/search/index.html new file mode 100644 index 0000000000..c5818deb6e --- /dev/null +++ b/files/fr/web/html/element/input/search/index.html @@ -0,0 +1,460 @@ +--- +title: <input type="search"> +slug: Web/HTML/Element/Input/search +tags: + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/search +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">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. </span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div> + +<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> + +<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> + +<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> + +<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du 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> + +<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> + +<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du 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> + +<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>Voir <a href="#format">la section sur l'utilisation de cet attribut ci-après</a> pour plus d'exemples.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h3 id="htmlattrdef(spellcheck)">{{htmlattrdef("spellcheck")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck-include")}}</p> + +<h2 id="Attributs_non-standard">Attributs non-standard</h2> + +<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> + +<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> + +<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> + +<h3 id="htmlattrdef(incremental)_non-standard_inline">{{htmlattrdef("incremental")}} {{non-standard_inline}}</h3> + +<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> + +<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> + +<p>La fréquence maximale à laquelle l'évènement <code>search</code> est envoyé est définie par chaque implémentation.</p> + +<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> + +<h3 id="htmlattrdef(results)_non-standard_inline">{{htmlattrdef("results")}} {{non-standard_inline}}</h3> + +<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> + +<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> + +<h2 id="Utiliser_un_champ_de_recherche">Utiliser un champ de recherche</h2> + +<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> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<pre class="brush: html"><form> + <div> + <input type="search" id="maRecherche" name="q"> + <button>Rechercher</button> + </div> +</form></pre> + +<p>Cet exemple produira le résultat suivant :</p> + +<p>{{EmbedLiveSample("Exemple_simple", 600, 40)}}</p> + +<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> + +<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> + +<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> + +<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> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15235/chrome-cross-icon.png" style="display: block; height: 31px; margin: 0px auto; width: 144px;"></p> + +<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="https://mdn.mozillademos.org/files/15237/firefox-auto-complete.png" style="display: block; height: 83px; margin: 0px auto; width: 171px;"></p> + +<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> + +<pre class="brush: html"><form> + <div> + <input type="search" id="maRecherche" name="q" + placeholder="Rechercher sur le site…"> + <button>Rechercher</button> + </div> +</form></pre> + +<p>Voici le résultat obtenu avec ce fragment HTML :</p> + +<p>{{EmbedLiveSample("Ajouter_un_texte_indicatif", 600, 40)}}</p> + +<h3 id="Les_champs_de_recherche_et_l’accessibilité">Les champs de recherche et l’accessibilité</h3> + +<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> + +<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> + +<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> + +<p>Prenons un exemple :</p> + +<pre class="brush: 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> + +<p>Voici le résultat obtenu grâce à ce fragment de HTML :</p> + +<p>{{EmbedLiveSample("Les_champs_de_recherche_et_l’accessibilité", 600, 40)}}</p> + +<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> + +<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> + +<h3 id="Paramétrer_la_taille_physique">Paramétrer la taille physique</h3> + +<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> + +<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> + +<p>{{EmbedLiveSample('Paramétrer_la_taille_physique', 600, 40)}}</p> + +<h2 id="Validation">Validation</h2> + +<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> + +<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> + +<h3 id="Une_note_sur_la_mise_en_forme">Une note sur la mise en forme</h3> + +<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> + +<pre class="brush: css">input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +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> + +<h3 id="Rendre_le_champ_obligatoire">Rendre le champ obligatoire</h3> + +<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> + +<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> + +<div class="hidden"> +<pre class="brush: css">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample('Rendre_le_champ_obligatoire', 600, 40)}}</p> + +<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> + +<p><img alt="form field with attached message that says Please fill out this field" src="https://mdn.mozillademos.org/files/15241/firefox-required-message.png" style="display: block; margin: 0 auto;"></p> + +<p>Différents messages peuvent être affichés selon le type d'erreur liée à la saisie.</p> + +<h3 id="Contraindre_la_taille_de_la_valeur_saisie">Contraindre la taille de la valeur saisie</h3> + +<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> + +<p>Dans l'exemple qui suit, la valeur saisie dans le champ de recherche doit mesurer entre 4 et 8 caractères.</p> + +<pre class="brush: 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> + +<div class="hidden"> +<pre class="brush: css">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>Voici le résultat obtenu avec ce fragment de code HTML :</p> + +<p>{{EmbedLiveSample('Contraindre_la_taille_de_la_valeur_saisie', 600, 40)}}</p> + +<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> + +<h3 id="Indiquer_un_motif">Indiquer un motif</h3> + +<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> + +<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> + +<pre class="brush: 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> + +<div class="hidden"> +<pre class="brush: css">input { + margin-right: 10px; +} + +input:invalid ~ span:after { + content: '✖'; + padding-left: 5px; + position: absolute; +} + +input:valid ~ span:after { + content: '✓'; + padding-left: 5px; + position: absolute; +}</pre> +</div> + +<p>Voici le résultat obtenu avec ce fragment HTML :</p> + +<p>{{EmbedLiveSample('Indiquer_un_motif', 600, 40)}}</p> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-search")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/submit/index.html b/files/fr/web/html/element/input/submit/index.html new file mode 100644 index 0000000000..92276de492 --- /dev/null +++ b/files/fr/web/html/element/input/submit/index.html @@ -0,0 +1,275 @@ +--- +title: <input type="submit"> +slug: Web/HTML/Element/Input/submit +tags: + - Element + - Formulaire + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/submit +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">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.</span></p> + +<div id="summary-example2"> +<pre class="brush: html"><input type="submit" value="Envoyer le formulaire"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example2", 650, 30)}}</p> + +<h2 id="Valeur">Valeur</h2> + +<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> + +<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> + +<div id="summary-example1"> +<pre class="brush: html"><input type="submit"></pre> +</div> + +<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</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>"submit"</code> permettent d'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("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> + +<h3 id="htmlattrdef(formaction)">{{htmlattrdef("formaction")}}</h3> + +<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> + +<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> + +<h3 id="htmlattrdef(formenctype)">{{htmlattrdef("formenctype")}}</h3> + +<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> + +<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> + +<p>Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.</p> + +<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> + +<h3 id="htmlattrdef(formmethod)">{{htmlattrdef("formmethod")}}</h3> + +<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> + +<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> + +<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> + +<h3 id="htmlattrdef(formnovalidate)">{{htmlattrdef("formnovalidate")}}</h3> + +<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> + +<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> + +<h3 id="htmlattrdef(formtarget)">{{htmlattrdef("formtarget")}}</h3> + +<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> + +<p>En complément des noms des onglets, fenêtres, <em>iframes</em>, quelques mots-clés spéciaux peuvent être utilisés :</p> + +<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> + +<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> + +<h2 id="Utiliser_les_boutons_d'envoi">Utiliser les boutons d'envoi</h2> + +<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> + +<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> + +<h3 id="Un_bouton_pour_envoyer_simple">Un bouton pour envoyer simple</h3> + +<p>Commençons par un exemple simple :</p> + +<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> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample("Un_bouton_pour_envoyer_simple", 650, 100)}}</p> + +<p>Pour tester, vous pouvez saisir un texte dans le champ puis cliquer sur le bouton.</p> + +<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> + +<h3 id="Ajouter_un_raccourci_clavier">Ajouter un raccourci clavier</h3> + +<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> + +<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> + +<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> + +<p>{{EmbedLiveSample("Ajouter_un_raccourci_clavier", 650, 100)}}</p> + +<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> + +<h3 id="Activer_et_désactiver_un_bouton_d'envoi">Activer et désactiver un bouton d'envoi</h3> + +<p>Si on souhaite désactiver un bouton, il sufft d'utiliser l'attribut booléen universel {{htmlattrxref("disabled")}} :</p> + +<div id="disable-example1"> +<pre class="brush: html"><input type="submit" value="Disabled" disabled></pre> +</div> + +<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> + +<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> + +<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> + +<h2 id="Validation">Validation</h2> + +<p>Il n'existe pas de mécanisme de validation natif côté client pour les boutons d'envoi de formulaires.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Voir les exemples ci-avant.</p> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-submit")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/tel/index.html b/files/fr/web/html/element/input/tel/index.html new file mode 100644 index 0000000000..a0cade3b39 --- /dev/null +++ b/files/fr/web/html/element/input/tel/index.html @@ -0,0 +1,513 @@ +--- +title: <input type="tel"> +slug: Web/HTML/Element/Input/tel +tags: + - Element + - Formulaires + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/tel +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"tel"</strong></code> permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour <code><a href="/fr/docs/Web/HTML/Element/input/email"><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.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</div> + +<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> + +<div class="note"> +<p><strong>Note :</strong> Les navigateurs qui ne prennent pas en charge le type <code>"tel"</code> utiliseront à la place un contrôle de type <code><a href="/fr/docs/Web/HTML/Element/input/text">"text"</a></code>.</p> +</div> + +<h2 id="Valeur">Valeur</h2> + +<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui peut prendre l'une de ces deux valeurs :</p> + +<ol> + <li>Une chaîne vide ("") qui indique que l'utilisateur n'a saisi aucune valeur ou que celle-ci a été supprimée.</li> + <li>Une chaîne de caractères représentant un numéro de téléphone.</li> +</ol> + +<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> + +<p>In addition to the attributes that operate on all {{HTMLElement("input")}} elements regardless of their type, telephone number inputs support the following attributes:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribut</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("maxlength")}}</code></td> + <td>Le nombre de caractères maximal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ.</td> + </tr> + <tr> + <td><code>{{anch("minlength")}}</code></td> + <td>Le nombre de caractères minimal, exprimé en points de code UTF-16, qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.</td> + </tr> + <tr> + <td><code>{{anch("pattern")}}</code></td> + <td>Une expression rationnelle à laquelle doit correspondre le numéro de téléphone saisi pour être valide.</td> + </tr> + <tr> + <td><code>{{anch("placeholder")}}</code></td> + <td>Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.</td> + </tr> + <tr> + <td><code>{{anch("readonly")}}</code></td> + <td>Un attribut booléen qui indique si le contenu du champ est en lecture seule.</td> + </tr> + <tr> + <td><code>{{anch("size")}}</code></td> + <td>Un nombre qui indique le nombre de caractères affichés par le champ.</td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefmaxlength">{{htmlattrdef("maxlength")}}</h3> + +<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du numéro de téléphone dépasse <code>maxlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> + +<h3 id="htmlattrdefminlength">{{htmlattrdef("minlength")}}</h3> + +<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du numéro de téléphone est inférieure à <code>minlength</code> en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.</p> + +<h3 id="htmlattrdefpattern">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>Voir <a href="#format">la section format</a> ci-après pour plus détails et d'exemples.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<h2 id="Attributs_non-standard">Attributs non-standard</h2> + +<p>Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Attribute</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>{{anch("autocorrect")}}</code></td> + <td>Indique si la correction automatique doit être appliquée à ce champ texte. <strong>Uniquement pris en charge par Safari.</strong></td> + </tr> + <tr> + <td><code>{{anch("mozactionhint")}}</code></td> + <td>Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche <kbd>Entrée</kbd> ou <kbd>Retour</kbd> lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. <strong>Uniquement pris en charge par Firefox pour Android.</strong></td> + </tr> + </tbody> +</table> + +<h3 id="htmlattrdefautocorrect_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> + +<h3 id="htmlattrdefmozactionhint_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> + +<h2 id="Utiliser_<input_typetel>">Utiliser <code><input type="tel"></code></h2> + +<p>Les numéros de téléphone peuvent jouer un rôle important dans certains formulaires web. Un site de commerce en ligne, par exemple, peut vouloir enregistrer le numéro de téléphone d'un utilisateur pour le contacter lors de la livraison. Toutefois, un des problèmes relatifs aux numéros de téléphone est la variété de formats qui existent à travers le monde. Il est donc difficile (voire impossible) de valider les valeurs automatiquement.</p> + +<div class="note"> +<p><strong>Note</strong> : Des mécanismes de validation particuliers peuvent être ajoutés si besoin (cf. {{anch("Validation")}} ci-après).</p> +</div> + +<h3 id="Claviers_adaptés">Claviers adaptés</h3> + +<p>L'un des avantages des contrôles de type <code>tel</code> est qu'ils permettent aux navigateurs mobiles de proposer un clavier adapté à la saisie de numéros de téléphone. Voici par exemple le clavier obtenu avec Firefox pour Android :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15441/fx-android-tel.png" style="border-style: solid; border-width: 1px; display: block; height: 640px; margin: 0px auto; width: 360px;"></p> + +<h3 id="Un_contrôle_simple">Un contrôle simple</h3> + +<p>Dans sa forme la plus simple, on peut implémenter un tel contrôle avec ce fragment HTML :</p> + +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel"></pre> + +<p>{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}</p> + +<p>Rien de bien surprenant ici. Lorsque les données seront envoyées au serveur, elles auront la forme <code>telNo=0123456789</code>.</p> + +<h3 id="Textes_indicatifs_-_placeholders">Textes indicatifs - <em>placeholders</em></h3> + +<p>Il est parfois utile de fournir une indication quant au format attendu. Or, il est possible que la disposition de la page ne permette pas de fournir des étiquettes détaillées. C'est pourquoi on peut utiliser des textes indicatifs via l'attribut <code>placeholder</code>. Ces valeurs seront affichées dans le champ et disparaîtront dès que l'utilisateur saisira quelque chose (et réapparaîtront si la valeur redevient vide). Un tel texte indicatif doit servir de suggestion quant au format souhaité.</p> + +<p>Dans l'exemple suivant, on a un contrôle <code>"tel"</code> avec un attribut <code>placeholder</code> qui vaut <code>"01 23 45 67 89"</code>. Vous pouvez manipuler le résultat obtenu pour voir comment ce texte est affiché selon qu'une valeur saisie ou que le champ est vide :</p> + +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" + placeholder="01 23 45 67 89"></pre> + +<p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p> + +<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> + +<p>On peut contrôler la taille physique allouée au contrôle ainsi que les longueurs minimale et maximale autorisées pour le texte saisi dans le contrôle.</p> + +<h4 id="La_taille_physique">La taille physique</h4> + +<p>La taille physique de la boîte de saisie peut être contrôlée avec l'attribut {{htmlattrxref("size", "input")}}. La valeur de cet attribut indique le nombre de caractères que la boîte peut afficher simultanément. Si, par exemple, on souhaite que le contrôle mesure 20 caractères de large, on pourra utiliser le code suivant :</p> + +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" + size="20"></pre> + +<p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</p> + +<h4 id="La_longueur_de_la_valeur">La longueur de la valeur</h4> + +<p>L'attribut <code>size</code> ne contraint pas la taille de la valeur qui peut être saisie dans le contrôle. Si on souhaite avoir une longueur minimale (en nombre de caractères), on pourra utiliser l'attribut {{htmlattrxref("minlength", "input")}}. De même, si on souhaite qu'un numéro de téléphone valide mesure au maximum X caractères, on pourra employer l'attribut {{htmlattrxref("maxlength", "input")}}.</p> + +<p>Dans l'exemple qui suit, on crée un contrôle qui mesure 20 caractères de large et dont le contenu doit être plus long que 9 caractères et plus court que 14 caractères.</p> + +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" + size="20" minlength="9" maxlength="14"></pre> + +<p>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</p> + +<div class="note"> +<p><strong>Note</strong> : Ces deux attributs jouent un rôle lors de la {{anch("validation", "Validation")}}. Dans l'exemple précédent, la valeur sera considérée comme invalide si elle contient moins de 9 caractères ou plus de 14. La plupart des navigateurs ne permettront pas de saisir une valeur plus longue que la taille maximale.</p> +</div> + +<h3 id="Fournir_une_valeur_par_défaut">Fournir une valeur par défaut</h3> + +<p>Il est possible de fournir une valeur par défaut en renseignant au préalable l'attribut {{htmlattrxref("value", "input")}} :</p> + +<div id="Default_value"> +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" + value="01 23 45 67 89"></pre> +</div> + +<p>{{EmbedLiveSample("Fournir_une_valeur_par_défaut", 600, 40)}}</p> + +<h4 id="Afficher_des_suggestions">Afficher des suggestions</h4> + +<p>Si on souhaite aller plus loin, on peut fournir une liste de suggestions parmi lesquelles l'utilisateur pourra choisir (il pourra également saisir la valeur de son choix si celle-ci ne fait pas partie de la liste). Pour cela, on utilisera l'attribut {{htmlattrxref("list", "input")}} dont la valeur est l'identifiant d'un élément {{HTMLElement("datalist")}} qui contient autant d'éléments {{HTMLElement("option")}} que de valeurs suggérées. C'est la valeur de l'attribut <code>value</code> de chaque élément <code><option></code> qui sera utilisée comme suggestion.</p> + +<pre class="brush: html notranslate"><input id="telNo" name="telNo" type="tel" list="defaultTels"> + +<datalist id="defaultTels"> + <option value="01 23 45 67 89"> + <option value="02 45 67 89 01"> + <option value="03 45 67 89 12"> + <option value="04 56 87 98 32"> +</datalist></pre> + +<p>{{EmbedLiveSample("Afficher_des_suggestions", 600, 40)}}</p> + +<p>Avec l'élément {{HTMLElement("datalist")}} contenant ces différentes valeurs {{HTMLElement("option")}}, le navigateur affichera une liste déroulante (ou un autre élément d'interface utilisateur) afin que l'utilisateur puisse éventuellement choisir parmi les suggestions. Lorsque l'utilisateur saisit dans le contrôle, la liste des suggestions est restreinte à celles qui correspondent encore.</p> + +<h2 id="Validation">Validation</h2> + +<p>Comme évoqué ci-avant, il est difficile de fournir une solution qui convienne pour l'ensemble des formats utilisés et qui permette de valider correctement les numéros de téléphone.</p> + +<div class="warning"><strong>Attention !</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</div> + +<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3> + +<p>Il est possible de rendre la saisie obligatoire avant de pouvoir envoyer le formulaire. Pour cela, on utilisera l'attribut {{htmlattrxref("required", "input")}} :</p> + +<pre class="brush: html notranslate"><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> + +<p>On utilisera la feuille de style suivante pour indiquer les éléments valides ou invalides du formulaire :</p> + +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + color: #8b0000; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + color: #009000; +}</pre> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample("Rendre_la_valeur_obligatoire", 700, 70)}}</p> + +<h3 id="Utiliser_un_format_particulier"><a id="format" name="format">Utiliser un format particulier</a></h3> + +<p>Si on souhaite restreindre le format de la valeur qui peut être saisie, on peut utiliser l'attribut {{htmlattrxref("pattern","input")}} dont la valeur est une expression rationnelle que la valeur doit respecter pour être valide.</p> + +<p>Dans cet exemple, on utilisera la même feuille de style que précédemment mais le code HTML sera celui-ci :</p> + +<pre class="brush: html notranslate"><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> + +<div class="hidden"> +<pre class="brush: css notranslate">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + color: #8b0000; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + color: #009000; +}</pre> +</div> + +<p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 70)}}</p> + +<p>Vous pouvez ici voir que la valeur est considérée comme invalide si elle ne suit pas le format xx xx xx xx xx. Ce format peut peut-être être utile pour certaines régions mais attention, dans une application réelle, il faudra s'adapter à des cas plus complexes selon la locale de l'utilisateur.</p> + +<h2 id="Exemples">Exemples</h2> + +<p>Dans cet exemple, on présente une interface simple avec un élément {{htmlelement("select")}} permettant à l'utilisateur de choisir le pays dans lequel il se trouve puis un ensemble d'éléments <code><input type="tel"></code> permettant de saisir ses différents numéros de téléphone.</p> + +<p>Chaque boîte de saisie possède un attribut {{htmlattrxref("placeholder","input")}} qui indique le format pressenti. On utilise également l'attribut {{htmlattrxref("pattern","input")}} afin d'indiquer le nombre de caractères ainsi qu'un attribut <code>aria-label</code> qui pourra être lu par un lecteur d'écran ete qui décrit quoi saisir dans le contrôle.</p> + +<pre class="brush: html notranslate"><form> + <div> + <label for="country">Veuillez choisir votre pays :</label> + <select id="country" name="country"> + <option>Royaume-Uni</option> + <option selected>États-Unis</option> + <option>Allemagne</option> + </select> + </div> + <div> + <p>Veuillez saisir vos numéros de téléphone : </p> + <span class="areaDiv"> + <input id="areaNo" name="areaNo" type="tel" required + placeholder="Code régional" pattern="[0-9]{3}" + aria-label="Code régional"> + <span class="validity"></span> + </span> + <span class="number1Div"> + <input id="number1" name="number1" type="tel" required + placeholder="Premier fragment" pattern="[0-9]{3}" + aria-label="Premier fragment du numéro"> + <span class="validity"></span> + </span> + <span class="number2Div"> + <input id="number2" name="number2" type="tel" required + placeholder="Second fragment" pattern="[0-9]{4}" + aria-label="Second fragment du numéro"> + <span class="validity"></span> + </span> + </div> + <div> + <button>Envoyer</button> + </div> +</form></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 notranslate">var selectElem = document.querySelector("select"); +var inputElems = document.querySelectorAll("input"); + +selectElem.onchange = function() { + for(var i = 0; i < inputElems.length; i++) { + inputElems[i].value = ""; + } + + if(selectElem.value === "États-Unis") { + inputElems[2].parentNode.style.display = "inline"; + + inputElems[0].placeholder = "Code régional"; + inputElems[0].pattern = "[0-9]{3}"; + + inputElems[1].placeholder = "Première partie"; + inputElems[1].pattern = "[0-9]{3}"; + inputElems[1].setAttribute("aria-label","Première partie du numéro"); + + inputElems[2].placeholder = "Seconde partie"; + inputElems[2].pattern = "[0-9]{4}"; + inputElems[2].setAttribute("aria-label","Seconde partie du numéro"); + } else if(selectElem.value === "Royaume-Uni") { + inputElems[2].parentNode.style.display = "none"; + + inputElems[0].placeholder = "Code régional"; + inputElems[0].pattern = "[0-9]{3,6}"; + + inputElems[1].placeholder = "Numéro local"; + inputElems[1].pattern = "[0-9]{4,8}"; + inputElems[1].setAttribute("aria-label","Numéro local"); + } else if(selectElem.value === "Allemagne") { + inputElems[2].parentNode.style.display = "inline"; + + inputElems[0].placeholder = "Code régional"; + inputElems[0].pattern = "[0-9]{3,5}"; + + inputElems[1].placeholder = "Première partie"; + inputElems[1].pattern = "[0-9]{2,4}"; + inputElems[1].setAttribute("aria-label","Première partie du numéro"); + + inputElems[2].placeholder = "Seconde partie"; + inputElems[2].pattern = "[0-9]{4}"; + inputElems[2].setAttribute("aria-label","Seconde partie du numéro"); + } +}</pre> + +<p>Voici le résultat obtenu :</p> + +<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p> + +<p>Attention, cet exemple n'est qu'une illustration du problème associé à la gestion internationale des numéros de téléphone. Il serait prétentieux d'affirmer qu'étendre ce mécanisme à chaque pays suffirait à garantir la bonne saisie d'un numéro de téléphone.</p> + +<p>Bien entendu, si cette complexité est trop importante, on peut également faire le choix de contrôler la valeur côté serveur avant de faire un retour à l'utilisateur.</p> + +<div class="hidden"> +<pre class="brush: css notranslate">div { +margin-bottom: 10px; +position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un numéro de téléphone ou qui est vide.</td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("maxlength", "input")}}, {{htmlattrxref("minlength", "input")}}, {{htmlattrxref("pattern", "input")}}, {{htmlattrxref("placeholder", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("size", "input")}}</td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>list,selectionStart</code>, <code>selectionEnd</code>, <code>selectionDirection</code> et <code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.setRangeText", "setRangeText()")}}, {{domxref("HTMLInputElement.setSelectionRange", "setSelectionRange()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Spécifications">Spécifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Spécification</th> + <th scope="col">État</th> + <th scope="col">Commentaires</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'forms.html#tel-state-(type=tel)', '<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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-tel")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<ul> + <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Le guide sur les formulaires HTML</a></li> + <li>{{HTMLElement("input")}}</li> + <li><a href="/fr/docs/Accessibilité/ARIA/formulaires">Les formulaires et l'accessibilité</a></li> + <li>{{HTMLElement("input")}} + <ul> + <li><code><a href="/fr/docs/Web/HTML/Element/input/text"><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> diff --git a/files/fr/web/html/element/input/text/index.html b/files/fr/web/html/element/input/text/index.html new file mode 100644 index 0000000000..cfba3809e2 --- /dev/null +++ b/files/fr/web/html/element/input/text/index.html @@ -0,0 +1,458 @@ +--- +title: <input type="text"> +slug: Web/HTML/Element/Input/text +tags: + - Formulaires + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/text +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">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.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-standard")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<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> + +<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> + +<p>Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>maxlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à <code>minlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du 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> + +<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> + +<p>Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour <code>minlength</code> ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à <code>maxlength</code>.</p> + +<p>Le champ <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">ne sera pas valide</a> si la longueur du 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> + +<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> + +<div id="pattern-include"> +<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> + +<p>Si l'expression rationnelle est invalide ou que cet attribut n'est pas défini, l'attribut est ignoré.</p> + +<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> +</div> + +<p>Voir <a href="#format">la section sur l'utilisation de cet attribut ci-après</a> pour plus d'exemples.</p> + +<h3 id="htmlattrdef(placeholder)">{{htmlattrdef("placeholder")}}</h3> + +<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> + +<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> + +<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> + +<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3> + +<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> + +<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> + +<h3 id="htmlattrdef(size)">{{htmlattrdef("size")}}</h3> + +<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> + +<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> + +<h3 id="htmlattrdef(spellcheck)">{{htmlattrdef("spellcheck")}}</h3> + +<div id="spellcheck-include"> +<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> + +<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> + +<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> + +<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> +</div> + +<h2 id="Attributs_non-standard">Attributs non-standard</h2> + +<p>Les attributs non-standard suivant sont disponibles pour les champs textuels mais devraient ne pas être utilisés.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">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> + +<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<div id="autocorrect-include"> +<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> + +<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> +</div> + +<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<div id="mozactionhint-include"> +<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> + +<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> + +<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> +</div> + +<h2 id="Utiliser_<input_typetext>">Utiliser <code><input type="text"></code></h2> + +<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> + +<h3 id="Exemple_simple">Exemple simple</h3> + +<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> + +<p>Voici ce qui sera obtenu :</p> + +<p>{{EmbedLiveSample("Exemple_simple", 600, 50)}}</p> + +<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> + +<h3 id="Utiliser_des_textes_indicatifs_-_placeholders">Utiliser des textes indicatifs <em>- placeholders</em></h3> + +<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> + +<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> + +<p>Voici le résultat qui sera obtenu :</p> + +<p>{{EmbedLiveSample("Utiliser_des_textes_indicatifs_-_placeholders", 600, 50)}}</p> + +<p>Le texte indicatif est généralement affiché dans une couleur plus claire que le texte qui sera saisi par l'utilisateur.</p> + +<h3 id="Contrôler_la_taille_physique_du_champ">Contrôler la taille physique du champ</h3> + +<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> + +<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" + size="30"> + </div> + <div> + <button>Envoyer</button> + </div> +</form></pre> + +<p>{{EmbedLiveSample("Contrôler_la_taille_physique_du_champ", 600, 50)}}</p> + +<h2 id="Validation">Validation</h2> + +<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> + +<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> + +<h3 id="Un_aparté_sur_la_mise_en_forme">Un aparté sur la mise en forme</h3> + +<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> + +<pre class="brush: css">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>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> + +<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3> + +<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> + +<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> + +<div class="hidden"> +<pre class="brush: css">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> +</div> + +<p>Ce qui produira ce résultat :</p> + +<p>{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 70)}}</p> + +<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> + +<h3 id="Contraindre_la_longueur_du_texte_saisi">Contraindre la longueur du texte saisi</h3> + +<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> + +<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> + +<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" + 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> + +<div class="hidden"> +<pre class="brush: css">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> +</div> + +<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"><a id="format" name="format">Contraindre un format spécifique - expression rationnelle</a></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 { + margin-bottom: 10px; + position: relative; +} + +p { + font-size: 80%; + color: #999; +} + +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 sera obtenu :</p> + +<p>{{EmbedLiveSample("Contraindre_un_format_spécifique_-_expression_rationnelle", 600, 110)}}</p> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-text")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/time/index.html b/files/fr/web/html/element/input/time/index.html new file mode 100644 index 0000000000..af266f8fc7 --- /dev/null +++ b/files/fr/web/html/element/input/time/index.html @@ -0,0 +1,517 @@ +--- +title: <input type="time"> +slug: Web/HTML/Element/Input/time +tags: + - Formulaires + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/time +--- +<div>{{HTMLRef}}</div> + +<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> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-time.html", "tabbed-standard")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuer à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<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> + +<h2 id="Apparence">Apparence</h2> + +<h3 id="ChromeOpera">Chrome/Opera</h3> + +<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> + +<p><img alt="Contrôle Chrome pour une saisie avec une locale sur 24h" src="https://mdn.mozillademos.org/files/15399/chrome-time.png" style="display: block; height: 31px; margin: 0px auto; width: 82px;"><img alt="Contrôle de Chrome pour une saisie avec une locale sur 12h" src="https://mdn.mozillademos.org/files/16417/chrome_time.PNG" style="display: block; height: 31px; margin: 0px auto; width: 82px;"></p> + +<h3 id="Firefox">Firefox</h3> + +<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> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15403/firefox-time.png" style="display: block; height: 29px; margin: 0px auto; width: 106px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16461/firefox-time-24.png" style="display: block; height: 29px; margin: 0px auto; width: 106px;"></p> + +<h3 id="Edge">Edge</h3> + +<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> + +<p><img alt="Contrôle Edge pour la saisie sur 24h" src="https://mdn.mozillademos.org/files/15401/edge-time.png" style="display: block; margin: 0 auto;"></p> + +<p><img alt="Contrôle Edge pour la saisie sur 12 heures" src="https://mdn.mozillademos.org/files/16418/edge_time.PNG" style="display: block; height: 360px; margin: 0px auto; width: 233px;"></p> + +<h2 id="Valeur">Valeur</h2> + +<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> + +<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> + +<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> + +<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> + +<pre class="brush: js">var timeControl = document.querySelector('input[type="time"]'); +timeControl.value = '15:30';</pre> + +<h3 id="Représentation_de_la_valeur">Représentation de la valeur</h3> + +<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> + +<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> + +<h4 id="HTML">HTML</h4> + +<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> + +<h4 id="JavaScript">JavaScript</h4> + +<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> + +<pre class="brush: 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> + +<div class="note"><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.</div> + +<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> + +<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> + +<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> + +<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> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<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> + +<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> + +<h2 id="Utiliser_<input_typetime>">Utiliser <code><input type="time"></code></h2> + +<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> + +<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> + +<h3 id="Utilisation_simple">Utilisation simple</h3> + +<p>Dans sa forme la plus simple, <code><input type="time"></code> n'est accompagné que d'un élément {{htmlelement("label")}} :</p> + +<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> + +<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p> + +<h3 id="Ajuster_la_taille_du_contrôle">Ajuster la taille du contrôle</h3> + +<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> + +<h3 id="Utiliser_step">Utiliser <code>step</code></h3> + +<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> + +<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> + +<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> + +<p>{{EmbedLiveSample("Utiliser_step", 600, 40)}}</p> + +<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> + +<p>Cet attribut semble n'avoir aucun impact pour Firefox ou Edge voire empêche la validation de fonctionner (voir la prochaine section).</p> + +<h2 id="Validation">Validation</h2> + +<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> + +<h3 id="Indiquer_une_heure_maximale_et_minimale">Indiquer une heure maximale et minimale</h3> + +<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> + +<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> + +<p>{{EmbedLiveSample('Indiquer_une_heure_maximale_et_minimale', 600, 40)}}</p> + +<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> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<p>Avec ce fragment de code HTML :</p> + +<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> + +<h3 id="Rendre_la_saisie_obligatoire">Rendre la saisie obligatoire</h3> + +<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> + +<p>Prenons l'exemple suivant qui restreint la plage horaire sélectionnable et qui rend le champ obligatoire :</p> + +<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> + +<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> + +<p>{{EmbedLiveSample('Rendre_la_saisie_obligatoire', 600, 120)}}</p> + +<p>Voici une capture d'écran (en anglais) si votre navigateur ne prend pas en charge cete fonctionnalité :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15405/firefox-validation-message.png" style="display: block; margin: 0 auto;"></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> + +<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> + +<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> + +<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> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15407/chrome-android-time.png" style="display: block; margin: 0 auto;"></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> + +<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> + +<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> + +<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> + +<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" + 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> + +<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p> + +<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> + +<p>De plus, comment communiquer à l'utilisateur le format dans lequel saisir l'heure ?</p> + +<p>Il reste donc un problème.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<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> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<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> + +<pre class="brush: js">// On définit quelques variables +var nativePicker = document.querySelector('.nativeTimePicker'); +var fallbackPicker = document.querySelector('.fallbackTimePicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var hourSelect = document.querySelector('#hour'); +var minuteSelect = document.querySelector('#minute'); + +// On cache le sélecteur alternatif +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// On teste si un nouveau contrôle time +// est transformé en text +var test = document.createElement('input'); +test.type = 'time'; +// Si c'est le cas… +if(test.type === 'text') { + // On masque le sélecteur natif et + // on affiche le sélecteur alternatif + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // On génère les valeurs dynamiquement + // pour les heures et les minutes + populateHours(); + populateMinutes(); +} + +function populateHours() { + // On ajoute les heures dans + // l'élément <select> avec les 6 + // heures ouvertes + for(var i = 12; i <= 18; i++) { + var option = document.createElement('option'); + option.textContent = i; + hourSelect.appendChild(option); + } +} + +function populateMinutes() { + // On génère 60 options pour 60 minutes + for(var i = 0; i <= 59; i++) { + var option = document.createElement('option'); + option.textContent = (i < 10) ? ("0" + i) : i; + minuteSelect.appendChild(option); + } +} + +// avec la fonction suivante, si l'heure vaut 18 +// on s'assure que les minutes vaillent 00 +// afin de ne pas pouvoir choisir d'heure passé 18:00 + function setMinutesToZero() { + if(hourSelect.value === '18') { + minuteSelect.value = '00'; + } + } + + hourSelect.onchange = setMinutesToZero; + minuteSelect.onchange = setMinutesToZero;</pre> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-time")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/url/index.html b/files/fr/web/html/element/input/url/index.html new file mode 100644 index 0000000000..37cdcb0804 --- /dev/null +++ b/files/fr/web/html/element/input/url/index.html @@ -0,0 +1,397 @@ +--- +title: <input type="url"> +slug: Web/HTML/Element/Input/url +tags: + - Formulaire + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/url +--- +<div>{{HTMLRef}}</div> + +<p><span class="seoSummary">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.</span></p> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</div> + +<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p> + +<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> + +<h3 id="htmlattrdef(maxlength)">{{htmlattrdef("maxlength")}}</h3> + +<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> + +<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> + +<h3 id="htmlattrdef(minlength)">{{htmlattrdef("minlength")}}</h3> + +<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> + +<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> + +<h3 id="htmlattrdef(pattern)">{{htmlattrdef("pattern")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}</p> + +<p>Voir <a href="#format">la section ci-après sur le format</a> pour plus de détails et d'exemples.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck", 0, 1, 2)}}</p> + +<h2 id="Attributs_non-standard">Attributs non-standard</h2> + +<p>Il est possible (mais déconseillé) d'utiliser ces attributs non-standard sur les champs de saisie d'URL.</p> + +<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> + +<h3 id="htmlattrdef(autocorrect)_non-standard_inline">{{htmlattrdef("autocorrect")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}</p> + +<h3 id="htmlattrdef(mozactionhint)_non-standard_inline">{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}</p> + +<h2 id="Utiliser_des_champs_de_saisie_d'URL">Utiliser des champs de saisie d'URL</h2> + +<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> + +<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> + +<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> + +<h3 id="Un_simple_champ">Un simple champ</h3> + +<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> + +<pre class="brush: html"><input id="monURL" name="monURL" type="url"></pre> + +<p>{{EmbedLiveSample('Un_simple_champ', 600, 40)}}</p> + +<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> + +<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> + +<h3 id="Textes_indicatifs_-_placeholders">Textes indicatifs <em>- placeholders</em></h3> + +<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> + +<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> + +<pre class="brush: html"><input id="monURL" name="monURL" type="url" + placeholder="http://www.example.com"></pre> + +<p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p> + +<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> + +<p>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> + +<h4 id="La_taille_physique">La taille physique</h4> + +<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> + +<pre class="brush: html"><input id="monURL" name="monURL" type="url" + size="30"></pre> + +<p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</p> + +<h4 id="La_longueur_de_la_valeur">La longueur de la valeur</h4> + +<p>L'attribut <code>size</code> ne 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> + +<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> + +<pre class="brush: html"><input id="monURL" name="monURL" type="url" + size="30" minlength="10" maxlength="80"> +</pre> + +<p>{{EmbedLiveSample("La_longueur_de_la_valeur", 600, 40)}}</p> + +<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> + +<h3 id="Fournir_des_valeurs_par_défaut">Fournir des valeurs par défaut</h3> + +<p>On peut fournir une valeur par défaut grâce à l'attribut {{htmlattrxref("value", "input")}} :</p> + +<div id="Default_value"> +<pre class="brush: html"><input id="monURL" name="monURL" type="url" + value="http://www.example.com"></pre> +</div> + +<p>{{EmbedLiveSample("Fournir_des_valeurs_par_défaut", 600, 40)}}</p> + +<h4 id="Fournir_des_suggestions">Fournir des suggestions</h4> + +<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> + +<pre class="brush: html"><input id="monURL" name="monURL" type="url" + list="defaultURLs"> + +<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> + +<p>{{EmbedLiveSample("Fournir_des_suggestions", 600, 40)}}</p> + +<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> + +<h2 id="Validation">Validation</h2> + +<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> + +<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> + +<h3 id="Validation_simple">Validation simple</h3> + +<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> + +<h3 id="Rendre_le_champ_URL_obligatoire">Rendre le champ URL obligatoire</h3> + +<p>Comme vu ci-avant, on peut rendre la saisie de l'URL obligatoire avec l'attribut {{htmlattrxref("required", "input")}} :</p> + +<div id="Default_value"> +<pre class="brush: html"><form> + <input id="monURL" name="monURL" type="url" required> + <button>Envoyer</button> +</form></pre> +</div> + +<p>{{EmbedLiveSample("Rendre_le_champ_URL_obligatoire", 600, 40)}}</p> + +<p>Vous pouvez essayer d'envoyer le formulaire précédent sans valeur saisie et voir le résultat obtenu.</p> + +<h3 id="Utiliser_un_format_particulier"><a id="format" name="format">Utiliser un format particulier</a></h3> + +<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> + +<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> + +<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> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; + } + + input[type="number"] { + width: 100px; + } + + input + span { + padding-right: 30px; + } + + input:invalid+span:after { + position: absolute; content: '✖'; + padding-left: 5px; + } + + input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; + }</pre> +</div> + +<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" + 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> + +<p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 150)}}</p> + +<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> + +<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> + +<p>Cette expression rationnelle est loin d'être parfaite mais suffit pour les besoins de cet exemple.</p> + +<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> + +<p>C'est pourquoi nous avons écrit "L'URL doit être sur le domaine maboite" qui est plus détaillé.</p> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-url")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> diff --git a/files/fr/web/html/element/input/week/index.html b/files/fr/web/html/element/input/week/index.html new file mode 100644 index 0000000000..64749c5ad3 --- /dev/null +++ b/files/fr/web/html/element/input/week/index.html @@ -0,0 +1,389 @@ +--- +title: <input type="week"> +slug: Web/HTML/Element/Input/week +tags: + - Element + - Formulaires + - HTML + - Input + - Reference +translation_of: Web/HTML/Element/input/week +--- +<div>{{HTMLRef}}</div> + +<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> + +<div>{{EmbedInteractiveExample("pages/tabbed/input-week.html", "tabbed-shorter")}}</div> + +<div class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</div> + +<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> + +<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> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15409/week-control-chrome.png" style="display: block; height: 235px; margin: 0px auto; width: 320px;"></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> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15411/week-control-edge.png" style="display: block; height: 391px; margin: 0px auto; width: 227px;"></p> + +<h2 id="Valeur">Valeur</h2> + +<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> + +<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> + +<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> + +<p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> + +<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> + +<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> + +<pre class="brush: js">var weekControl = document.querySelector('input[type="week"]'); +weekControl.value = '2017-W45';</pre> + +<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 semaine 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>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> + +<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> + +<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> + +<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> + +<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> + +<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> + +<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> + +<p>{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> + +<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> + +<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> + +<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> + +<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> + +<h2 id="Utiliser_les_contrôles_de_type_week">Utiliser les contrôles de type <code>week</code></h2> + +<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> + +<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> + +<h3 id="Utilisation_simple">Utilisation simple</h3> + +<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> + +<pre class="brush: html"><form> + <label for="week">À quelle semaine souhaiteriez-vous commencer ?</label> + <input id="week" type="week" name="week"> +</form></pre> + +<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p> + +<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> + +<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> + +<h3 id="Utiliser_l'attribut_step">Utiliser l'attribut <code>step</code></h3> + +<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> + +<h2 id="Validation">Validation</h2> + +<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> + +<h3 id="Paramétrer_des_semaines_minimum_et_maximum">Paramétrer des semaines minimum et maximum</h3> + +<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> + +<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> + +<p>{{EmbedLiveSample('Paramétrer_des_semaines_minimum_et_maximum', 600, 40)}}</p> + +<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> + +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> + +<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> + +<h3 id="Rendre_la_valeur_obligatoire">Rendre la valeur obligatoire</h3> + +<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> + +<p>Prenons un autre exemple (où la période a été restreinte comme précédemment) et où le champ est obligatoire :</p> + +<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> + +<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> + +<p>{{EmbedLiveSample('Rendre_la_valeur_obligatoire', 600, 120)}}</p> + +<p>Voici une capture d'écran du résultat obtenu si votre navigateur ne prend pas en charge cette fonctionnalité :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15415/week-validation-chrome.png" style="display: block; height: 85px; margin: 0px auto; width: 473px;"></p> + +<div class="warning"> +<p><strong>Important </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> + +<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> + +<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> + +<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> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15413/week-chrome-android.png" style="display: block; margin: 0 auto;"></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> + +<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> + +<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> + +<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> + +<h2 id="Exemples">Exemples</h2> + +<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> + +<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p> + +<p>Voici le code HTML utilisé :</p> + +<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> + +<p>On génère les valeurs des semaines dynamiquement.</p> + +<div class="hidden"> +<pre class="brush: css">div { + margin-bottom: 10px; + position: relative; +} + +input[type="number"] { + width: 100px; +} + +input + span { + padding-right: 30px; +} + +input:invalid+span:after { + position: absolute; + content: '✖'; + padding-left: 5px; +} + +input:valid+span:after { + position: absolute; + content: '✓'; + padding-left: 5px; +}</pre> +</div> + +<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> + +<pre class="brush: js">// On définit certaines variables +var nativePicker = document.querySelector('.nativeWeekPicker'); +var fallbackPicker = document.querySelector('.fallbackWeekPicker'); +var fallbackLabel = document.querySelector('.fallbackLabel'); + +var yearSelect = document.querySelector('#year'); +var weekSelect = document.querySelector('#fallbackWeek'); + +// À l'état initial, on masque le sélecteur alternatif +fallbackPicker.style.display = 'none'; +fallbackLabel.style.display = 'none'; + +// On teste si le sélecteur natif se transforme en +// contrôle de saisie de texte ou non +var test = document.createElement('input'); +test.type = 'week'; +// Si c'est le cas, on exécute le code dans le bloc +// conditionnel if() {} +if(test.type === 'text') { + // On masque alors le sélecteur natif et + // on affiche le sélecteur alternatif + nativePicker.style.display = 'none'; + fallbackPicker.style.display = 'block'; + fallbackLabel.style.display = 'block'; + + // On ajoute les semaines dynamiquement + populateWeeks(); +} + +function populateWeeks() { + // On ajoute 52 semaines grâce à une boucle + for(var i = 1; i <= 52; i++) { + var option = document.createElement('option'); + 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> + +<h2 id="Résumé_technique">Résumé technique</h2> + +<table class="properties"> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente 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> + +<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> + +<div class="hidden">Le tableau de compatibilité de cette page a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à consulter <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> et à nous envoyer une <em>pull request</em>.</div> + +<p>{{Compat("html.elements.input.input-week")}}</p> + +<h2 id="Voir_aussi">Voir aussi</h2> + +<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> |