From dea9d1f019d9e14357c58cf18653df1ac779d9d8 Mon Sep 17 00:00:00 2001 From: julieng Date: Wed, 13 Oct 2021 07:13:08 +0200 Subject: convert content to md --- files/fr/web/html/element/input/button/index.md | 280 ++++----- files/fr/web/html/element/input/checkbox/index.md | 393 ++++++------- files/fr/web/html/element/input/color/index.md | 216 ++++--- files/fr/web/html/element/input/date/index.md | 489 ++++++++-------- .../web/html/element/input/datetime-local/index.md | 590 ++++++++++--------- files/fr/web/html/element/input/datetime/index.md | 14 +- files/fr/web/html/element/input/email/index.md | 516 ++++++++--------- files/fr/web/html/element/input/file/index.md | 572 +++++++++--------- files/fr/web/html/element/input/hidden/index.md | 248 ++++---- files/fr/web/html/element/input/image/index.md | 507 ++++++++-------- files/fr/web/html/element/input/index.md | 636 ++++++++++----------- files/fr/web/html/element/input/month/index.md | 505 ++++++++-------- files/fr/web/html/element/input/number/index.md | 482 ++++++++-------- files/fr/web/html/element/input/password/index.md | 386 ++++++------- files/fr/web/html/element/input/radio/index.md | 396 ++++++------- files/fr/web/html/element/input/range/index.md | 509 +++++++++-------- files/fr/web/html/element/input/reset/index.md | 227 ++++---- files/fr/web/html/element/input/search/index.md | 542 ++++++++---------- files/fr/web/html/element/input/submit/index.md | 345 +++++------ files/fr/web/html/element/input/tel/index.md | 573 +++++++++---------- files/fr/web/html/element/input/text/index.md | 568 +++++++++--------- files/fr/web/html/element/input/time/index.md | 555 +++++++++--------- files/fr/web/html/element/input/url/index.md | 484 +++++++--------- files/fr/web/html/element/input/week/index.md | 415 +++++++------- 24 files changed, 4972 insertions(+), 5476 deletions(-) (limited to 'files/fr/web/html/element/input') diff --git a/files/fr/web/html/element/input/button/index.md b/files/fr/web/html/element/input/button/index.md index 02a4e420e0..e0ff7fcca8 100644 --- a/files/fr/web/html/element/input/button/index.md +++ b/files/fr/web/html/element/input/button/index.md @@ -9,46 +9,53 @@ tags: - Web translation_of: Web/HTML/Element/input/button --- -
{{HTMLRef}}
+{{HTMLRef}} -

Les éléments {{HTMLElement("input")}} de type button sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement {{event("click")}}).

+Les éléments {{HTMLElement("input")}} de type **`button`** sont affichés comme des boutons poussoirs qui peuvent être programmés afin de contrôler des fonctionnalités de la page via un gestionnaire d'évènement (la plupart du temps pour l'évènement {{event("click")}}). -
{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}}
+{{EmbedInteractiveExample("pages/tabbed/input-button.html", "tabbed-shorter")}} -
-

Note : Bien que les éléments <input> de type "button" représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images.

-
+> **Note :** Bien que les éléments `` de type `"button"` représentent toujours des éléments HTML valides, l'élément {{HTMLElement("button")}}, plus récent, est la meilleure méthode pour créer des boutons hors d'un formulaire. Il est aussi possible d'insérer des éléments HTML dans l'étiquette du bouton, ce qui permet notamment d'avoir des images. + +## Valeur -

Valeur

+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). -

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).

+### Exemple 1 -

Exemple 1

-
<input type="button" value="Bouton cliquer">
+```html + +``` -

{{EmbedLiveSample("Exemple_1", 650, 30)}}

+{{EmbedLiveSample("Exemple_1", 650, 30)}} -

Exemple 2

-

Si on n'indique aucune valeur, le bouton sera vide :

+### Exemple 2 -
<input type="button">
+Si on n'indique aucune valeur, le bouton sera vide : -

{{EmbedLiveSample("Exemple_2", 650, 30)}}

+```html + +``` -

Utiliser les boutons <input>

+{{EmbedLiveSample("Exemple_2", 650, 30)}} -

Les éléments <input type="button"> ne possèdent pas de comportement particulier (leurs analogues <input type="submit"> et <input type="reset"> permettent respectivement d'envoyer et de réinitialiser des formulaires). Pour qu'un bouton <input type="button"> puisse avoir un effet, il est nécessaire d'écrire quelques lignes JavaScript.

+## Utiliser les boutons `` -

Un bouton simple

+Les éléments `` ne possèdent pas de comportement particulier (leurs analogues [``](/fr/docs/Web/HTML/Element/input/submit) et [``](/fr/docs/Web/HTML/Element/input/reset) permettent respectivement d'envoyer et de réinitialiser des formulaires). Pour qu'un bouton `` puisse avoir un effet, il est nécessaire d'écrire quelques lignes JavaScript. -

Dans cet exemple, commençons par créer un bouton simple avec un gestionnaire d'évènement permettant de déclencher une action au clic afin de démarrer cette machine (enfin, pour être plus précis : on échangera la valeur de l'attribut value du bouton et le texte situé dans le paragraphe qui suit) :

+### Un bouton simple -
<form>
-  <input type="button" value="Démarrer la machine">
-</form>
-<p>La machine est arrêtée.</p>
+Dans cet exemple, commençons par créer un bouton simple avec un gestionnaire d'évènement permettant de déclencher une action au clic afin de démarrer cette machine (enfin, pour être plus précis : on échangera la valeur de l'attribut `value` du bouton et le texte situé dans le paragraphe qui suit) : -
var btn = document.querySelector('input');
+```html
+

+  
+

+
La machine est arrêtée.

+```
+
+```js
+var btn = document.querySelector('input');
 var txt = document.querySelector('p');
 
 btn.addEventListener('click', updateBtn);
@@ -61,26 +68,28 @@ function updateBtn() {
     btn.value = 'Démarrer la machine';
     txt.textContent = 'La machine est arrêtée.';
   }
-}
+} +``` -

Dans ce script, on récupère une référence à l'objet {{domxref("HTMLInputElement")}} qui représente l'élément <input> du DOM et on stocke cette référence dans la variable btn. {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour ensuite lui rattacher une fonction qui sera utilisée lorsque l'évènement {{event("click")}} se produira sur le bouton.

+Dans ce script, on récupère une référence à l'objet {{domxref("HTMLInputElement")}} qui représente l'élément `` du DOM et on stocke cette référence dans la variable `btn`. {{domxref("EventTarget.addEventListener", "addEventListener()")}} pour ensuite lui rattacher une fonction qui sera utilisée lorsque l'évènement {{event("click")}} se produira sur le bouton. -

{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}

+{{EmbedLiveSample("Un_bouton_simple", 650, 100)}} -

Ajouter des raccourcis clavier

+### Ajouter des raccourcis clavier -

Les raccourcis clavier permettent à un utilisateur de déclencher une action grâce à une touche ou grâce à une combinaison de touches du clavier. Pour ajouter un raccourci clavier déclenchant le bouton, on pourra ajouter l'attribut universel accesskey (qu'on peut d'ailleurs utiliser pour les autres éléments {{HTMLElement("input")}}).

+Les raccourcis clavier permettent à un utilisateur de déclencher une action grâce à une touche ou grâce à une combinaison de touches du clavier. Pour ajouter un raccourci clavier déclenchant le bouton, on pourra ajouter l'attribut universel [`accesskey`](/fr/docs/Web/HTML/Attributs_universels/accesskey) (qu'on peut d'ailleurs utiliser pour les autres éléments {{HTMLElement("input")}}). -

Dans l'exemple qui suit, on définit s comme raccourci (autrement dit, il faudra appuyer sur la touche s avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. accesskey pour la liste de ces touches).

+Dans l'exemple qui suit, on définit s comme raccourci (autrement dit, il faudra appuyer sur la touche s avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. [`accesskey`](/fr/docs/Web/HTML/Attributs_universels/accesskey) pour la liste de ces touches). -
<form>
-  <input type="button" value="Démarrer la machine" accesskey="s">
-</form>
-<p>La machine est arrêtée.</p>
-
- +```html +
+ +
+

La machine est arrêtée.

+``` - +} +``` -

{{EmbedLiveSample("Ajouter_des_raccourcis_clavier", 650, 100)}}

+{{EmbedLiveSample("Ajouter_des_raccourcis_clavier", 650, 100)}} -
-

Note : Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.

-
+> **Note :** Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles. + +### Désactiver et activer un bouton -

Désactiver et activer un bouton

+Pour désactiver un bouton, il suffit d'ajouter l'attribut universel {{htmlattrxref("disabled")}} : -

Pour désactiver un bouton, il suffit d'ajouter l'attribut universel {{htmlattrxref("disabled")}} :

+```html + +``` -
<input type="button" value="Je suis désactivé" disabled>
+Il est possible d'activer ou de désactiver des boutons lors de de l'utilisation de la page en modifiant l'attribut `disabled` de l'élément dans le DOM. Dans l'exemple qui suit, le bouton est initialement activé et si on appuie dessus : il devient désactivé (c'est ce que fait la ligne de code `btn.disabled = true`). La fonction {{domxref("WindowTimers.setTimeout","setTimeout()")}} est ensuite utilisée afin de réinitialiser le bouton après deux secondes. -

Il est possible d'activer ou de désactiver des boutons lors de de l'utilisation de la page en modifiant l'attribut disabled de l'élément dans le DOM. Dans l'exemple qui suit, le bouton est initialement activé et si on appuie dessus : il devient désactivé (c'est ce que fait la ligne de code btn.disabled = true). La fonction {{domxref("WindowTimers.setTimeout","setTimeout()")}} est ensuite utilisée afin de réinitialiser le bouton après deux secondes.

+#### Exemple 1 -

Exemple 1

- +```html hidden + +``` - - +} +``` -

{{EmbedLiveSample("Exemple_1", 650, 60)}}

+{{EmbedLiveSample("Exemple_1", 650, 60)}} -

Si l'attribut disabled n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément {{HTMLElement("fieldset")}}) et en indiquant disabled sur le conteneur.

+Si l'attribut `disabled` n'est pas fourni, il est hérité depuis l'élément parent. De cette façon, on peut activer/désactiver des groupes d'éléments en les plaçant dans un conteneur (par exemple un élément {{HTMLElement("fieldset")}}) et en indiquant `disabled` sur le conteneur. -

C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut  disabled est activé sur l'élément <fieldset> lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes.

+C'est ce qu'illustre l'exemple suivant. Il est semblable à l'exemple précédent mais l'attribut  `disabled` est activé sur l'élément `
` lorsqu'on appuie sur le premier bouton. Les trois autres boutons sont donc désactivés pendant deux secondes. -

Exemple 2

+#### Exemple 2 - +```html hidden +
+ Groupe de boutons + + + +
+``` - +} +``` -

{{EmbedLiveSample("Exemple_2", 650, 60)}}

+{{EmbedLiveSample("Exemple_2", 650, 60)}} -
-

Note : À la différence des autres navigateurs, Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.

-
+> **Note :** À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité. -

Validation

+## Validation -

Les éléments <input type="button"> n'ont pas de contrainte de validation.

+Les éléments ` ` n'ont pas de contrainte de validation. -

Exemples

+## Exemples -

Dans l'exemple qui suit, on montre une application de dessin très simple qui utilise un élément {{htmlelement("canvas")}}, une courte feuille de style CSS (masquée) et du code JavaScript. Les deux contrôles situés en haut permettent de choisir la couleur et la taille de la pointe du crayon. Le bouton quant à lui permet de réinitialiser le canevas.

+Dans l'exemple qui suit, on montre une application de dessin très simple qui utilise un élément {{htmlelement("canvas")}}, une courte feuille de style CSS (masquée) et du code JavaScript. Les deux contrôles situés en haut permettent de choisir la couleur et la taille de la pointe du crayon. Le bouton quant à lui permet de réinitialiser le canevas. -
<div class="toolbar">
-  <input type="color" aria-label="Sélectionner la couleur du crayon">
-  <input type="range" min="2" max="50" value="30" aria-label="Sélectionner la taille de la pointe du crayon"><span class="output">30</span>
-  <input type="button" value="Réinitialiser le canevas">
-</div>
+```html
+

+  
+  30
+  
+

 
-<canvas class="myCanvas">
-  <p>Votre navigateur ne semble pas prendre en charge cette fonctionnalité.</p>
-</canvas>
+ +

Votre navigateur ne semble pas prendre en charge cette fonctionnalité.

+ +``` - + } +``` -
var canvas = document.querySelector('.myCanvas');
+```js
+var canvas = document.querySelector('.myCanvas');
 var width = canvas.width = window.innerWidth;
 var height = canvas.height = window.innerHeight-85;
 var ctx = canvas.getContext('2d');
@@ -265,67 +286,54 @@ function draw() {
   requestAnimationFrame(draw);
 }
 
-draw();
+draw(); +``` -

{{EmbedLiveSample("Exemples", '100%', 600)}}

+{{EmbedLiveSample("Exemples", '100%', 600)}} -

Résumé technique

+## Résumé technique - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
{{anch("Valeur")}}A {{domxref("DOMString")}} used as the button's label
Évènements{{event("click")}}
Attributs pris en Supported common attributes{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}
Attributs IDLvalue
MéthodesAucune
{{anch("Valeur")}}A {{domxref("DOMString")}} used as the button's label
Évènements{{event("click")}}
Attributs pris en Supported common attributes + {{htmlattrxref("type", "input")}}, and + {{htmlattrxref("value", "input")}} +
Attributs IDLvalue
MéthodesAucune
-

Spécifications

- - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}}{{Spec2('HTML5 W3C')}}
+## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'forms.html#button-state-(type=button)', '<input type="button">')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#button-state-(type=button)', '<input type="button">')}} | {{Spec2('HTML5 W3C')}} | | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("html.elements.input.input-button")}}

+{{Compat("html.elements.input.input-button")}} -

Voir aussi

+## Voir aussi -
    -
  • L'élément {{HTMLElement("input")}}
    • -
  • L'interface DOM {{domxref("HTMLInputElement")}} implémentée par l'élément
    • -
  • L'élément {{HTMLElement("button")}}, plus moderne
    • -
+- L'élément {{HTMLElement("input")}} +- L'interface DOM {{domxref("HTMLInputElement")}} implémentée par l'élément +- L'élément {{HTMLElement("button")}}, plus moderne diff --git a/files/fr/web/html/element/input/checkbox/index.md b/files/fr/web/html/element/input/checkbox/index.md index a2e5726900..7304f7b9f8 100644 --- a/files/fr/web/html/element/input/checkbox/index.md +++ b/files/fr/web/html/element/input/checkbox/index.md @@ -9,144 +9,130 @@ tags: - Web translation_of: Web/HTML/Element/input/checkbox --- -
{{HTMLRef}}
+{{HTMLRef}} -

Les éléments {{htmlelement("input")}} de type checkbox sont affichés sous la forme de boîtes à cocher qui sont cochées lorsqu'elles sont activées. Elles permettent de sélectionner une ou plusieurs valeurs dans un formulaire.

+Les éléments {{htmlelement("input")}} de type **`checkbox`** sont affichés sous la forme de boîtes à cocher qui sont cochées lorsqu'elles sont activées. Elles permettent de sélectionner une ou plusieurs valeurs dans un formulaire. -
{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}}
+{{EmbedInteractiveExample("pages/tabbed/input-checkbox.html", "tabbed-standard")}} -
-

Note : Les boutons radio sont semblables aux cases à cocher mais il existe une différence importante : les boutons radio permettent de sélectionner une seule valeur parmi plusieurs alors que les cases à cocher permettent de cocher/décocher plusieurs valeurs d'un groupe.

-
+> **Note :** [Les boutons radio](/fr/docs/Web/HTML/Element/input/radio) sont semblables aux cases à cocher mais il existe une différence importante : les boutons radio permettent de sélectionner une seule valeur parmi plusieurs alors que les cases à cocher permettent de cocher/décocher plusieurs valeurs d'un groupe. -

Valeur

+## Valeur -

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 :

+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 : -
<form>
-  <div>
-    <input type="checkbox" id="subscribeNews" name="subscribe" value="newsletter">
-    <label for="subscribeNews">Souhaitez-vous vous abonner à la newsletter ?</label>
-  </div>
-  <div>
-    <button type="submit">S'abonner</button>
-  </div>
-</form>
+```html +
+
+ + +
+
+ +
+
+``` -

{{EmbedLiveSample('Valeur', 600, 60)}}

+{{EmbedLiveSample('Valeur', 600, 60)}} -

Dans cet exemple, on a le nom (l'attribut name) subscribe utilisé pour la case à cocher avec une valeur (l'attribut value) qui est newsletter. Lorsque le formulaire est envoyé, les données seront transmises sous la forme subscribe=newsletter.

+Dans cet exemple, on a le nom (l'attribut `name`) `subscribe` utilisé pour la case à cocher avec une valeur (l'attribut `value`) qui est `newsletter`. Lorsque le formulaire est envoyé, les données seront transmises sous la forme `subscribe=newsletter`. -

Si l'attribut value n'était pas renseigné, la valeur par défaut sera on (dans l'exemple, les données envoyées au serveur auraient la forme subscribe=on).

+Si l'attribut `value` n'était pas renseigné, la valeur par défaut sera `on` (dans l'exemple, les données envoyées au serveur auraient la forme `subscribe=on`). -
-

Note : Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, aucune valeur n'est envoyée au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme value=unchecked) ; la valeur n'est pas transmise au serveur du tout.

-
+> **Note :** Si la case à cocher n'est pas cochée lorsque le formulaire est envoyé, aucune valeur n'est envoyée au serveur pour indiquer cet état (autrement dit, le client n'envoie pas quelque chose comme `value=unchecked`) ; la valeur n'est pas transmise au serveur du tout. -

Attributs supplémentaires

+## Attributs supplémentaires -

En plus des attributs qui sont partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type "checkbox" prennent aussi en charge les attributs suivants :

+En plus des attributs qui sont partagés par l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"checkbox"` prennent aussi en charge les attributs suivants : - - - - - - - - - - - - - - - - - -
AttributDescription
{{anch("checked")}}Un attribut booléen. Si celui-ci est présent, la case à cocher sera cochée.
{{anch("value")}}La chaîne de caractères qui sera utilisée pour représenter la valeur lorsque celle-ci sera envoyée au serveur si la case est cochée.
+| Attribut | Description | +| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | +| `{{anch("checked")}}` | Un attribut booléen. Si celui-ci est présent, la case à cocher sera cochée. | +| `{{anch("value")}}` | La chaîne de caractères qui sera utilisée pour représenter la valeur lorsque celle-ci sera envoyée au serveur si la case est cochée. | -

{{htmlattrdef("checked")}}

+### {{htmlattrdef("checked")}} -

Un attribut booléen qui indique si la case est cochée. Cet attribut n'indique pas si la case est actuellement cochée : si l'état a été modifié, l'attribut dans le document ne reflètera pas cette modification (seul l'attribut IDL checkedde l'objet {{domxref("HTMLInputElement")}} est mis à jour).

+Un attribut booléen qui indique si la case est cochée. Cet attribut n'indique pas si la case est actuellement cochée : si l'état a été modifié, l'attribut dans le document ne reflètera pas cette modification (seul l'attribut IDL `checked`de l'objet {{domxref("HTMLInputElement")}} est mis à jour). -
-

Note : À la différence des autres champs, les valeurs des cases à cocher ne sont envoyées au serveur que lorsqu'elles sont cochées. Lorsque c'est le cas, c'est la valeur de l'attribut value qui est envoyé.

-
+> **Note :** À la différence des autres champs, les valeurs des cases à cocher ne sont envoyées au serveur que lorsqu'elles sont cochées. Lorsque c'est le cas, c'est la valeur de l'attribut `value` qui est envoyé. -

À la différence des autres navigateurs, Firefox conserve l'état coché placé dynamiquement d'un champ <input> après les rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} peut être utilisé afin de contrôler cette fonctionnalité.

+À la différence des autres navigateurs, Firefox [conserve l'état coché placé dynamiquement](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) d'un champ `` après les rechargements de la page. L'attribut {{htmlattrxref("autocomplete","input")}} peut être utilisé afin de contrôler cette fonctionnalité. -

{{htmlattrdef("value")}}

+### {{htmlattrdef("value")}} -

L'attribut value est partagé par l'ensemble des éléments <input> mais il a un rôle spécifique pour les champs de type checkbox : lorsqu'un formulaire est envoyé, seules les cases à cocher qui sont cochées sont envoyées au serveur et c'est la valeur de l'attribut value qui est envoyée. Si l'attribut value n'est pas renseigné, ce sera la chaîne de caractères "on" qui sera envoyée par défaut.

+L'attribut `value` est partagé par l'ensemble des éléments `` mais il a un rôle spécifique pour les champs de type `checkbox` : lorsqu'un formulaire est envoyé, seules les cases à cocher qui sont cochées sont envoyées au serveur et c'est la valeur de l'attribut `value` qui est envoyée. Si l'attribut `value` n'est pas renseigné, ce sera la chaîne de caractères `"on"` qui sera envoyée par défaut. -

Utiliser les cases à cocher

+## Utiliser les cases à cocher -

Gérer plusieurs cases à cocher

+### Gérer plusieurs cases à cocher -

Dans l'exemple précédent, il n'y a qu'une seule case à cocher. Dans un scénario réaliste, on aura vraisemblablement plusieurs cases à cocher. Si celles-ci n'ont pas de rapport entre elles, il est possible de les gérer de façon séparée avec des cases à cocher « unitaires » comme illustré précédemment. Toutefois, si les valeurs sont liées entre elles, il est alors nécessaire d'indiquer ce lien.

+Dans l'exemple précédent, il n'y a qu'une seule case à cocher. Dans un scénario réaliste, on aura vraisemblablement plusieurs cases à cocher. Si celles-ci n'ont pas de rapport entre elles, il est possible de les gérer de façon séparée avec des cases à cocher « unitaires » comme illustré précédemment. Toutefois, si les valeurs sont liées entre elles, il est alors nécessaire d'indiquer ce lien. -

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")}}).

+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")}}). -
<fieldset>
-  <legend>Veuillez sélectionner vos intérêts :</legend>
-  <div>
-    <input type="checkbox" id="coding" name="interest" value="coding">
-    <label for="coding">Développement</label>
-  </div>
-  <div>
-    <input type="checkbox" id="music" name="interest" value="music">
-    <label for="music">Musique</label>
-  </div>
-</fieldset>
+```html +
+ Veuillez sélectionner vos intérêts : +
+ + +
+
+ + +
+
+``` -

{{EmbedLiveSample('Gérer_plusieurs_cases_à_cocher', 600, 100)}}

+{{EmbedLiveSample('Gérer_plusieurs_cases_à_cocher', 600, 100)}} -

Dans cet exemple on voit que chaque case à cocher utilise le même attribut name. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : interest=coding&interest=music. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélctionnées (voir Gérer plusieurs cases à cocher avec une seule variable côté serveur par exemple).

+Dans cet exemple on voit que chaque case à cocher utilise le même attribut `name`. Si les deux cases sont cochées lorsque le formulaire est envoyé, la chaîne des paires nom/valeur qui sera envoyée au serveur sera : `interest=coding&interest=music`. Lorsque les données parviennent au serveur, on peut ainsi récupérer un tableau des valeurs sélctionnées (voir [Gérer plusieurs cases à cocher avec une seule variable côté serveur](https://stackoverflow.com/questions/18745456/handle-multiple-checkboxes-with-a-single-serverside-variable) par exemple). -

Cocher certaines cases par défaut

+### Cocher certaines cases par défaut -

Afin qu'une case à cocher soit sélectionnée par défaut, il suffit de placer l'attribut booléen checked. Voir l'exemple qui suit :

+Afin qu'une case à cocher soit sélectionnée par défaut, il suffit de placer l'attribut booléen `checked`. Voir l'exemple qui suit : -
<fieldset>
-  <legend>Veuillez sélectionner vos intérêts</legend>
-  <div>
-    <input type="checkbox" id="coding" name="interest" value="coding" checked>
-    <label for="coding">Développement</label>
-  </div>
-  <div>
-    <input type="checkbox" id="music" name="interest" value="music">
-    <label for="music">Musique</label>
-  </div>
-</fieldset>
+```html +
+ Veuillez sélectionner vos intérêts +
+ + +
+
+ + +
+
+``` -

{{EmbedLiveSample('Cocher_certaines_cases_par_défaut', 600, 100)}}

+{{EmbedLiveSample('Cocher_certaines_cases_par_défaut', 600, 100)}} -

Fournir une zone cliquable plus grande

+### Fournir une zone cliquable plus grande -

Dans les exemples précédents, vous avez peut-être remarqué qu'il était possible de cocher une case en cliquant sur l'élément {{htmlelement("label")}} associé. Il s'agit d'une fonctionnalité particulièrement utile des étiquettes de formulaire HTML : il y a ainsi plus d'espace qui peut être utilisé pour sélectionner les options voulues (notamment sur les petits écrans).

+Dans les exemples précédents, vous avez peut-être remarqué qu'il était possible de cocher une case en cliquant sur l'élément {{htmlelement("label")}} associé. Il s'agit d'une fonctionnalité particulièrement utile des étiquettes de formulaire HTML : il y a ainsi plus d'espace qui peut être utilisé pour sélectionner les options voulues (notamment sur les petits écrans). -

En plus des raisons liées à l'accessibilité, il s'agit d'une bonne raison pour indiquer correctement des éléments <label> dans vos formulaires.

+En plus des raisons liées à l'accessibilité, il s'agit d'une bonne raison pour indiquer correctement des éléments `
+ +``` -

La feuille de style CSS utilisée est la suivante :

+On voit ici peu de modifications mais notamment l'ajout d'éléments {{htmlelement("fieldset")}} et {{htmlelement("legend")}} qui permettent de grouper les options (à la fois pour la mise en forme et pour la sémantique du document). -
html {
+La feuille de style CSS utilisée est la suivante :
+
+```css
+html {
   font-family: sans-serif;
 }
 
@@ -280,74 +270,62 @@ button:active {
   background-color: white;
   color: black;
   outline: 1px solid black;
-}
+} +``` -

La propriété utilisée la plus notable est {{cssxref("-moz-appearance")}} (utilisée avec certains préfixes navigateur). Par défaut, les boutons radios (ainsi que les cases à cocher) sont mis en forme avec l'apparence native liée au système d'exploitation sous-jacente. Avec appearance: none, on peut passer outre cette mise en forme native et créer ses propres styles pour ces boutons. Ici, nous avons utilisé {{cssxref("border")}} et {{cssxref("border-radius")}} avec {{cssxref("transition")}} afin de créer une animation lors de la sélection. On utilise également la pseudo-classe {{cssxref(":checked")}} pour définir l'apparence du bouton radio lorsqu'il est sélectionné.

+La propriété utilisée la plus notable est {{cssxref("-moz-appearance")}} (utilisée avec certains préfixes navigateur). Par défaut, les boutons radios (ainsi que les cases à cocher) sont mis en forme avec l'apparence native liée au système d'exploitation sous-jacente. Avec `appearance: none`, on peut passer outre cette mise en forme native et créer ses propres styles pour ces boutons. Ici, nous avons utilisé {{cssxref("border")}} et {{cssxref("border-radius")}} avec {{cssxref("transition")}} afin de créer une animation lors de la sélection. On utilise également la pseudo-classe {{cssxref(":checked")}} pour définir l'apparence du bouton radio lorsqu'il est sélectionné. -

Cette méthode n'est pas exempte d'inconvénient : appearance fonctionne correctement pour une mise en forme simple mais peut se comporter de façons différentes selon les navigateurs et elle ne fonctionne pas du tout avec Internet Explorer. Attention donc à tester votre site dans les différents navigateurs.

+Cette méthode n'est pas exempte d'inconvénient : `appearance` fonctionne correctement pour une mise en forme simple mais peut se comporter de façons différentes selon les navigateurs et elle ne fonctionne pas du tout avec Internet Explorer. Attention donc à tester votre site dans les différents navigateurs. -

{{EmbedLiveSample('Mettre_en_forme_les_boutons_radio', 600, 120)}}

+{{EmbedLiveSample('Mettre_en_forme_les_boutons_radio', 600, 120)}} -

De plus, la légende et le bouton d'envoi ont été mis en forme pour avoir un contraste marqué. Ce n'est pas peut-être pas la mise en forme idéale pour toutes les applications web mais cela illustre certaines des possibilités.

+De plus, la légende et le bouton d'envoi ont été mis en forme pour avoir un contraste marqué. Ce n'est pas peut-être pas la mise en forme idéale pour toutes les applications web mais cela illustre certaines des possibilités. -

Résumé technique

+## Résumé technique - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
{{anch("Valeur")}}Une chaîne de caractères {{domxref("DOMString")}} qui représente la valeur du bouton radio.
Évènements{{event("change")}} et {{event("input")}}
Attributs pris en charge{{htmlattrxref("checked", "input")}}
Attributs IDLchecked et value
Méthodes{{domxref("HTMLInputElement.select", "select()")}}
{{anch("Valeur")}} + Une chaîne de caractères {{domxref("DOMString")}} qui représente + la valeur du bouton radio. +
Évènements{{event("change")}} et {{event("input")}}
Attributs pris en charge{{htmlattrxref("checked", "input")}}
Attributs IDLchecked et value
Méthodes + {{domxref("HTMLInputElement.select", "select()")}} +
-

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}}{{Spec2('HTML5 W3C')}}
+## Spécifications + +| Spécification | État | Commentaires | +| ---------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| | | | +| {{SpecName('HTML WHATWG', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}} | {{Spec2('HTML WHATWG')}} | | +| {{SpecName('HTML5 W3C', 'forms.html#radio-button-state-(type=radio)', '<input type="radio">')}} | {{Spec2('HTML5 W3C')}} | | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("html.elements.input.input-radio")}}

+{{Compat("html.elements.input.input-radio")}} -

Voir aussi

+## Voir aussi - +- L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} du DOM qui est implémentée par cet élément +- L'interface {{domxref("RadioNodeList")}} qui décrit une liste de boutons radio diff --git a/files/fr/web/html/element/input/range/index.md b/files/fr/web/html/element/input/range/index.md index 04f159c62d..8c12a7a150 100644 --- a/files/fr/web/html/element/input/range/index.md +++ b/files/fr/web/html/element/input/range/index.md @@ -8,364 +8,373 @@ tags: - Reference translation_of: Web/HTML/Element/input/range --- -
{{HTMLRef}}
+{{HTMLRef}} -

Les éléments {{HTMLElement("input")}} dont l'attribut type vaut range permettent à l'utilisateur d'indiquer une valeur numérique comprise entre deux bornes. La valeur précise n'est pas considérée comme importante. Ces éléments sont généralement représenté avec un curseur sur une ligne ou comme un bouton de potentiel. Ce genre de widget n'étant pas précis, ce type ne devrait pas être utilisé lorsque la valeur exacte fournie par l'utilisateur est importante.

+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`range`** permettent à l'utilisateur d'indiquer une valeur numérique comprise entre deux bornes. La valeur précise n'est pas considérée comme importante. Ces éléments sont généralement représenté avec un curseur sur une ligne ou comme un bouton de potentiel. Ce genre de _widget_ n'étant pas précis, ce type ne devrait pas être utilisé lorsque la valeur exacte fournie par l'utilisateur est importante. -

{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}}

+{{EmbedInteractiveExample("pages/tabbed/input-range.html", "tabbed-standard")}} -

Si le navigateur de l'utilisateur ne prend pas en charge le type range, il utilisera le type text à la place.

+Si le navigateur de l'utilisateur ne prend pas en charge le type `range`, il utilisera le type [`text`](/fr/docs/Web/HTML/Element/input/text) à la place. -

Valeur

+## Valeur -

L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (""). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut min).  Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut :

+L'attribut {{htmlattrxref("value", "input")}} contient une chaîne de caractères {{domxref("DOMString")}} qui correspond à la représentation textuelle du nombre sélectionnée. La valeur n'est jamais une chaîne vide (`""`). La valeur par défaut est celle médiane entre le minimum et le maximum (sauf si la valeur maximale indiquée est inférieure à la valeur minimale, auquel cas la valeur par défaut est celle de l'attribut `min`).  Voici un fragment de code illustrant cet algorithme pour le choix de la valeur par défaut : -
defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min
-               : rangeElem.min + (rangeElem.max - rangeElem.min)/2;
+```js +defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min + : rangeElem.min + (rangeElem.max - rangeElem.min)/2; +``` -

Si on essaie d'obtenir une valeur inférieure au minimum, alors la valeur sera ramenée au minimum (de même si on essaye de dépasser le maximum).

+Si on essaie d'obtenir une valeur inférieure au minimum, alors la valeur sera ramenée au minimum (de même si on essaye de dépasser le maximum). -

Attributs supplémentaires

+## Attributs supplémentaires -

En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les intervalles peuvent utiliser les attributs suivants :

+En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les intervalles peuvent utiliser les attributs suivants : - - - - - - - - - - - - - - - - - - - - - -
AttributDescription
{{anch("max")}}La valeur maximale autorisée.
{{anch("min")}}La valeur minimale autorisée.
{{anch("step")}}Le pas utilisé pour incrémenter la valeur du champ. Cette valeur est utilisée pour l'interface utilisateur du contrôle et pour la validation de la valeur.
+| Attribut | Description | +| ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("max")}}` | La valeur maximale autorisée. | +| `{{anch("min")}}` | La valeur minimale autorisée. | +| `{{anch("step")}}` | Le pas utilisé pour incrémenter la valeur du champ. Cette valeur est utilisée pour l'interface utilisateur du contrôle et pour la validation de la valeur. | -

{{htmlattrdef("max")}}

+### {{htmlattrdef("max")}} -

La plus grande valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, la validation échouera. Si la valeur fournie n'est pas un nombre, aucun maximum ne sera fixé pour la valeur du contrôle.

+La plus grande valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) dépasse ce seuil, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas un nombre, aucun maximum ne sera fixé pour la valeur du contrôle. -

Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut min.

+Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut `min`. -

{{htmlattrdef("min")}}

+### {{htmlattrdef("min")}} -

La plus petite valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, la validation échouera. Si la valeur fournie n'est pas un nombre, aucun minimum ne sera fixé pour la valeur du contrôle.

+La plus petite valeur autorisée sur l'intervalle. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est inférieure à ce seuil, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas un nombre, aucun minimum ne sera fixé pour la valeur du contrôle. -

Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut max.

+Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut `max`. -

{{htmlattrdef("step")}}

+### {{htmlattrdef("step")}} -

{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}

+{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} -

Par défaut, l'incrément utilisé pour les champs de type number vaut 1 et on ne peut alors saisir que des entiers à momins que la valeur de base ne soit pas entière. Ainsi, si on définit min avec -10 et value avec 1.5, un attribut step qui vaut 1 permettra de saisir les valeurs positives 1.5, 2.5, 3.5, etc. et les valeurs négatives -0.5, -1.5, -2.5, etc.

+Par défaut, l'incrément utilisé pour les champs de type `number` vaut 1 et on ne peut alors saisir que des entiers à momins que la valeur de base ne soit pas entière. Ainsi, si on définit `min` avec -10 et `value` avec 1.5, un attribut `step` qui vaut 1 permettra de saisir les valeurs positives 1.5, 2.5, 3.5, etc. et les valeurs négatives -0.5, -1.5, -2.5, etc. -

Utiliser les intervalles

+## Utiliser les intervalles -

Bien que le type "number" permette à l'utilisateur de saisir un nombre avec certaines contraintes optionnelles (par exemple pour que la valeur soit comprise entre un minimum et un maximum), ce type nécessite de saisir une valeur spécifique. Le type "range" permet de saisir une valeur lorsque l'exactitude de celle-ci importe peu.

+Bien que le type `"number"` permette à l'utilisateur de saisir un nombre avec certaines contraintes optionnelles (par exemple pour que la valeur soit comprise entre un minimum et un maximum), ce type nécessite de saisir une valeur spécifique. Le type `"range"` permet de saisir une valeur lorsque l'exactitude de celle-ci importe peu. -

Voici quelques scénarios où un intervalle de saisie est plus pertinent :

+Voici quelques scénarios où un intervalle de saisie est plus pertinent : - +- Les contrôles relatis à l'audio pour le volume, la balance ou les filtres. +- Les contrôles relatifs à la configuration des couleurs (canaux, transparence, luminosité, etc.) +- Les contrôles relatifs à la configuration de jeux vidéos (difficulté, distance de visibilité, taille du monde généré, etc.) +- La longueur du mot de passe pour les mots de passe générés par un gestionnaire de mots de passe. -

De façon générale, si un utilisateur est plutôt intéressé dans un pourcentage représentant la distance entre la borne minimale et la borne maximale, un intervalle de saisie sera plus pertinent (par exemple, pour le volume, on pensera plutôt « augmenter le volume jusqu'à la moitié du maximum » que « mettre le volume à 0.5 »).

+De façon générale, si un utilisateur est plutôt intéressé dans un pourcentage représentant la distance entre la borne minimale et la borne maximale, un intervalle de saisie sera plus pertinent (par exemple, pour le volume, on pensera plutôt « augmenter le volume jusqu'à la moitié du maximum » que « mettre le volume à 0.5 »). -

Indiquer le minimum et le maximum

+### Indiquer le minimum et le maximum -

Par défaut, le minimum vaut 0 et le maximum vaut 100. Si ces bornes ne conviennent pass, on peut facilement les changer via les attributs {{htmlattrxref("min", "input")}} et/ou {{htmlattrxref("max", "input")}}. Ces attributs acceptent des nombres décimaux.

+Par défaut, le minimum vaut 0 et le maximum vaut 100. Si ces bornes ne conviennent pass, on peut facilement les changer via les attributs {{htmlattrxref("min", "input")}} et/ou {{htmlattrxref("max", "input")}}. Ces attributs acceptent des nombres décimaux. -

Par exemple, afin de demander à un utilisateur de choisir une valeur approximative dans l'intervalle [-10 , 10], on pourra utiliser :

+Par exemple, afin de demander à un utilisateur de choisir une valeur approximative dans l'intervalle \[-10 , 10], on pourra utiliser : -
<input type="range" min="-10" max="10">
+```html + +``` -

{{EmbedLiveSample("Indiquer_le_minimum_et_le_maximum", 600, 40)}}

+{{EmbedLiveSample("Indiquer_le_minimum_et_le_maximum", 600, 40)}} -

Définir la granularité

+### Définir la granularité -

Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut {{htmlattrxref("step")}} qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut step avec la valeur 0.01 :

+Par défaut, la granularité vaut 1, ce qui signifie que la valeur est toujours un entier. Cela peut être modifié grâce à l'attribut {{htmlattrxref("step")}} qui permet de contrôler la granularité. Ainsi, si on souhaite une valeur comprise entre 5 et 10 et précise avec deux chiffres après la virgule, on pourra utiliser l'attribut `step` avec la valeur 0.01 : -

Exemple 1

-
<input type="range" min="5" max="10" step="0.01">
+#### Exemple 1 -

{{EmbedLiveSample("Exemple_1", 600, 40)}}

+```html + +``` -

Exemple 2

+{{EmbedLiveSample("Exemple_1", 600, 40)}} -

Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur any pour l'attribut step :

+#### Exemple 2 -
<input type="range" min="0" max="3.14" step="any">
+Si on souhaite prendre en charge n'importe quelle valeur, quel que soit le nombre de décimales, on pourra utiliser la valeur `any` pour l'attribut `step` : -

{{EmbedLiveSample("Exemple_2", 600, 40)}}

+```html + +``` -

Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans aucune restriction quant à la partie décimale.

- +{{EmbedLiveSample("Exemple_2", 600, 40)}} + +Cet exemple permet à l'utilisateur de choisir une valeur entre 0 et 3.14 sans aucune restriction quant à la partie décimale. -

Ajouter des marques et des étiquettes

+### Ajouter des marques et des étiquettes -

La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut  {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle.

+La spécification HTML fournit une certaine flexibilité aux navigateurs pour représenter le contrôle de saisie. La spécification indique comment ajouter des informations pour certains niveaux de l'intervalle grâce à l'attribut  {{htmlattrxref("list", "input")}} et à un élément {{HTMLElement("datalist")}}. En revanche, il n'y a pas de spécifications précises quant aux marques (tirets) positionnés le long du contrôle. -

Aperçus

+#### Aperçus -

La plupart des navigateurs prennent partiellement en charge ces fonctionnalités. Voici donc quelques aperçus du résultat qui peut être obtenu sur macOS avec un navigateur qui prend en charge chacune des fonctionnalités.

+La plupart des navigateurs prennent partiellement en charge ces fonctionnalités. Voici donc quelques aperçus du résultat qui peut être obtenu sur macOS avec un navigateur qui prend en charge chacune des fonctionnalités. -
Un contrôle sans marque
+##### Un contrôle sans marque -

Voici ce qu'on option lorsque le navigateur ne prend pas en charge cette fonctionnalité ou que l'attribut {{htmlattrxref("list", "input")}} est absent.

+Voici ce qu'on option lorsque le navigateur ne prend pas en charge cette fonctionnalité ou que l'attribut {{htmlattrxref("list", "input")}} est absent. - - - - - - - - - - + + + + + + + + + +
HTMLAperçu
- 
-<input type="range">
- 		Capture d'écran d'un contrôle curseur sur macOS
HTMLAperçu
<input type="range">
 + Capture d'écran d'un contrôle curseur sur macOS +
-
Un contrôle avec des marques
+##### Un contrôle avec des marques -

Dans l'exemple qui suit, le contrôle utilise un attribut list qui indique l'identifiant d'un élément {{HTMLElement("datalist")}} qui définit un ensemble de marques à appliquer sur le contrôle. Il y en a ici 11 : une marque pour 0% puis une marque tous les 10%. Chaque point pour lequel on souhaite afficher une marque est représenté par un élément {{HTMLElement("option")}} dont la valeur de l'attribut {{htmlattrxref("value", "option")}} correspond à l'emplacement de la marque.

+Dans l'exemple qui suit, le contrôle utilise un attribut `list` qui indique l'identifiant d'un élément {{HTMLElement("datalist")}} qui définit un ensemble de marques à appliquer sur le contrôle. Il y en a ici 11 : une marque pour 0% puis une marque tous les 10%. Chaque point pour lequel on souhaite afficher une marque est représenté par un élément {{HTMLElement("option")}} dont la valeur de l'attribut {{htmlattrxref("value", "option")}} correspond à l'emplacement de la marque. - - - - - - - - - - + + + + + + + + + +
HTMLAperçu
- 
-<input type="range" list="tickmarks">
-
-<datalist id="tickmarks">
-  <option value="0">
-  <option value="10">
-  <option value="20">
-  <option value="30">
-  <option value="40">
-  <option value="50">
-  <option value="60">
-  <option value="70">
-  <option value="80">
-  <option value="90">
-  <option value="100">
-</datalist>
-
- 		Capture d'écran un contrôle curseur sur macOS
HTMLAperçu
+ 
+<input type="range" list="tickmarks">
+
+<datalist id="tickmarks">
+<option value="0">
+<option value="10">
+<option value="20">
+<option value="30">
+<option value="40">
+<option value="50">
+<option value="60">
+<option value="70">
+<option value="80">
+<option value="90">
+<option value="100">
+</datalist>
+
+
+ 		+ Capture d'écran un contrôle curseur sur macOS +
-
Un contrôle avec des marques et des étiquettes
+##### Un contrôle avec des marques et des étiquettes -

Il est possible d'ajouter des étiquettes grâce à l'attribut {{htmlattrxref("label", "option")}} des éléments {{HTMLElement("option")}} correspondants aux marques.

+Il est possible d'ajouter des étiquettes grâce à l'attribut {{htmlattrxref("label", "option")}} des éléments {{HTMLElement("option")}} correspondants aux marques. - - - - - - - - - - + + + + + + + + + +
HTMLAperçu
- 
-<input type="range" list="tickmarks">
-
-<datalist id="tickmarks">
-  <option value="0" label="0%">
-  <option value="10">
-  <option value="20">
-  <option value="30">
-  <option value="40">
-  <option value="50" label="50%">
-  <option value="60">
-  <option value="70">
-  <option value="80">
-  <option value="90">
-  <option value="100" label="100%">
-</datalist>
-
- 		Capture d'écran un contrôle curseur sur macOS
HTMLAperçu
+ 
+<input type="range" list="tickmarks">
+
+<datalist id="tickmarks">
+<option value="0" label="0%">
+<option value="10">
+<option value="20">
+<option value="30">
+<option value="40">
+<option value="50" label="50%">
+<option value="60">
+<option value="70">
+<option value="80">
+<option value="90">
+<option value="100" label="100%">
+</datalist>
+
+
+ 		+ Capture d'écran un contrôle curseur sur macOS +
-
-

Note : Actuellement, aucun navigateur ne prend en charge l'ensemble de ces fonctionnalités. Firefox n'affiche aucune marque ni étiquette et Chrome affiche uniquement les marques mais pas les étiquettes. La version 66 (66.0.3359.181) de Chrome prendre en charge les étiquettes mais par défaut l'élément {{HTMLElement("datalist")}} est mis en forme avec CSS et {{cssxref("display")}}: none; , ce qui le masque. Il faut donc rajouter des règles de mises en forme spécifiques.

-
+> **Note :** Actuellement, aucun navigateur ne prend en charge l'ensemble de ces fonctionnalités. Firefox n'affiche aucune marque ni étiquette et Chrome affiche uniquement les marques mais pas les étiquettes. La version 66 (66.0.3359.181) de Chrome prendre en charge les étiquettes mais par défaut l'élément {{HTMLElement("datalist")}} est mis en forme avec CSS et {{cssxref("display")}}`: none;` , ce qui le masque. Il faut donc rajouter des règles de mises en forme spécifiques. -

Modifier l'orientation du curseur

+### Modifier l'orientation du curseur -

Par exemple :

+Par exemple : -

Horizontal

+#### Horizontal -
<input type="range" id="volume" min="0" max="11" value="7" step="1">
+```html + +``` -

{{EmbedLiveSample("horizontal", 200, 200, "orientation_sample1.png")}}

+{{EmbedLiveSample("horizontal", 200, 200, "orientation_sample1.png")}} -

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 :

+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 : -

Vertical

+#### Vertical -
CSS
+##### CSS -
#volume {
+```css
+#volume {
   height: 150px;
   width: 50px;
-}
- -
HTML
+} +``` -
<input type="range" id="volume" min="0" max="11" value="7" step="1">
+##### HTML -
Résultat
+```html + +``` -

{{EmbedLiveSample("vertical", 200, 200, "orientation_sample2.png")}}

+##### Résultat -

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.

+{{EmbedLiveSample("vertical", 200, 200, "orientation_sample2.png")}} +**Currently, no major browsers support creating vertical range inputs using CSS this way, even though it's the way the specification recommends they do it.** -

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.

+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. -

Autre exemple

+#### Autre exemple -
HTML
+##### HTML -

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 :

+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 : -
<div class="slider-wrapper">
-  <input type="range" min="0" max="11" value="7" step="1">
-</div>
+```html +
+ +
+``` -
CSS
+##### CSS -

Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément div qui indique le mode d'affichage et la taille qu'on souhaite avoir pour que la page soit correctement organisée..

+Ensuite, on applique quelques règles CSS. Voici la règle CSS pour l'élément `div` qui indique le mode d'affichage et la taille qu'on souhaite avoir pour que la page soit correctement organisée.. -
.slider-wrapper {
+```css
+.slider-wrapper {
   display: inline-block;
   width: 20px;
   height: 150px;
   padding: 0;
 }
-
-Ensuite, on applique une transformation sur l'élément <input> au sein de l'espace réservé par le <div> : +``` + +Ensuite, on applique une transformation sur l'élément `` au sein de l'espace réservé par le `
` : -
.slider-wrapper input {
+```css
+.slider-wrapper input {
   width: 150px;
   height: 20px;
   margin: 0;
   transform-origin: 75px 75px;
   transform: rotate(-90deg);
-}
+} +``` -

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é.

+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é. -
Résultat
+##### Résultat -

{{EmbedLiveSample("Autre_exemple", 200, 200, "orientation_sample3.png")}}

+{{EmbedLiveSample("Autre_exemple", 200, 200, "orientation_sample3.png")}} -

Validation

+## Validation -

Il n'existe pas de motif de validation. Cependant, voici les formes de validation automatiques qui sont appliquées :

+Il n'existe pas de motif de validation. Cependant, voici les formes de validation automatiques qui sont appliquées : - +- Si la valeur de l'attribut {{htmlattrxref("value", "input")}} est quelque chose qui ne peut pas être converti en nombre décimal, la validation échoue. +- La valeur ne doit pas être inférieure à {{htmlattrxref("min", "input")}}. La valeur minimale par défaut est 0. +- La valeur ne doit pas être supérieure à {{htmlattrxref("max", "input")}}. La valeur maximale par défaut est 0. +- La valeur doit être un multiple de {{htmlattrxref("step", "input")}}. La valeur par défaut est 1. -

Exemples

+## Exemples -

Pour compléter les exemples précédents, on pourra consulter l'article suivant :

+Pour compléter les exemples précédents, on pourra consulter l'article suivant : - +- [Contrôler plusieurs paramètres grâce à `ConstantSourceNode` (en anglais)](/fr/docs/Web/API/Web_Audio_API/Controlling_multiple_parameters_with_ConstantSourceNode) -

Résumé technique

+## Résumé technique - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
{{anch("Valeur")}}Une chaîne de caractères ({{domxref("DOMString")}}) qui contient la représentation textuelle de la valeur numérique sélectionnée. On utilisera la méthode {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} afin d'obtenir la valeur sous forme numérique (type {{jsxref("Number")}}).
Évènements{{event("change")}} et {{event("input")}}
Attributs pris en charge{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("max", "input")}}, {{htmlattrxref("min", "input")}} et {{htmlattrxref("step", "input")}}
Attributs IDLlist, value et valueAsNumber
Méthodes{{domxref("HTMLInputElement.stepDown", "stepDown()")}} et {{domxref("HTMLInputElement.stepUp", "stepUp()")}}
{{anch("Valeur")}} + Une chaîne de caractères ({{domxref("DOMString")}}) qui contient + la représentation textuelle de la valeur numérique sélectionnée. On + utilisera la méthode + {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} + afin d'obtenir la valeur sous forme numérique (type + {{jsxref("Number")}}). +
Évènements{{event("change")}} et {{event("input")}}
Attributs pris en charge + {{htmlattrxref("autocomplete", "input")}}, + {{htmlattrxref("list", "input")}}, + {{htmlattrxref("max", "input")}}, + {{htmlattrxref("min", "input")}} et + {{htmlattrxref("step", "input")}} +
Attributs IDL + list, value et valueAsNumber +
Méthodes + {{domxref("HTMLInputElement.stepDown", "stepDown()")}} + et {{domxref("HTMLInputElement.stepUp", "stepUp()")}} +
-

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}}{{Spec2('HTML WHATWG')}}Définition initiale.
{{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}}{{Spec2('HTML5.1')}}Définition initiale.
+## Spécifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('HTML WHATWG', 'forms.html#range-state-(type=range)', '<input type="range">')}} | {{Spec2('HTML WHATWG')}} | Définition initiale. | +| {{SpecName('HTML5.1', 'sec-forms.html#range-state-typerange', '<input type="range">')}} | {{Spec2('HTML5.1')}} | Définition initiale. | -

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("html.elements.input.input-range")}}

+{{Compat("html.elements.input.input-range")}} -

Voir aussi

+## Voir aussi - +- [Les formulaires HTML](/fr/docs/Web/Guide/HTML/Formulaires) +- {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}} +- [``](/fr/docs/Web/HTML/Element/input/number) diff --git a/files/fr/web/html/element/input/reset/index.md b/files/fr/web/html/element/input/reset/index.md index 3b8ac2bf95..c05051aea7 100644 --- a/files/fr/web/html/element/input/reset/index.md +++ b/files/fr/web/html/element/input/reset/index.md @@ -8,157 +8,166 @@ tags: - Reference translation_of: Web/HTML/Element/input/reset --- -
{{HTMLRef}}
+{{HTMLRef}} -

Les éléments {{HTMLElement("input")}} de type "reset" sont affichés sous la forme de boutons permettant de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales.

+Les éléments {{HTMLElement("input")}} de type **`"reset"`** sont affichés sous la forme de boutons permettant de réiniatiliser l'ensemble des champs du formulaire avec leurs valeurs initiales. -
{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}}
+{{EmbedInteractiveExample("pages/tabbed/input-reset.html", "tabbed-standard")}} -
-

Note : Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement.

-
+> **Note :** Il est généralement peu recommandé d'inclure des boutons de réinitialisation dans les formulaires. En effet, ils sont rarement utiles et peuvent être source de frustration lorsqu'on appuie dessus involontairement. -

Valeur

+## Valeur -

La valeur de l'attribut value d'un élément <input type="reset"> contient une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme texte sur le bouton.

+La valeur de l'attribut `value` d'un élément `` contient une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme texte sur le bouton. -

Exemple 1

-
<input type="reset" value="Réinitialiser le formulaire">
+### Exemple 1 -

{{EmbedLiveSample("Exemple_1", 650, 30)}}

+```html + +``` -

Si aucune valeur n'est indiquée, le bouton aura le texte par défaut « Réinitialiser » :

+{{EmbedLiveSample("Exemple_1", 650, 30)}} -

Exemple 2

+Si aucune valeur n'est indiquée, le bouton aura le texte par défaut « Réinitialiser » : -
<input type="reset">
+### Exemple 2 -

{{EmbedLiveSample("Exemple_2", 650, 30)}}

+```html + +``` -

Utiliser les boutons de réinitialisation

+{{EmbedLiveSample("Exemple_2", 650, 30)}} -

Les boutons <input type="reset"> sont utilisés pour réinitialiser les formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement grâce à JavaScript, il est préférable d'utiliser un élément {{htmlelement("button")}} (voire un élément <input type="button">).

+## Utiliser les boutons de réinitialisation -

Un bouton simple

+Les boutons `` sont utilisés pour réinitialiser les formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement grâce à JavaScript, il est préférable d'utiliser un élément {{htmlelement("button")}} (voire un élément [``](/fr/docs/Web/HTML/Element/input/button)). -

Commençons par créer un bouton de réinitialisation simple :

+### Un bouton simple -
<form>
-  <div>
-    <label for="example">Voici un champ</label>
-    <input id="example" type="text">
-  </div>
-  <div>
-    <input type="reset" value="Réinitialiser le formulaire">
-  </div>
-</form>
-
+Commençons par créer un bouton de réinitialisation simple : -

Voici le résultat obtenu :

+```html +
+
+ + +
+
+ +
+
+``` -

{{EmbedLiveSample("Un_bouton_simple", 650, 100)}}

+Voici le résultat obtenu : -

Pour essayer, saisissez un peu de texte dans le champ puis appuyez sur le bouton de réinitialisation.

+{{EmbedLiveSample("Un_bouton_simple", 650, 100)}} -

Ajouter un raccourci au bouton

+Pour essayer, saisissez un peu de texte dans le champ puis appuyez sur le bouton de réinitialisation. -

Les raccourcis claviers permettent de déclencher un bouton grâce à une touche ou à une combinaison de touches sur le clavier. Pour ajouter un raccourci clavier à un bouton de réinitialisation, il suffit d'utiliser l'attribut {{htmlattrxref("accesskey")}}.

+### Ajouter un raccourci au bouton -

Dans cet exemple, on utilise la touche r (il faudra donc appuyer sur r et d'autres touches propres au navigateur et au système d'exploitation, se référer à {{htmlattrxref("accesskey")}} pour le détails).

+Les raccourcis claviers permettent de déclencher un bouton grâce à une touche ou à une combinaison de touches sur le clavier. Pour ajouter un raccourci clavier à un bouton de réinitialisation, il suffit d'utiliser l'attribut {{htmlattrxref("accesskey")}}. -
<form>
-  <div>
-    <label for="example">Saisir un peu de texte</label>
-    <input id="example" type="text">
-  </div>
-  <div>
-    <input type="reset" value="Réinitialiser le formulaire"
-     accesskey="r">
-  </div>
-</form>
+Dans cet exemple, on utilise la touche r (il faudra donc appuyer sur r et d'autres touches propres au navigateur et au système d'exploitation, se référer à {{htmlattrxref("accesskey")}} pour le détails). -

{{EmbedLiveSample("Ajouter_un_raccourci_au_bouton", 650, 100)}}

+```html +
+
+ + +
+
+ +
+
+``` -
-

Note : Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le design du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site.

-
+{{EmbedLiveSample("Ajouter_un_raccourci_au_bouton", 650, 100)}} -

Désactiver/Activer un bouton

+> **Note :** Le problème d'un tel raccourci est que l'utilisateur ne saura pas quelle touche clavier correspond au raccourci. Dans une situation réaliste, il est nécessaire de fournir l'information via un autre biais (sans interférer avec le _design_ du site), par exemple grâce à un lien qui pointe vers la liste des différents raccourcis utilisés sur le site. -

Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribut {{htmlattrxref("disabled")}} sur l'élément :

+### Désactiver/Activer un bouton -
<input type="reset" value="Désactivé" disabled>
+Pour désactiver un bouton de réinitialisation, il suffit d'appliquer l'attribut {{htmlattrxref("disabled")}} sur l'élément : -

On peut activer/désactiver le bouton lors de la navigation sur la page avec JavaScript en modifiant la valeur de l'attribut disabled pour la passer de true à false et vice versa (par exemple avec une instruction telle que btn.disabled = true).

+```html + +``` -
-

Note : Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page <input type="button">.

-
+On peut activer/désactiver le bouton lors de la navigation sur la page avec JavaScript en modifiant la valeur de l'attribut `disabled` pour la passer de `true` à `false` et _vice versa_ (par exemple avec une instruction telle que `btn.disabled = true`). -
-

Note : À la différence des autres navigateurs, Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.

-
+> **Note :** Pour plus d'exemples concernant l'activation/la désactivation de bouton, vous pouvez consulter la page [``](/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton). -

Validation

+> **Note :** À la différence des autres navigateurs, [Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing). L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité. -

Aucune fonctionnalité de vérification native côté client n'est implémentée pour les boutons de réinitialisation.

-

Résumé technique

+## Validation +Aucune fonctionnalité de vérification native côté client n'est implémentée pour les boutons de réinitialisation. + +## Résumé technique - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + +
{{anch("Valeur")}}Une chaîne de caractères qui est utilisée comme intitulé pour le bouton.
Évènements{{event("click")}}
Attributs pris en charge{{htmlattrxref("type", "input")}} et  {{htmlattrxref("value", "input")}}
Attributs IDLvalue
MéthodesAucune
{{anch("Valeur")}} + Une chaîne de caractères qui est utilisée comme intitulé pour le bouton. +
Évènements{{event("click")}}
Attributs pris en charge + {{htmlattrxref("type", "input")}} et  + {{htmlattrxref("value", "input")}} +
Attributs IDLvalue
MéthodesAucune
-

Spécifications

+## Spécifications - - - - - - - - - - - - - - + + + + + + + + + + + + + +
SpécificationÉtat
{{SpecName('HTML WHATWG', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}}{{Spec2('HTML WHATWG')}}
{{SpecName('HTML5 W3C', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}}{{Spec2('HTML5 W3C')}}
SpécificationÉtat
+ {{SpecName('HTML WHATWG', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}} + {{Spec2('HTML WHATWG')}}
+ {{SpecName('HTML5 W3C', 'forms.html#reset-button-state-(type=reset)', '<input type="reset">')}} + {{Spec2('HTML5 W3C')}}
-

Compatibilité des navigateurs

+## Compatibilité des navigateurs -

{{Compat("html.elements.input.input-reset")}}

+{{Compat("html.elements.input.input-reset")}} -

Voir aussi

+## Voir aussi - +- L'élément {{HTMLElement("input")}} et l'interface {{domxref("HTMLInputElement")}}. +- L'élément {{HTMLElement("button")}} +- [Apprendre les formulaires et les boutons](/fr/docs/Learn/HTML/Forms_and_buttons) +- [L'accessibilité et les formulaires](/fr/docs/Web/Accessibility/ARIA/forms) +- [Les formulaires HTML](/fr/docs/Learn/HTML/Forms) diff --git a/files/fr/web/html/element/input/search/index.md b/files/fr/web/html/element/input/search/index.md index ea54004693..a7bfd39ab4 100644 --- a/files/fr/web/html/element/input/search/index.md +++ b/files/fr/web/html/element/input/search/index.md @@ -7,253 +7,206 @@ tags: - Reference translation_of: Web/HTML/Element/input/search --- -
{{HTMLRef}}
- -

Les éléments {{HTMLElement("input")}} dont l'attribut type vaut search permettent à un utilisateur de saisir des termes de recherche.

- -
{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}}
- -

Valeur

- -

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")}}.

- -
maRecherche.value;
-
- -

Si aucune contrainte de validation n'est imposée (cf. {{anch("Validation")}} pour plus de détails), la valeur peut être un texte ou une chaîne de caractères vide.

- -

Attributs supplémentaires

- -

En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de recherche prennent en charge les attributs suivants :

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributDescription
{{anch("maxlength")}}Le nombre de caractères maximal qui peut être écrit dans ce champ.
{{anch("minlength")}}Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide.
{{anch("pattern")}}Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide.
{{anch("placeholder")}}Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie.
{{anch("readonly")}}Un attribut booléen qui indique si le contenu du champ est en lecture seule.
{{anch("size")}}Un nombre qui indique le nombre de caractères affichés par le champ.
{{anch("spellcheck")}}Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée.
+{{HTMLRef}} -

{{htmlattrdef("maxlength")}}

+Les éléments {{HTMLElement("input")}} dont l'attribut `type` vaut **`search`** permettent à un utilisateur de saisir des termes de recherche. -

Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour maxlength ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à minlength.

+{{EmbedInteractiveExample("pages/tabbed/input-search.html", "tabbed-standard")}} -

Le champ ne sera pas valide si la longueur du texte dépasse maxlength en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.

+## Valeur -

{{htmlattrdef("minlength")}}

+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")}}. -

Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour minlength ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à maxlength.

+```js +maRecherche.value; +``` -

Le champ ne sera pas valide si la longueur du texte est inférieure à minlength en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur.

+Si aucune contrainte de validation n'est imposée (cf. {{anch("Validation")}} pour plus de détails), la valeur peut être un texte ou une chaîne de caractères vide. -

{{htmlattrdef("pattern")}}

+## Attributs supplémentaires -

{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}}

+En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de recherche prennent en charge les attributs suivants : -

Voir la section sur l'utilisation de cet attribut ci-après pour plus d'exemples.

+| Attribut | Description | +| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `{{anch("maxlength")}}` | Le nombre de caractères maximal qui peut être écrit dans ce champ. | +| `{{anch("minlength")}}` | Le nombre de caractères minimal qui peut être écrit dans ce champ pour qu'il soit considéré comme valide. | +| `{{anch("pattern")}}` | Une expression rationnelle à laquelle doit correspondre le texte saisi pour être valide. | +| `{{anch("placeholder")}}` | Une valeur d'exemple qui sera affichée lorsqu'aucune valeur n'est saisie. | +| `{{anch("readonly")}}` | Un attribut booléen qui indique si le contenu du champ est en lecture seule. | +| `{{anch("size")}}` | Un nombre qui indique le nombre de caractères affichés par le champ. | +| `{{anch("spellcheck")}}` | Cet attribut contrôle l'activation de la vérification orthographique sur le champ ou si la vérification orthographique par défaut doit être appliquée. | -

{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}}

+### {{htmlattrdef("maxlength")}} -

{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}

+Le nombre maximum de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `maxlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille maximale. La valeur indiquée par cet attribut doit être supérieure à `minlength`. -

{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}}

+Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte dépasse `maxlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur. -

{{htmlattrdef("spellcheck")}}

+### {{htmlattrdef("minlength")}} -

{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck-include")}}

+Le nombre minimal de caractères (exprimé en nombre de points de code UTF-16) que l'utilisateur peut saisir dans le champ. Cette valeur doit êtrer un entier positif ou nul. Si aucune valeur n'est fournie pour `minlength` ou qu'une valeur invalide est fournie, il n'y a pas de contrainte de taille minimale. La valeur indiquée par cet attribut doit être inférieur à `maxlength`. -

Attributs non-standard

+Le champ [ne sera pas valide](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) si la longueur du texte est inférieure à `minlength` en nombre de points de code UTF-16. Les contraintes de validation sont uniquement appliquées lorsque la valeur est modifiée par l'utilisateur. -

Les attributs non-standard suivants sont disponibles pour les champs de recherche. Toutefois, vu leur caractère spécifique, mieux vaut ne pas les utiliser.

+### {{htmlattrdef("pattern")}} - - - - - - - - - - - - - - - - - - - - - - - - - -
AttributDescription
{{anch("autocorrect")}}Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. Uniquement pris en charge par Safari.
{{anch("incremental")}}Cet attribut indique si des évènements {{event("search")}} doivent être envoyés afin de mettre à jour les résultats de la recherche tandis que l'utilisateur continue d'éditer la valeur du champ. Uniquement WebKit et Blink (Safari, Chrome, Opera, etc.).
{{anch("mozactionhint")}}Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche Entrée ou Retour lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. Uniquement pris en charge par Firefox pour Android.
{{anch("results")}}Le nombre maximum d'éléments qui devraient être affichés comme recherches précédentes dans la liste déroulante du champ. Uniquement pris en charge par Safari.
+{{page("/fr/docs/Web/HTML/Element/input/text", "pattern-include")}} + +Voir [la section sur l'utilisation de cet attribut ci-après](#format) pour plus d'exemples. + +{{page("/fr/docs/Web/HTML/Element/input/text", "placeholder", 0, 1, 2)}} + +{{page("/fr/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}} + +{{page("/fr/docs/Web/HTML/Element/input/text", "size", 0, 1, 2)}} + +### {{htmlattrdef("spellcheck")}} + +{{page("/fr/docs/Web/HTML/Element/input/text", "spellcheck-include")}} + +## Attributs non-standard + +Les attributs non-standard suivants sont disponibles pour les champs de recherche. Toutefois, vu leur caractère spécifique, mieux vaut ne pas les utiliser. -

{{htmlattrdef("autocorrect")}} {{non-standard_inline}}

+| Attribut | Description | +| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("autocorrect")}}` | Une chaîne de caractères qui indique si la correction automatique doit être appliquée à ce champ texte. **Uniquement pris en charge par Safari.** | +| `{{anch("incremental")}}` | Cet attribut indique si des évènements {{event("search")}} doivent être envoyés afin de mettre à jour les résultats de la recherche tandis que l'utilisateur continue d'éditer la valeur du champ. **Uniquement WebKit et Blink (Safari, Chrome, Opera, etc.).** | +| `{{anch("mozactionhint")}}` | Une chaîne de caractères qui indique le type d'action qui sera effectuée lorsque l'utilisateur appuiera sur la touche Entrée ou Retour lors de l'édition du champ. La valeur de cet attribut est utilisée comme libellé pour la touche adéquate du clavier virtuel. **Uniquement pris en charge par Firefox pour Android.** | +| `{{anch("results")}}` | Le nombre maximum d'éléments qui devraient être affichés comme recherches précédentes dans la liste déroulante du champ. **Uniquement pris en charge par Safari.** | -

{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}}

+### {{htmlattrdef("autocorrect")}} {{non-standard_inline}} -

{{htmlattrdef("incremental")}} {{non-standard_inline}}

+{{page("/fr/docs/Web/HTML/Element/input/text", "autocorrect-include")}} -

Un attribut booléen spécifique à WebKit et Blink qui indique à l'agent utilisateur de traiter la recherche en continu. Lorsque cet attribut est présent et lorsque l'utilisateur édite la valeur du champ, l'agent utilisateur envoie des évènements {{event("search")}} sur l'objet {{domxref("HTMLInputElement")}} qui représente le champ de recherche. Ainsi, on peut gérer, avec du code, la mise à jour continue des résultats de recherche.

+### {{htmlattrdef("incremental")}} {{non-standard_inline}} -

Si l'attribut incremental n'est pas indiqué, l'évènement {{event("search")}} est uniquement envoyé lorsque l'tuilisateur déclenche la recherche (en appuyant sur la touche Entrée ou Retour à l'édition du champ).

+Un attribut booléen spécifique à WebKit et Blink qui indique à l'agent utilisateur de traiter la recherche en continu. Lorsque cet attribut est présent et lorsque l'utilisateur édite la valeur du champ, l'agent utilisateur envoie des évènements {{event("search")}} sur l'objet {{domxref("HTMLInputElement")}} qui représente le champ de recherche. Ainsi, on peut gérer, avec du code, la mise à jour continue des résultats de recherche. -

La fréquence maximale à laquelle l'évènement search est envoyé est définie par chaque implémentation.

+Si l'attribut `incremental` n'est pas indiqué, l'évènement {{event("search")}} est uniquement envoyé lorsque l'tuilisateur déclenche la recherche (en appuyant sur la touche Entrée ou Retour à l'édition du champ). -

{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}

+La fréquence maximale à laquelle l'évènement `search` est envoyé est définie par chaque implémentation. -

{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}}

+### {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} -

{{htmlattrdef("results")}} {{non-standard_inline}}

+{{page("/fr/docs/Web/HTML/Element/input/text", "mozactionhint-include")}} -

L'attribut results, spécifique à Safari, est une valeur numérique qui permet de surcharger la valeur maximale du nombre de recherches précédentes affichées dans la liste déroulante des suggestions.

+### {{htmlattrdef("results")}} {{non-standard_inline}} -

Cette valeur doit être un nombre positif. Si cet attribut n'est pas fourni, ou que sa valeur est invalide, ce sera le maximum fourni par le navigateur qui sera utilisé.

+L'attribut `results`, spécifique à Safari, est une valeur numérique qui permet de surcharger la valeur maximale du nombre de recherches précédentes affichées dans la liste déroulante des suggestions. -

Utiliser un champ de recherche

+Cette valeur doit être un nombre positif. Si cet attribut n'est pas fourni, ou que sa valeur est invalide, ce sera le maximum fourni par le navigateur qui sera utilisé. -

Les éléments <input> de type search sont semblables aux éléments <input> de type text mais sont spécifiquement destinés à la gestion des termes d'une recherche.

+## Utiliser un champ de recherche -

Exemple simple

+Les éléments `` de type `search` sont semblables aux éléments `` de type `text` mais sont spécifiquement destinés à la gestion des termes d'une recherche. -
<form>
-  <div>
-    <input type="search" id="maRecherche" name="q">
-    <button>Rechercher</button>
-  </div>
-</form>
+### Exemple simple -

Cet exemple produira le résultat suivant :

+```html +
+
+ + +
+
+``` -

{{EmbedLiveSample("Exemple_simple", 600, 40)}}

+Cet exemple produira le résultat suivant : -

q est la valeur standard utilisé pour l'attribut name des champs de recherche. Lorsque le formulaire est envoyée, les données envoyées au serveur auront la forme q=termederecherche. Il est nécessaire de fournir un nom (c'est-à-dire un attribut name) à un champ, sinon aucune information ne sera envoyée lors de l'envoi du formulaire.

+{{EmbedLiveSample("Exemple_simple", 600, 40)}} -
-

Note : Il est toujours nécessaire de fournir une valeur pour l'attribut {{htmlattrxref("name","input")}} car sinon aucune valeur ne sera envoyée.

-
+`q` est la valeur standard utilisé pour l'attribut `name` des champs de recherche. Lorsque le formulaire est envoyée, les données envoyées au serveur auront la forme `q=termederecherche`. Il est nécessaire de fournir un nom (c'est-à-dire un attribut `name`) à un champ, sinon aucune information ne sera envoyée lors de l'envoi du formulaire. -

Différences entre les champs de recherche et les champs texte

+> **Note :** Il est toujours nécessaire de fournir une valeur pour l'attribut {{htmlattrxref("name","input")}} car sinon aucune valeur ne sera envoyée. -

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:

+### Différences entre les champs de recherche et les champs texte -

+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: -

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 :

+![](chrome-cross-icon.png) -

+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 : -

Ajouter un texte indicatif

+![](firefox-auto-complete.png) -

Il est possible de fournir un texte indicatif dans le champ de recherche afin de fournir une indication quant aux recherches qu'il est possible de faire. Pour cela, on ajoutera un texte avec l'attribut {{htmlattrxref("placeholder","")}}. Par exemple :

+### Ajouter un texte indicatif -
<form>
-  <div>
-    <input type="search" id="maRecherche" name="q"
-     placeholder="Rechercher sur le site…">
-    <button>Rechercher</button>
-  </div>
-</form>
+Il est possible de fournir un texte indicatif dans le champ de recherche afin de fournir une indication quant aux recherches qu'il est possible de faire. Pour cela, on ajoutera un texte avec l'attribut {{htmlattrxref("placeholder","")}}. Par exemple : -

Voici le résultat obtenu avec ce fragment HTML :

+```html +
+
+ + +
+
+``` -

{{EmbedLiveSample("Ajouter_un_texte_indicatif", 600, 40)}}

+Voici le résultat obtenu avec ce fragment HTML : -

Les champs de recherche et l’accessibilité

+{{EmbedLiveSample("Ajouter_un_texte_indicatif", 600, 40)}} -

Un des problèmes posé par les formulaires de recherche est leur accessibilité. En effet, dans la plupart des situations, il n'est pas nécessaire de fournir une étiquette indiquant le rôle de la recherche car le placement du champ rend son rôle clair (voici un exemple).

+### Les champs de recherche et l’accessibilité -

En revanche, pour les personnes qui utilisent des technologies assistives, cela peut être source de confusion. Une façon de résoudre ce problème sans modifier l'organisation visuelle est d'utiliser les fonctionnalités WAI-ARIA :

+Un des problèmes posé par les formulaires de recherche est leur accessibilité. En effet, dans la plupart des situations, il n'est pas nécessaire de fournir une étiquette indiquant le rôle de la recherche car le placement du champ rend son rôle clair ([voici un exemple](https://mdn.github.io/learning-area/accessibility/aria/website-aria-roles/)). - +En revanche, pour les personnes qui utilisent des technologies assistives, cela peut être source de confusion. Une façon de résoudre ce problème sans modifier l'organisation visuelle est d'utiliser les fonctionnalités [WAI-ARIA](/fr/docs/Learn/Accessibility/WAI-ARIA_basics) : -

Prenons un exemple :

+- Utiliser un attribut `role` avec la valeur `search` sur l'élément `
` permettra aux lecteurs d'écran d'indiquer le formulaire comme étant un formulaire de recherche. +- Si cela n'est pas suffisant, il est possible d'utiliser l'attribut `aria-label` sur l'élément ``. Cet attribut peut contenir un texte descriptif qui sera lu à voix haute par un lecteur d'écran. Il s'agit d'un équivalent non-visuel de `