diff options
Diffstat (limited to 'files/fr/web/html/element/input')
23 files changed, 280 insertions, 447 deletions
diff --git a/files/fr/web/html/element/input/button/index.html b/files/fr/web/html/element/input/button/index.html index f86eba3bcf..02a4e420e0 100644 --- a/files/fr/web/html/element/input/button/index.html +++ b/files/fr/web/html/element/input/button/index.html @@ -11,33 +11,29 @@ 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> +<p>Les éléments {{HTMLElement("input")}} de type <strong><code>button</code></strong> sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement {{event("click")}}).</p> <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> +<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"> +<h3 id="Exemple_1">Exemple 1</h3> <pre class="brush: html"><input type="button" value="Bouton cliquer"></pre> -</div> -<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> +<p>{{EmbedLiveSample("Exemple_1", 650, 30)}}</p> +<h3 id="Exemple_2">Exemple 2</h3> <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> +<p>{{EmbedLiveSample("Exemple_2", 650, 30)}}</p> <h2 id="Utiliser_les_boutons_<input>">Utiliser les boutons <code><input></code></h2> @@ -77,7 +73,6 @@ function updateBtn() { <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> @@ -85,8 +80,7 @@ function updateBtn() { </pre> </div> -<div class="hidden"> -<pre class="brush: js">var btn = document.querySelector('input'); +<pre class="brush: js hidden">var btn = document.querySelector('input'); var txt = document.querySelector('p'); btn.addEventListener('click', updateBtn); @@ -100,30 +94,25 @@ function updateBtn() { 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> +<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> +<h4 id="Exemple_1">Exemple 1</h4> +<pre class="brush: html hidden"><input type="button" value="Activé"></pre> -<pre class="brush: html"><input type="button" value="Activé"></pre> - -<pre class="brush: js">var btn = document.querySelector('input'); +<pre class="brush: js hidden">var btn = document.querySelector('input'); btn.addEventListener('click', disableBtn); @@ -137,23 +126,22 @@ function disableBtn() { }</pre> </div> -<p>{{EmbedLiveSample("Hidden_code_1", 650, 60)}}</p> +<p>{{EmbedLiveSample("Exemple_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> +<h4 id="Exemple_2">Exemple 2</h4> -<pre class="brush: html"><fieldset> +<pre class="brush: html hidden"><fieldset> <legend>Groupe de boutons </legend> <input type="button" value="Bouton 1"> <input type="button" value="Bouton 2"> <input type="button" value="Bouton 3"> </fieldset></pre> -<pre class="brush: js">var btn = document.querySelector('input'); +<pre class="brush: js hidden">var btn = document.querySelector('input'); var fieldset = document.querySelector('fieldset'); btn.addEventListener('click', disableBtn); @@ -164,12 +152,11 @@ function disableBtn() { fieldset.disabled = false; }, 2000); }</pre> -</div> -<p>{{EmbedLiveSample("Hidden_code_2", 650, 60)}}</p> +<p>{{EmbedLiveSample("Exemple_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> +<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> @@ -190,8 +177,7 @@ function disableBtn() { <p>Votre navigateur ne semble pas prendre en charge cette fonctionnalité.</p> </canvas></pre> -<div class="hidden"> -<pre class="brush: css">body { +<pre class="brush: css hidden">body { margin: 0; overflow: hidden; background: #ccc; @@ -218,7 +204,6 @@ input[type="range"] { position: relative; bottom: 5px; }</pre> -</div> <pre class="brush: js">var canvas = document.querySelector('.myCanvas'); var width = canvas.width = window.innerWidth; diff --git a/files/fr/web/html/element/input/checkbox/index.html b/files/fr/web/html/element/input/checkbox/index.html index 6961d790b7..a2e5726900 100644 --- a/files/fr/web/html/element/input/checkbox/index.html +++ b/files/fr/web/html/element/input/checkbox/index.html @@ -15,17 +15,15 @@ translation_of: Web/HTML/Element/input/checkbox <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> +<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> +<pre class="brush: html"><form> <div> <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter"> <label for="subscribeNews">Souhaitez-vous vous abonner à la newsletter ?</label> @@ -42,7 +40,7 @@ translation_of: Web/HTML/Element/input/checkbox <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> +<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> @@ -90,7 +88,7 @@ translation_of: Web/HTML/Element/input/checkbox <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> +<pre class="brush: html"><fieldset> <legend>Veuillez sélectionner vos intérêts :</legend> <div> <input type="checkbox" id="coding" name="interest" value="coding"> @@ -104,13 +102,13 @@ translation_of: Web/HTML/Element/input/checkbox <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> +<p>Dans cet exemple on voit que chaque case à cocher utilise le même attribut <code>name</code>. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : <code>interest=coding&interest=music</code>. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélctionnées (voir <a href="https://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable">Gérer plusieurs cases à cocher avec une seule variable côté serveur</a> par exemple).</p> <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> +<pre class="brush: html"><fieldset> <legend>Veuillez sélectionner vos intérêts</legend> <div> <input type="checkbox" id="coding" name="interest" value="coding" checked> @@ -134,7 +132,7 @@ translation_of: Web/HTML/Element/input/checkbox <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> +<pre class="brush: js">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> @@ -148,40 +146,42 @@ translation_of: Web/HTML/Element/input/checkbox <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'); +<pre class="brush: js"> +var overall = document.querySelector('input[id="EnchTbl"]'); +var ingredients = document.querySelectorAll('ul input'); - overall.addEventListener('click', function(e) { - e.preventDefault(); - }); +overall.addEventListener('click', function(e) { + e.preventDefault(); +}); - for(var i = 0; i </span><span>< </span><span>ingredients.length; i++) { - ingredients[i].addEventListener('click', updateDisplay); - } +for(var i = 0; i < 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++; - } +function updateDisplay() { + var checkedCount = 1; + for(var i = 0; i < 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> + } + if(checkedCount === 0) { + overall.checked = false; + overall.indeterminate = false; + } else if(checkedCount === ingredients.length) { + overall.checked = true; + overall.indeterminate = false; + } else { + overall.checked = false; + overall.indeterminate = true; + } +} +</pre> <p>{{EmbedGHLiveSample("learning-area/html/forms/indeterminate-example/index.html", '100%', 200)}}</p> <div class="note"> -<p><strong>Note</strong> : Si vous envoyez un formulaire avec une case à cocher dans un état indéterminé, le résultat obtenu est le même que si la case avait été décochée : aucune donnée n'est envoyée au serveur.</p> +<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> @@ -192,7 +192,7 @@ translation_of: Web/HTML/Element/input/checkbox <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> +<pre class="brush: html"><form> <fieldset> <legend>Veuillez sélectionner vos intérêts</legend> <div> @@ -226,7 +226,7 @@ translation_of: Web/HTML/Element/input/checkbox </fieldset> </form></pre> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; } @@ -263,7 +263,7 @@ legend { <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var otherCheckbox = document.querySelector('input[value="other"]'); +<pre class="brush: js">var otherCheckbox = document.querySelector('input[value="other"]'); var otherText = document.querySelector('input[id="otherValue"]'); otherText.style.visibility = 'hidden'; diff --git a/files/fr/web/html/element/input/color/index.html b/files/fr/web/html/element/input/color/index.html index 3a06d2a084..4fe3dd2319 100644 --- a/files/fr/web/html/element/input/color/index.html +++ b/files/fr/web/html/element/input/color/index.html @@ -11,14 +11,12 @@ 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>Les éléments {{HTMLElement("input")}} de type <code><strong>"color"</strong></code> permettent de sélectionner une couleur via une interface (un sélecteur de couleur) ou en saisissant le code hexadécimal de la couleur au format <code>"#rrggbb"</code>. Ce format de valeur peut être utilisé en CSS.</p> <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> @@ -35,7 +33,7 @@ translation_of: Web/HTML/Element/input/color <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> +<pre class="brush: html"><input type="color" value="#ff0000"></pre> <p>{{EmbedLiveSample("Fournir_une_couleur_par_défaut", 700, 30)}}</p> @@ -45,7 +43,7 @@ translation_of: Web/HTML/Element/input/color <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); +<pre class="brush: js">colorPicker.addEventListener("input", updateFirst, false); colorPicker.addEventListener("change", watchColorPicker, false); function watchColorPicker(event) { @@ -57,23 +55,9 @@ function watchColorPicker(event) { <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>Si l'implémentation du navigateur n'affiche pas de sélecteur de couleur mais un champ texte, il est possible de sélectionner la valeur du texte avec la méthode {{domxref("HTMLInputElement.select", "select()")}}. Si le navigateur affiche un sélecteur de couleur, <code>select()</code> ne fera rien. Soyez conscient⋅e de ce comportement afin d'adapter votre code à ce cas.</p> -<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> +<pre class="brush: js">colorWell.select();</pre> <h2 id="Validation">Validation</h2> @@ -87,7 +71,7 @@ function watchColorPicker(event) { <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> +<pre class="brush: html"><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"> @@ -102,7 +86,7 @@ function watchColorPicker(event) { <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 +<pre class="brush: js">var colorWell var defaultColor = "#0000ff"; window.addEventListener("load", startup, false); @@ -112,7 +96,7 @@ window.addEventListener("load", startup, false); <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() { +<pre class="brush: js">function startup() { colorWell = document.querySelector("#colorWell"); colorWell.value = defaultColor; colorWell.addEventListener("input", updateFirst, false); @@ -129,7 +113,7 @@ window.addEventListener("load", startup, false); <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) { +<pre class="brush: js">function updateFirst(event) { var p = document.querySelector("p"); if (p) { @@ -139,7 +123,7 @@ window.addEventListener("load", startup, false); <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) { +<pre class="brush: js">function updateAll(event) { document.querySelectorAll("p").forEach(function(p) { p.style.color = event.target.value; }); diff --git a/files/fr/web/html/element/input/date/index.html b/files/fr/web/html/element/input/date/index.html index bfc6bb094f..f8107d4b50 100644 --- a/files/fr/web/html/element/input/date/index.html +++ b/files/fr/web/html/element/input/date/index.html @@ -15,22 +15,8 @@ translation_of: Web/HTML/Element/input/date <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> @@ -136,7 +122,7 @@ dateControl.value = '2017-06-01';</pre> <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> +<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> @@ -168,10 +154,6 @@ dateControl.value = '2017-06-01';</pre> <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 { @@ -196,14 +178,12 @@ input:valid+span:after { }</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> +<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>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est l'hétérogénéité de la prise en charge par les différents navigateurs.</p> <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> @@ -234,8 +214,7 @@ input:valid+span:after { <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 { +<pre class="brush: css hidden">div { margin-bottom: 10px; } @@ -258,7 +237,6 @@ input:valid + span:after { 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> @@ -310,8 +288,7 @@ input:valid + span:after { <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 { +<pre class="brush: css hidden">input:invalid+span:after { content: '✖'; padding-left: 5px; } @@ -320,7 +297,6 @@ 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> diff --git a/files/fr/web/html/element/input/datetime-local/index.html b/files/fr/web/html/element/input/datetime-local/index.html index bc4ab26cff..23f0f7da9a 100644 --- a/files/fr/web/html/element/input/datetime-local/index.html +++ b/files/fr/web/html/element/input/datetime-local/index.html @@ -16,8 +16,6 @@ translation_of: Web/HTML/Element/input/datetime-local <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> @@ -28,21 +26,11 @@ translation_of: Web/HTML/Element/input/datetime-local <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> +<pre class="brush: html"><label for="party">Veuillez saisir une date et une heure pour la fête :</label> <input id="party" type="datetime-local" name="partydate" value="2017-06-01T08:30"></pre> <p>{{EmbedLiveSample('Valeur', 600, 60)}}</p> @@ -50,12 +38,12 @@ translation_of: Web/HTML/Element/input/datetime-local <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> +<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"]'); +<pre class="brush: js">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> @@ -117,7 +105,7 @@ date.value = '2017-06-01T08:30';</pre> <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> +<pre class="brush: html"><form> <label for="party">Veuillez choisir une date et une heure pour la fête :</label> <input id="party" type="datetime-local" name="partydate"> </form></pre> @@ -128,7 +116,7 @@ date.value = '2017-06-01T08:30';</pre> <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> +<pre class="brush: html"> <form> <label for="party">Veuillez choisir une date et une heure pour la fête :</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30"> </form></pre> @@ -143,7 +131,7 @@ date.value = '2017-06-01T08:30';</pre> </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> +<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> @@ -156,11 +144,11 @@ date.value = '2017-06-01T08:30';</pre> <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> +<pre class="brush: html"><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"> +<pre class="brush: html"><select name="timezone_offset" id="timezone-offset" class="span5"> <option value="-12:00">(GMT -12:00) Eniwetok, Kwajalein</option> <option value="-11:00">(GMT -11:00) Midway Island, Samoa</option> <option value="-10:00">(GMT -10:00) Hawaii</option> @@ -175,7 +163,7 @@ date.value = '2017-06-01T08:30';</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> +<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> @@ -186,7 +174,7 @@ date.value = '2017-06-01T08:30';</pre> <p>Prenons un exemple avec des dates mini/maxi et le champ obligatoire :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01T08:30" max="2017-06-30T16:30" required> @@ -201,13 +189,10 @@ date.value = '2017-06-01T08:30';</pre> <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 { +<pre class="brush: css">div { margin-bottom: 10px; display: flex; align-items: center; @@ -229,14 +214,13 @@ input:valid+span:after { }</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> +<p><strong>Attention :</strong> La validation des données du formulaire HTML par le navigateur ne doit pas remplacer la validation des données reçues sur le serveur ! En effet, il est tout à fait possible pour quelqu'un de modifier le document HTML afin d'outrepasser ces contraintes (voire d'envoyer directement des données au serveur sans passer par le formulaire HTML). Si les mécanismes, côté serveur, échouent à valider les données, cela pourrait avoir des conséquences néfastes sur le stockage ou la sécurité de l'application.</p> </div> <h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> -<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>Comme indiqué ci-avant, le principal problème qu'on rencontre avec ces contrôles est la prise en charge hétérogène des différents navigateurs : seuls Opera et Chrome implémentent cette fonctionnalité parmi les navigateurs de bureau et la plupart des navigateurs mobiles la prennent en charge.</p> -<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> @@ -255,7 +239,7 @@ input:valid+span:after { <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> +<pre class="brush: html"><form> <div> <label for="party">Veuillez choisir une date et une heure pour la fête (obligatoire, entre le 1er juin, 8h30 et le 30 juin, 16h30) :</label> <input id="party" type="datetime-local" name="partydate" @@ -277,8 +261,7 @@ input:valid+span:after { <p>Bref, il y a toujours un problème.</p> -<div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; } @@ -301,7 +284,6 @@ input:valid + span:after { 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> @@ -313,7 +295,7 @@ input:valid + span:after { <p>Voici le fragment de code HTML utilisé :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div class="nativeDateTimePicker"> <label for="party">Veuillez sélectionner une date et une heure pour la fête :</label> <input type="datetime-local" id="party" name="bday"> @@ -367,8 +349,7 @@ input:valid + span:after { <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 { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -392,11 +373,10 @@ input:valid+span:after { 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 +<pre class="brush: js">// On définit les différentes variables var nativePicker = document.querySelector('.nativeDateTimePicker'); var fallbackPicker = document.querySelector('.fallbackDateTimePicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); diff --git a/files/fr/web/html/element/input/email/index.html b/files/fr/web/html/element/input/email/index.html index 84846c4aa5..2e6f223117 100644 --- a/files/fr/web/html/element/input/email/index.html +++ b/files/fr/web/html/element/input/email/index.html @@ -9,12 +9,10 @@ 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> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"email"</strong></code> permettent à un utilisateur de saisir et d'éditer une adresse mail ou, si l'attribut {{htmlattrxref("multiple", "input")}} est indiqué, une liste d'adresses mail. La valeur saisie est automatiquement validée afin de vérifier que le champ est vide ou que l'adresse (ou la liste d'adresses) est correcte. Les pseudo-classes CSS {{cssxref(":valid")}} et {{cssxref(":invalid")}} sont appliquées automatiquement selon le cas.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-email.html", "tabbed-shorter")}}</div> -<div class="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> @@ -236,9 +234,7 @@ translation_of: Web/HTML/Element/input/email <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> @@ -260,14 +256,12 @@ translation_of: Web/HTML/Element/input/email <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> +<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> @@ -288,8 +282,7 @@ translation_of: Web/HTML/Element/input/email <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 { +<pre class="brush: css hidden">body { font: 16px sans-serif; } @@ -308,7 +301,6 @@ label { label::after { content: ":"; }</pre> -</div> <pre class="brush: html"><form> <div class="emailBox"> @@ -333,9 +325,9 @@ label::after { <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>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><img alt="" src="enter-valid-email-address.png"></p> <p>Si on utilise uniquement les attributs qu'on vient de décrire, on restreint les valeurs saisissables aux adresses électroniques valides de 64 caractères. Or, on veut également valider le fait que l'adresse respecte le format "<em>nomutilisateur</em>@beststartupever.com". C'est pourquoi on utilise l'attribut {{htmlattrxref("pattern", "input")}} avec la valeur <code>".+@beststartupever.com"</code>. Cette valeur est une expression rationnelle qui permet de vérifier que la chaîne de caractère contient un ou plusieurs caractères quelconques, ensuite suivi d'une arobase (@) puis du nom de domaine "beststartupever.com".</p> @@ -345,7 +337,7 @@ label::after { <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> +<p><img alt="" src="email-pattern-match-bad.png"></p> <div class="note"> <p><strong>Note :</strong> Si vous rencontrez des problèmes à propos de l'expression rationnelle, n'hésitez pas à ouvrir la console du navigateur. Cette dernière peut contenir des messages d'erreur aidant à diagnostiquer et résoudre le problème.</p> diff --git a/files/fr/web/html/element/input/file/index.html b/files/fr/web/html/element/input/file/index.html index 101a6a2f1b..924ba06e65 100644 --- a/files/fr/web/html/element/input/file/index.html +++ b/files/fr/web/html/element/input/file/index.html @@ -9,18 +9,16 @@ 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> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"file"</code></strong> permettent à un utilisateur de sélectionner un ou plusieurs fichiers depuis leur appareil et de les <em>uploader</em> vers un serveur via <a href="/fr/docs/Web/Guide/HTML/Formulaires">un formulaire</a> ou grâce à du code JavaScript <a href="/fr/docs/Using_files_from_web_applications">via l'API <em>File</em></a>.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-file.html", "tabbed-shorter")}}</div> -<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> - +<div class="note"> + <p><strong>Note :</strong></p> <ol> <li>Si plusieurs fichiers sont sélectionnés, la chaîne de caractères représente le chemin du premier fichier sélectionné. Il est possible d'accéder aux autres fichiers en JavaScript <a href="/en-US/docs/Using_files_from_web_applications#Getting_information_about_selected_file(s)">grâce à la propriété <code>FileList</code></a>.</li> <li>Si aucun fichier n'est sélectionné, la chaîne de caractères sera vide (<code>""</code>).</li> @@ -72,7 +70,9 @@ translation_of: Web/HTML/Element/input/file <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> +<div class="note"> + <p><strong>Note :</strong> <code>capture</code> était auparavant un attribut booléen qui, lorsqu'il était présent, indiquait que les capteurs de l'appareil (caméra/micro) devaient être utilisés plutôt qu'un fichier.</p> +</div> <h3 id="htmlattrdeffiles">{{htmlattrdef("files")}}</h3> @@ -139,18 +139,16 @@ translation_of: Web/HTML/Element/input/file </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">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> +<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> @@ -204,24 +202,20 @@ translation_of: Web/HTML/Element/input/file </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">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> +<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> @@ -245,7 +239,7 @@ input.value = "toto"; <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> +<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> @@ -263,8 +257,7 @@ input.value = "toto"; </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">html { +<pre class="brush: css hidden">html { font-family: sans-serif; } @@ -317,7 +310,6 @@ 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> @@ -331,7 +323,7 @@ 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> +<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> diff --git a/files/fr/web/html/element/input/hidden/index.html b/files/fr/web/html/element/input/hidden/index.html index 159089ca79..5ec54ea676 100644 --- a/files/fr/web/html/element/input/hidden/index.html +++ b/files/fr/web/html/element/input/hidden/index.html @@ -12,25 +12,25 @@ translation_of: Web/HTML/Element/input/hidden <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> +<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"> +<h2>Exemple simple</h2> + <pre class="brush: html"><input id="prodId" name="prodId" type="hidden" value="xm234jq"></pre> -<p>{{EmbedLiveSample('Basic_example', 600, 40)}}</p> +<p>{{EmbedLiveSample('Exemple_simple', 600, 40)}}</p> -<div class="blockIndicator note"> +<div class="note"> <p><strong>Note :</strong> Attention, les évènements DOM <code><a href="/fr/docs/Web/API/HTMLElement/input_event">input</a></code> et <code><a href="/fr/docs/Web/API/HTMLElement/change_event">change</a></code> ne s'appliquent pas à ce type de contrôle. Les champs masqués ne peuvent pas recevoir le focus, y compris en JavaScript avec <code>hiddenInput.focus()</code>).</p> </div> -</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> +<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> @@ -157,7 +157,7 @@ textarea { <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> +<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> diff --git a/files/fr/web/html/element/input/image/index.html b/files/fr/web/html/element/input/image/index.html index aa4a5acd16..4d3fac19f5 100644 --- a/files/fr/web/html/element/input/image/index.html +++ b/files/fr/web/html/element/input/image/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/input/image <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> @@ -190,7 +188,7 @@ translation_of: Web/HTML/Element/input/image <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" +<pre class="brush: html"><input id="image" type="image" width="100" height="30" alt="Login" src="https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png"></pre> <p>{{EmbedLiveSample('Les_fonctionnalités_essentielles', 600, 50)}}</p> @@ -264,7 +262,7 @@ translation_of: Web/HTML/Element/input/image <p>Voici le fragment de code HTML utilisé :</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>Connectez-vous</p> <div> <label for="userId">Identifiant</label> @@ -281,7 +279,7 @@ translation_of: Web/HTML/Element/input/image <p>Ensuite, on ajoute un feuille de style CSS pour mettre en forme les éléments :</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } @@ -300,7 +298,7 @@ label { <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <p>Connectez-vous</p> <div> <label for="userId">Identifiant</label> @@ -317,7 +315,7 @@ label { <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } diff --git a/files/fr/web/html/element/input/index.html b/files/fr/web/html/element/input/index.html index a2433db59b..54df76bc7d 100644 --- a/files/fr/web/html/element/input/index.html +++ b/files/fr/web/html/element/input/index.html @@ -16,9 +16,7 @@ translation_of: Web/HTML/Element/input <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> +<h2 id="Les_différents_types_de_champs_<input>">Les différents types de champs <code><input></code></h2> <p>La façon dont un élément <code><input></code> fonctionne dépend grandement de la valeur de son attribut <code>type</code>. Aussi, pour chacun de ces types, on aura une page de référence dédiée. Par défaut, lorsque l'attribut <code>type</code> n'est pas présent, il aura la valeur implicite <code>text</code>.</p> @@ -37,7 +35,8 @@ translation_of: Web/HTML/Element/input <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> + <div class="note"> + <p><strong>Note :</strong> Tout formulaire comportant des données sensibles doit être servi via HTTPS. Les navigateurs alertent les utilisateurs lorsque les formulaires avec de telles données sont uniquement disponibles via HTTP.</p></div> </li> <li><code>{{HTMLElement("input/radio", "radio")}}</code> : un bouton radio qui permet de sélectionner une seule valeur parmi un groupe de différentes valeurs.</li> <li><code>{{HTMLElement("input/range", "range")}}</code> : {{HTMLVersionInline("5")}} un contrôle qui permet de saisir un nombre dont la valeur exacte n'est pas importante.</li> @@ -145,7 +144,7 @@ translation_of: Web/HTML/Element/input <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> +<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> @@ -188,7 +187,7 @@ let hatSize = form.elements["hat-size"]; <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> +<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> @@ -205,12 +204,8 @@ let hatSize = form.elements["hat-size"]; <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 class="note"> +<p><strong>Note :</strong> L'attribut <code>required</code> n'est pas autorisé sur les éléments <code><input></code> avec l'attribut <code>readonly</code>. Seuls les champs textuels peuvent être mis en lecture seule. En effet, pour les autres contrôles (ex. les case à cocher et les boutons radio), il n'y a pas de réelle différence entre l'application de <code>readonly</code> ou de <code>disabled</code>.</p> </div> <h4 id="htmlattrdef(required)">{{htmlattrdef("required")}}</h4> diff --git a/files/fr/web/html/element/input/month/index.html b/files/fr/web/html/element/input/month/index.html index 301cc38dc0..6f21f8d10d 100644 --- a/files/fr/web/html/element/input/month/index.html +++ b/files/fr/web/html/element/input/month/index.html @@ -9,21 +9,19 @@ 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> +<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"month"</strong></code> permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format <code>"YYYY-MM"</code>, où <code>YYYY</code> représente l'année sur quatre chiffre et <code>MM</code> le mois sur deux chiffres.</p> <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><img alt="" src="month-control-chrome.png"></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> +<p><img alt="" src="month-control-edge.png"></p> <h2 id="Valeur">Valeur</h2> @@ -31,12 +29,12 @@ translation_of: Web/HTML/Element/input/month <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"> +<h3 id="Exemple_1">Exemple 1</h3> + <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>{{EmbedLiveSample('Exemple_1', 600, 60)}}</p> <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> @@ -44,17 +42,16 @@ translation_of: Web/HTML/Element/input/month <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> +<h3 id="Exemple_2">Exemple 2</h3> + +<pre class="brush: html hidden"><label for="bday-month">Quel est le mois de votre naissance ?</label> <input id="bday-month" type="month" name="bday-month" value="2017-06"></pre> </div> -<pre class="brush: js">var monthControl = document.querySelector('input[type="month"]'); +<pre class="brush: js hidden">var monthControl = document.querySelector('input[type="month"]'); monthControl.value = '1978-06';</pre> -<p>{{EmbedLiveSample("value-example-2", 600, 60)}}</p> -</div> +<p>{{EmbedLiveSample("Exemple_2", 600, 60)}}</p> <h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> @@ -150,7 +147,7 @@ monthControl.value = '1978-06';</pre> </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> +<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> @@ -183,7 +180,7 @@ monthControl.value = '1978-06';</pre> <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><img alt="" src="month-required.png"></p> <p>Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré.</p> @@ -213,14 +210,14 @@ input:valid+span:after { }</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> +<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><img alt="" src="month-android.png"></p> <p>Les navigateurs qui ne prennent pas en charge cette fonctionnalité basculent sur un contrôle textuel classique mais cela pose problème à la fois en termes de cohérence de l'interface utilisateur et aussi par rapport à la gestion des données.</p> @@ -255,8 +252,7 @@ input:valid+span:after { <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 { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -280,7 +276,6 @@ input:valid+span:after { 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> @@ -329,8 +324,7 @@ input:valid+span:after { <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 { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -354,7 +348,6 @@ input:valid+span:after { 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> diff --git a/files/fr/web/html/element/input/number/index.html b/files/fr/web/html/element/input/number/index.html index 3c2b06a291..8e9cbf1e5b 100644 --- a/files/fr/web/html/element/input/number/index.html +++ b/files/fr/web/html/element/input/number/index.html @@ -10,14 +10,12 @@ 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> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>number</strong></code> permettent à un utilisateur de saisir des nombres dans un formulaires. De tels contrôles incluent des mécanismes de validation natifs afin de rejeter les valeurs non-numériques. Le navigateur peut agrémenter le contrôle avec des flèches afin d'incrémenter/décrémenter la valeur grâce à la souris ou avec le doigt.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-number.html", "tabbed-shorter")}}</div> -<div class="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> +<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> @@ -81,7 +79,6 @@ translation_of: Web/HTML/Element/input/number <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> @@ -89,7 +86,6 @@ translation_of: Web/HTML/Element/input/number <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> @@ -98,17 +94,15 @@ translation_of: Web/HTML/Element/input/number <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> +<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> +<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> @@ -121,7 +115,7 @@ translation_of: Web/HTML/Element/input/number <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> +<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> @@ -249,7 +243,7 @@ input:valid+span:after { <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> +<p><strong>Attention :</strong> la validation des données des formulaires par le navigateur (côté client) doit toujours être complétée d'une validation des données côté serveur (l'utilisateur peut toujours modifier le HTML et envoyer les données au serveur).</p> </div> <h3 id="Utilisation_d'un_motif_de_validation">Utilisation d'un motif de validation</h3> diff --git a/files/fr/web/html/element/input/password/index.html b/files/fr/web/html/element/input/password/index.html index 29df138c29..7585571836 100644 --- a/files/fr/web/html/element/input/password/index.html +++ b/files/fr/web/html/element/input/password/index.html @@ -15,8 +15,6 @@ translation_of: Web/HTML/Element/input/password <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"> @@ -30,7 +28,7 @@ translation_of: Web/HTML/Element/input/password <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> +<p><strong>Note :</strong> Il n'est pas possible d'utiliser les caractères de fin de ligne (<em>Line Feed</em>) (code U+000A) et de retour chariot (<em>Carriage Return</em>) (code U+000D) dans la valeur d'un champ <code>"password"</code>. Lorsqu'on saisit la valeur, ces caractères sont retirés si besoin.</p> </div> <h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> @@ -115,7 +113,7 @@ translation_of: Web/HTML/Element/input/password <p>{{EmbedLiveSample("Un_contrôle_basique", 600, 40)}}</p> -<h3 id="Paramétrer_l’autocomplétion">Paramétrer l’autocomplétion</h3> +<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> @@ -130,12 +128,10 @@ translation_of: Web/HTML/Element/input/password <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> +<p>{{EmbedLiveSample("Paramétrer_l'autocomplétion", 600, 40)}}</p> <h3 id="Rendre_le_champ_obligatoire">Rendre le champ obligatoire</h3> @@ -194,12 +190,10 @@ translation_of: Web/HTML/Element/input/password <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> diff --git a/files/fr/web/html/element/input/radio/index.html b/files/fr/web/html/element/input/radio/index.html index b5a3cf3c8c..8b8fd78f46 100644 --- a/files/fr/web/html/element/input/radio/index.html +++ b/files/fr/web/html/element/input/radio/index.html @@ -14,12 +14,10 @@ translation_of: Web/HTML/Element/input/radio <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> +<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> @@ -69,7 +67,7 @@ translation_of: Web/HTML/Element/input/radio <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> +<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> @@ -143,7 +141,7 @@ form.addEventListener("submit", function(event) { <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>Un attribut booléen qui indique si c'est ce champ radio qui est sélectionné parmi le groupe.</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> @@ -184,7 +182,7 @@ form.addEventListener("submit", function(event) { <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> +<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> diff --git a/files/fr/web/html/element/input/range/index.html b/files/fr/web/html/element/input/range/index.html index eae6bb4f32..04f159c62d 100644 --- a/files/fr/web/html/element/input/range/index.html +++ b/files/fr/web/html/element/input/range/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/input/range <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> @@ -101,18 +99,18 @@ translation_of: Web/HTML/Element/input/range <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"> +<h4 id="Exemple_1">Exemple 1</h4> <pre class="brush: html"><input type="range" min="5" max="10" step="0.01"></pre> -<p>{{EmbedLiveSample("Granularity_sample1", 600, 40)}}</p> -</div> +<p>{{EmbedLiveSample("Exemple_1", 600, 40)}}</p> + +<h4 id="Exemple_2">Exemple 2</h4> <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>{{EmbedLiveSample("Exemple_2", 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> @@ -140,7 +138,7 @@ translation_of: Web/HTML/Element/input/range <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> + <td><img alt="Capture d'écran d'un contrôle curseur sur macOS" src="macslider-plain.png"></td> </tr> </tbody> </table> @@ -175,7 +173,7 @@ translation_of: Web/HTML/Element/input/range </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> + <td><img alt="Capture d'écran un contrôle curseur sur macOS" src="macslider-ticks.png"></td> </tr> </tbody> </table> @@ -210,7 +208,7 @@ translation_of: Web/HTML/Element/input/range </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> + <td><img alt="Capture d'écran un contrôle curseur sur macOS" src="macslider-labels.png"></td> </tr> </tbody> </table> @@ -221,47 +219,41 @@ translation_of: Web/HTML/Element/input/range <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"> +<h4 id="horizontal">Horizontal</h4> + <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>{{EmbedLiveSample("horizontal", 200, 200, "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> +<h4 id="vertical">Vertical</h4> + +<h5 id="CSS">CSS</h5> <pre class="brush: css">#volume { height: 150px; width: 50px; }</pre> -<h4 id="HTML">HTML</h4> +<h5 id="HTML">HTML</h5> <pre class="brush: html"><input type="range" id="volume" min="0" max="11" value="7" step="1"></pre> -<h4 id="Result">Result</h4> +<h5 id="Result">Résultat</h5> -<p>{{EmbedLiveSample("Orientation_sample2", 200, 200, "https://mdn.mozillademos.org/files/14985/Orientation_sample2.png")}}</p> +<p>{{EmbedLiveSample("vertical", 200, 200, "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> +<h4 id="Autre_exemple">Autre exemple</h4> + +<h5 id="HTML_2">HTML</h5> <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> @@ -269,7 +261,7 @@ translation_of: Web/HTML/Element/input/range <input type="range" min="0" max="11" value="7" step="1"> </div></pre> -<h4 id="CSS_2">CSS</h4> +<h5 id="CSS_2">CSS</h5> <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> @@ -292,10 +284,9 @@ Ensuite, on applique une transformation sur l'élément <code><input></cod <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> +<h5 id="Résultat">Résultat</h5> -<p>{{EmbedLiveSample("Orientation_sample3", 200, 200, "https://mdn.mozillademos.org/files/14987/Orientation_sample3.png")}}</p> -</div> +<p>{{EmbedLiveSample("Autre_exemple", 200, 200, "orientation_sample3.png")}}</p> <h2 id="Validation">Validation</h2> diff --git a/files/fr/web/html/element/input/reset/index.html b/files/fr/web/html/element/input/reset/index.html index fe37b12b8b..3b8ac2bf95 100644 --- a/files/fr/web/html/element/input/reset/index.html +++ b/files/fr/web/html/element/input/reset/index.html @@ -10,33 +10,30 @@ 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> +<p>Les éléments {{HTMLElement("input")}} de type <strong><code>"reset"</code></strong> sont affichés sous la forme de boutons permettant de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales.</p> <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> +<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"> +<h3 id="Exemple_1">Exemple 1</h3> <pre class="brush: html"><input type="reset" value="Réinitialiser le formulaire"></pre> -</div> -<p>{{EmbedLiveSample("summary-example3", 650, 30)}}</p> +<p>{{EmbedLiveSample("Exemple_1", 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"> +<h3 id="Exemple_2">Exemple 2</h3> + <pre class="brush: html"><input type="reset"></pre> -</div> -<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> +<p>{{EmbedLiveSample("Exemple_2", 650, 30)}}</p> <h2 id="Utiliser_les_boutons_de_réinitialisation">Utiliser les boutons de réinitialisation</h2> @@ -83,25 +80,23 @@ translation_of: Web/HTML/Element/input/reset <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> +<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> +<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> +<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> diff --git a/files/fr/web/html/element/input/search/index.html b/files/fr/web/html/element/input/search/index.html index 5707359a30..ea54004693 100644 --- a/files/fr/web/html/element/input/search/index.html +++ b/files/fr/web/html/element/input/search/index.html @@ -9,12 +9,10 @@ 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> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>search</strong></code> permettent à un utilisateur de saisir des termes de recherche.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}</div> -<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> @@ -175,11 +173,11 @@ translation_of: Web/HTML/Element/input/search <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><img alt="" src="chrome-cross-icon.png"></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> +<p><img alt="" src="firefox-auto-complete.png"></p> <h3 id="Ajouter_un_texte_indicatif">Ajouter un texte indicatif</h3> @@ -226,7 +224,7 @@ translation_of: Web/HTML/Element/input/search <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> +<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> @@ -248,7 +246,7 @@ translation_of: Web/HTML/Element/input/search <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> +<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> @@ -282,8 +280,7 @@ input:valid ~ span:after { </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">input { +<pre class="brush: css hidden">input { margin-right: 10px; } @@ -298,7 +295,6 @@ input:valid ~ span:after { padding-left: 5px; position: absolute; }</pre> -</div> <p>Voici le résultat obtenu :</p> @@ -306,7 +302,7 @@ input:valid ~ span:after { <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><img alt="Champ de formulaire avec un message attaché indiquant 'veuillez remplir ce formulaire'" src="firefox-required-message.png"></p> <p>Différents messages peuvent être affichés selon le type d'erreur liée à la saisie.</p> @@ -327,8 +323,7 @@ input:valid ~ span:after { </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">input { +<pre class="brush: css hidden">input { margin-right: 10px; } @@ -343,7 +338,6 @@ input:valid ~ span:after { padding-left: 5px; position: absolute; }</pre> -</div> <p>Voici le résultat obtenu avec ce fragment de code HTML :</p> @@ -368,8 +362,7 @@ input:valid ~ span:after { </div> </form></pre> -<div class="hidden"> -<pre class="brush: css">input { +<pre class="brush: css hidden">input { margin-right: 10px; } @@ -384,7 +377,6 @@ input:valid ~ span:after { padding-left: 5px; position: absolute; }</pre> -</div> <p>Voici le résultat obtenu avec ce fragment HTML :</p> diff --git a/files/fr/web/html/element/input/submit/index.html b/files/fr/web/html/element/input/submit/index.html index 20b704d1de..0dea8aeac7 100644 --- a/files/fr/web/html/element/input/submit/index.html +++ b/files/fr/web/html/element/input/submit/index.html @@ -11,13 +11,13 @@ 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> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"submit"</code></strong> sont affichés comme des boutons permettant d'envoyer les données d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des données du formulaire vers le serveur.</p> + +<h2 id="Exemple_simple">Exemple simple</h2> -<div id="summary-example2"> <pre class="brush: html"><input type="submit" value="Envoyer le formulaire"></pre> -</div> -<p>{{EmbedLiveSample("summary-example2", 650, 30)}}</p> +<p>{{EmbedLiveSample("Exemple_simple", 650, 30)}}</p> <h2 id="Valeur">Valeur</h2> @@ -25,11 +25,11 @@ translation_of: Web/HTML/Element/input/submit <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"> +<h3 id="Exemple_avec_valeur_par_défaut">Exemple avec valeur par défaut</h3> + <pre class="brush: html"><input type="submit"></pre> -</div> -<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p> +<p>{{EmbedLiveSample("Exemple_avec_valeur_par_défaut", 650, 30)}}</p> <h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> @@ -178,25 +178,23 @@ translation_of: Web/HTML/Element/input/submit <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> +<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> +<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> +<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> diff --git a/files/fr/web/html/element/input/tel/index.html b/files/fr/web/html/element/input/tel/index.html index 04e08e0a6d..14356c7762 100644 --- a/files/fr/web/html/element/input/tel/index.html +++ b/files/fr/web/html/element/input/tel/index.html @@ -11,12 +11,10 @@ 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> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"tel"</strong></code> permettent à un utilisateur de saisir un numéro de téléphone. Contrairement aux contrôles utilisés pour <code><a href="/fr/docs/Web/HTML/Element/input/email"><input type="email"></a></code> et <code><a href="/fr/docs/Web/HTML/Element/input/url"><input type="url"></a></code> , la valeur saisie n'est pas automatiquement validée selon un format donné car les formats des numéros de téléphone varient à travers le monde.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-tel.html", "tabbed-standard")}}</div> -<div class="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> @@ -129,20 +127,34 @@ translation_of: Web/HTML/Element/input/tel <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> +<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>L'un des avantages des contrôles de type <code>tel</code> est qu'ils permettent aux navigateurs mobiles de proposer un clavier adapté à la saisie de numéros de téléphone.</p> -<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> +<table class="standard-table"> + <caption>Exemples de claviers adaptés sur appareils mobiles.</caption> + <thead> + <tr> + <th scope="col">Firefox pour Android</th> + <th scope="col">WebKit iOS (Safari/Chrome/Firefox)</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="Capture d'écran pour Firefox pour Android" src="fx-android-tel.png"></td> + <td><img alt="Capture d'écran pour Firefox pour iOS" src="iphone-tel-keyboard-50pct.png"></td> + </tr> + </tbody> +</table> <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> +<pre class="brush: html"><input id="telNo" name="telNo" type="tel"></pre> <p>{{EmbedLiveSample('Un_contrôle_simple', 600, 40)}}</p> @@ -154,7 +166,7 @@ translation_of: Web/HTML/Element/input/tel <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" +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" placeholder="01 23 45 67 89"></pre> <p>{{EmbedLiveSample('Textes_indicatifs_-_placeholders', 600, 40)}}</p> @@ -167,7 +179,7 @@ translation_of: Web/HTML/Element/input/tel <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" +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" size="20"></pre> <p>{{EmbedLiveSample('La_taille_physique', 600, 40)}}</p> @@ -178,23 +190,21 @@ translation_of: Web/HTML/Element/input/tel <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" +<pre class="brush: html"><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> +<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" +<pre class="brush: html"><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> @@ -202,7 +212,7 @@ translation_of: Web/HTML/Element/input/tel <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"> +<pre class="brush: html"><input id="telNo" name="telNo" type="tel" list="defaultTels"> <datalist id="defaultTels"> <option value="01 23 45 67 89"> @@ -219,13 +229,15 @@ translation_of: Web/HTML/Element/input/tel <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> +<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="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> +<pre class="brush: html"><form> <div> <label for="telNo">Veuillez saisir un numéro de téléphone (obligatoire) : </label> <input id="telNo" name="telNo" type="tel" required> @@ -238,7 +250,7 @@ translation_of: Web/HTML/Element/input/tel <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 { +<pre class="brush: css">div { margin-bottom: 10px; position: relative; } @@ -268,13 +280,13 @@ input:valid+span:after { <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> +<h3 id="Utiliser_un_format_particulier">Utiliser un format particulier</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> +<pre class="brush: html"><form> <div> <label for="telNo">Veuillez saisir un numéro de téléphone (obligatoire) : </label> <input id="telNo" name="telNo" type="tel" required @@ -286,8 +298,7 @@ input:valid+span:after { </div> </form></pre> -<div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -312,7 +323,6 @@ input:valid+span:after { padding-left: 5px; color: #009000; }</pre> -</div> <p>{{EmbedLiveSample("Utiliser_un_format_particulier", 700, 70)}}</p> @@ -324,7 +334,7 @@ input:valid+span:after { <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> +<pre class="brush: html"><form> <div> <label for="country">Veuillez choisir votre pays :</label> <select id="country" name="country"> @@ -361,7 +371,7 @@ input:valid+span:after { <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"); +<pre class="brush: js">var selectElem = document.querySelector("select"); var inputElems = document.querySelectorAll("input"); selectElem.onchange = function() { @@ -415,8 +425,7 @@ selectElem.onchange = function() { <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 { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -439,7 +448,6 @@ input:valid+span:after { content: '✓'; padding-left: 5px; }</pre> -</div> <h2 id="Résumé_technique">Résumé technique</h2> diff --git a/files/fr/web/html/element/input/text/index.html b/files/fr/web/html/element/input/text/index.html index 21e8cb6692..8e33c53029 100644 --- a/files/fr/web/html/element/input/text/index.html +++ b/files/fr/web/html/element/input/text/index.html @@ -10,12 +10,10 @@ 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> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"text"</strong></code> permettent de créer des champs de saisie avec du texte sur une seule ligne.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-text.html", "tabbed-standard")}}</div> -<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> @@ -82,7 +80,6 @@ translation_of: Web/HTML/Element/input/text <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> @@ -90,7 +87,6 @@ translation_of: Web/HTML/Element/input/text <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> @@ -120,7 +116,6 @@ translation_of: Web/HTML/Element/input/text <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> @@ -135,7 +130,6 @@ translation_of: Web/HTML/Element/input/text <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> @@ -162,7 +156,6 @@ translation_of: Web/HTML/Element/input/text <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> @@ -171,11 +164,9 @@ translation_of: Web/HTML/Element/input/text <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"> @@ -183,7 +174,6 @@ translation_of: Web/HTML/Element/input/text </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> @@ -251,7 +241,7 @@ translation_of: Web/HTML/Element/input/text <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> +<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> @@ -295,9 +285,7 @@ input:valid+span:after { </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> +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> <p>Ce qui produira ce résultat :</p> @@ -324,9 +312,7 @@ input:valid+span:after { </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> +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; }</pre> <p>Voici le résultat qui est alors obtenu :</p> @@ -338,7 +324,7 @@ input:valid+span:after { <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> +<h3 id="Contraindre_un_format_spécifique_-_expression_rationnelle">Contraindre un format spécifique - expression rationnelle</h3> <p>L'attribut {{htmlattrxref("pattern","input")}} permet d'indiquer une expression rationnelle que devra respecter la valeur saisie afin d'être valide (cf. <a href="/en-US/docs/Learn/HTML/Forms/Form_validation#Validating_against_a_regular_expression">Valider un champ par rapport à une expression rationnelle</a> pour une introduction).</p> diff --git a/files/fr/web/html/element/input/time/index.html b/files/fr/web/html/element/input/time/index.html index d7ae5d56d9..ad51788acf 100644 --- a/files/fr/web/html/element/input/time/index.html +++ b/files/fr/web/html/element/input/time/index.html @@ -14,8 +14,6 @@ translation_of: Web/HTML/Element/input/time <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> @@ -24,23 +22,25 @@ translation_of: Web/HTML/Element/input/time <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> +<p><img alt="Contrôle Chrome pour une heure sur 12 heures" src="chrome_time.png">12 heures</p> + +<p><img alt="Contrôle Chrome pour une heure sur 24 heures" src="chrome-time.png">24 heures</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="Contrôle Firefox pour une heure sur 12 heures" src="firefox-time.png">12 heures</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> +<p><img alt="Contrôle Firefox pour une heure sur 24 heures" src="firefox-time-24.png">24 heures</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="edge_time.png">12 heures</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> +<p><img alt="Contrôle Edge pour la saisie sur 24 heures" src="edge-time.png">24 heures</p> <h2 id="Valeur">Valeur</h2> @@ -119,7 +119,9 @@ startTime.addEventListener("input", function() { </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> +<div class="note"> + <p><strong>Note :</strong> À la différence d'autres types de donnée, les valeurs pour les heures sont sur un domaine <strong>périodique</strong>. Cela signifie qu'une fois la valeur maximale dépassée, on revient à la valeur minimale (autrement dit, on fait le tour de l'horloge). Ainsi, si on indique <code>min</code> avec la valeur <code>"14:00"</code> et <code>max</code> avec la valeur <code>"2:00"</code>, cela signifie que les valeurs autorisées sont comprises entre 2 heures de l'après-midi et jusqu'à 2 heures du matin le jour suivant.</p> +</div> <h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> @@ -249,13 +251,8 @@ input:valid+span:after { <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> +<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> @@ -264,7 +261,7 @@ input:valid+span:after { <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><img alt="" src="chrome-android-time.png"></p> <p>Lorsqu'un navigateur ne prend pas en charge ce type d'élément, il utilise un champ texte (<code><input type="text"></code>) à la place. Mais cela crée des problèmes, tant au niveau de l'interface utilisateur que de la cohérence des données et du format.</p> @@ -301,8 +298,7 @@ input:valid+span:after { <p>Il reste donc un problème.</p> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -326,7 +322,6 @@ input:valid+span:after { 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> @@ -364,8 +359,7 @@ input:valid+span:after { <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 { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -389,7 +383,6 @@ input:valid+span:after { 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> diff --git a/files/fr/web/html/element/input/url/index.html b/files/fr/web/html/element/input/url/index.html index 949a8aaf19..56d928e2ab 100644 --- a/files/fr/web/html/element/input/url/index.html +++ b/files/fr/web/html/element/input/url/index.html @@ -10,12 +10,10 @@ 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> +<p>Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"url"</strong></code> sont employées afin de permettre à un utilisateur de saisir ou d'éditer une URL.</p> <div>{{EmbedInteractiveExample("pages/tabbed/input-url.html", "tabbed-shorter")}}</div> -<p 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"> @@ -140,7 +138,7 @@ translation_of: Web/HTML/Element/input/url <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> +<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> @@ -192,17 +190,15 @@ translation_of: Web/HTML/Element/input/url <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> +<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> @@ -229,7 +225,7 @@ translation_of: Web/HTML/Element/input/url <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> +<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> @@ -240,18 +236,16 @@ translation_of: Web/HTML/Element/input/url <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> +<h3 id="Utiliser_un_format_particulier">Utiliser un format particulier</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> @@ -259,8 +253,7 @@ translation_of: Web/HTML/Element/input/url <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 { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -282,8 +275,8 @@ translation_of: Web/HTML/Element/input/url position: absolute; content: '✓'; padding-left: 5px; - }</pre> -</div> + } +</pre> <pre class="brush: html"><form> <div> @@ -318,7 +311,7 @@ translation_of: Web/HTML/Element/input/url <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> +<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> diff --git a/files/fr/web/html/element/input/week/index.html b/files/fr/web/html/element/input/week/index.html index f9a9fd6805..b010c0cf18 100644 --- a/files/fr/web/html/element/input/week/index.html +++ b/files/fr/web/html/element/input/week/index.html @@ -15,17 +15,15 @@ translation_of: Web/HTML/Element/input/week <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><img alt="" src="week-control-chrome.png"></p> <p>Pour Edge, le contrôle associé à <code>month</code> est plus élaboré et se compose de deux listes qu'on peut faire défiler séparement pour la semaine d'une part et l'année d'autre part.</p> -<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> +<p><img alt="" src="week-control-edge.png"></p> <h2 id="Valeur">Valeur</h2> @@ -193,10 +191,10 @@ input:valid+span:after { <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> +<p><img alt="" src="week-validation-chrome.png"></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> +<p><strong>Attention :</strong> la validation des données du formulaire HTML par le navigateur ne se substitue pas à la validation des données reçues côté serveur. En effet, il est tout à fait possible pour un utilisateur de modifier le HTML côté client et de passer outre les contraintes normalement appliquées. Il est également possible d'envoyer des données au serveur sans passer par le formulaire. Ne pas vérifier les données reçues côté serveur expose à des risques d'erreur voire d'attaques.</p> </div> <h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> @@ -205,7 +203,7 @@ input:valid+span:after { <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><img alt="" src="week-chrome-android.png"></p> <p>Les navigateurs qui ne prennent pas en charge ce type de contrôle l'interprètent comme un champ texte mais cela crée des problèmes de cohérence tant au niveau de l'ergonomie qu'au niveau de la représentation des données.</p> @@ -256,8 +254,7 @@ input:valid+span:after { <p>On génère les valeurs des semaines dynamiquement.</p> -<div class="hidden"> -<pre class="brush: css">div { +<pre class="brush: css hidden">div { margin-bottom: 10px; position: relative; } @@ -281,7 +278,6 @@ input:valid+span:after { 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> |