diff options
Diffstat (limited to 'files/fr/web/html/element/input/checkbox/index.html')
| -rw-r--r-- | files/fr/web/html/element/input/checkbox/index.html | 76 |
1 files changed, 38 insertions, 38 deletions
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'; |