From 1feae14e455488e46a8bbf593ad8f56b9096b724 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sat, 19 Mar 2022 15:28:27 +0100 Subject: Fixes #3885 - Removes {{page}} from Web/HTML (fr) (#3966) * img element * Update date time vs en-US / rm page and other xref macros * Datetime-local update + typofix for date * input email to parity vs en-US / rm macros * input month parity vs en-US * fix sidebar month * number parity vs en-US / typo month * track - parity en-us / rm macros * password - parity vs en-us and macro removal / typos on number * input range vs en-US * input search vs en-US * input tel * input week * input url * fix flaws input week * input time * fix frontmatter case * fix flaws * Typo and link fixes/nitpicking part 1 * Various fixes/nitpicking part 2, add fr images Co-authored-by: cw118 <87150472+cw118@users.noreply.github.com> --- files/fr/web/html/element/input/date/index.md | 395 +++++++++---------- .../web/html/element/input/datetime-local/index.md | 346 ++++++++--------- .../email/adresse-electronique-mauvais-motif.png | Bin 0 -> 3859 bytes files/fr/web/html/element/input/email/index.md | 288 +++++++------- .../saisir-une-adresse-electronique-valide.png | Bin 0 -> 2367 bytes .../html/element/input/month/champ-mois-requis.png | Bin 0 -> 5208 bytes files/fr/web/html/element/input/month/index.md | 243 ++++++------ files/fr/web/html/element/input/number/index.md | 287 +++++++------- files/fr/web/html/element/input/password/index.md | 207 +++++----- files/fr/web/html/element/input/range/index.md | 426 +++++++++++++-------- files/fr/web/html/element/input/search/index.md | 285 +++++++------- .../input/search/message-requis-firefox.png | Bin 0 -> 3766 bytes files/fr/web/html/element/input/tel/index.md | 286 +++++++------- files/fr/web/html/element/input/time/index.md | 323 +++++++++------- files/fr/web/html/element/input/url/index.md | 342 +++++++++-------- files/fr/web/html/element/input/week/index.md | 228 ++++++----- .../week/validation-controle-type-week-chrome.png | Bin 0 -> 5664 bytes 17 files changed, 1847 insertions(+), 1809 deletions(-) create mode 100644 files/fr/web/html/element/input/email/adresse-electronique-mauvais-motif.png create mode 100644 files/fr/web/html/element/input/email/saisir-une-adresse-electronique-valide.png create mode 100644 files/fr/web/html/element/input/month/champ-mois-requis.png create mode 100644 files/fr/web/html/element/input/search/message-requis-firefox.png create mode 100644 files/fr/web/html/element/input/week/validation-controle-type-week-chrome.png (limited to 'files/fr/web/html/element/input') diff --git a/files/fr/web/html/element/input/date/index.md b/files/fr/web/html/element/input/date/index.md index a41d265409..25b3fc26eb 100644 --- a/files/fr/web/html/element/input/date/index.md +++ b/files/fr/web/html/element/input/date/index.md @@ -1,170 +1,191 @@ --- title: -slug: Web/HTML/Element/Input/date -tags: - - Element - - HTML - - Input - - Reference - - Web +slug: Web/HTML/Element/input/date translation_of: Web/HTML/Element/input/date +browser-compat: html.elements.input.input-date --- {{HTMLRef}} -Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`date`** permettent de créer des champs permettant de saisir des dates (composées d'une année, d'un mois et d'un jour mais pas d'une heure , cf. [`time`](/fr/docs/Web/HTML/Element/input/time)). +Les éléments [``](/fr/docs/Web/HTML/Element/Input) dont l'attribut `type` vaut **`date`** permettent de créer des champs où saisir des dates, via un champ texte dont la valeur est validée ou avec un sélecteur de date. + +La valeur fournie par un tel contrôle contiendra l'année, le mois et le jour mais _pas_ l'heure et les minutes. Les éléments [``](/fr/docs/Web/HTML/Element/input/time) et [``](/fr/docs/Web/HTML/Element/input/datetime-local) permettent respectivement de saisir des heures et des combinaisons de dates et heures. {{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}} -L'apparence du contrôle affiché dépend du navigateur utilisé et la prise en charge de cette fonctionnalité est hétérogène (cf. la section {{anch("Compatibilité des navigateurs")}} pour plus de détails). Pour les navigateurs qui ne prennent pas en charge ce type d'élément ``, c'est un simple [``](/fr/docs/Web/HTML/Element/input/text) qui sera affiché. +L'apparence du contrôle affiché dépend du navigateur utilisé et la prise en charge de cette fonctionnalité est hétérogène (cf. la section en fin d'article sur la compatibilité des navigateurs pour plus de détails). Pour les navigateurs qui ne prennent pas en charge ce type d'élément ``, c'est un simple [``](/fr/docs/Web/HTML/Element/Input/text) qui sera affiché. + + + + + + + + + + + + + + + + + + + + + + + + +
ValeurUne chaîne de caractères DOMString qui représente une date au format yyyy-mm-dd (quatre chiffres pour l'année, un tiret, deux chiffres pour le mois, un tiret, deux chiffres pour le jour) ou qui est vide.
Évènementschange et input
Attributs communs pris en chargeautocomplete, list, readonly, step
Attributs IDLlist, value, valueAsDate, valueAsNumber.
Méthodesselect(), stepDown(), stepUp() +
## Valeur -Une chaîne de caractères qui représente la valeur de la date saisie dans le contrôle. Le format à respecter est décrit dans dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_dates). Il est possible de fournir une valeur par défaut en renseignant l'attribut {{htmlattrxref("value", "input")}} : +Une chaîne de caractères ([`DOMString`](/fr/docs/Web/API/DOMString)) qui représente la valeur de la date saisie dans le contrôle. La date est dans le format ISO8601, décrit dans [cette section de l'article sur les formats](/fr/docs/Web/HTML/Date_and_time_formats). + +Il est possible de fournir une valeur par défaut en renseignant l'attribut [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) : ```html ``` -{{EmbedLiveSample('Valeur', 600, 40) }} +{{EmbedLiveSample('', 600, 40)}} -On notera que le format d'affichage est différent de la valeur réelle de l'attribut `value` — le format de la date affichée sera déterminé en fonction de la langue utilisée par le navigateur alors que la valeur de l'attribut `value` aura toujours la forme `yyyy-mm-dd` (c'est-à-dire les quatres chiffres de l'année, suivi d'un tiret, suivi des deux chiffres pour le mois, suivi d'un tiret puis des deux chiffres pour le jour). +> **Note :** Le format d'affichage est différent de la valeur réelle de l'attribut `value` — le format de la date affichée sera déterminé en fonction de la langue utilisée par le navigateur alors que la valeur de l'attribut `value` aura toujours la forme `yyyy-mm-dd` (c'est-à-dire les quatre chiffres de l'année, suivi d'un tiret, suivi des deux chiffres pour le mois, suivi d'un tiret puis des deux chiffres pour le jour). -On peut également récupérer la valeur de la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}} : +On peut également récupérer la valeur de la date en JavaScript grâce à la propriété [`HTMLInputElement.value`](/fr/docs/Web/API/HTMLInputElement) : ```js -var dateControl = document.querySelector('input[type="date"]'); +let dateControl = document.querySelector('input[type="date"]'); dateControl.value = '2017-06-01'; +console.log(dateControl.value); // affiche "2017-06-01" +console.log(dateControl.valueAsNumber); // affiche 1496275200000, un timestamp JavaScript (exprimé en ms) ``` -## Utiliser les contrôles de saisie de date - -Les contrôles de date semblent pratiques : ils fournissent une interface utilisateur simple afin de sélectionner des dates et normalisent la donnée saisie dans un format unique pour l'envoyer au serveur, quelle que soit la locale de l'utilisateur. Malheureusement, il y a certains problèmes de prise en charge par les navigateurs pour ``. - -Nous verrons ici différents cas d'utilisation de ``, simples et complexes. Puis nous verrons comment parer aux problèmes de support des navigateurs. +Dans l'exemple qui précède, on récupère le premier élément `` dont l'attribut `type` vaut `date` et on définit sa valeur à `2017-06-01` (ce qui correspond au premier juin 2017). On lit ensuite cette valeur sous la forme d'une chaîne de caractères puis sous forme numérique. ## Attributs supplémentaires -En complément des attributs communs à l'ensemble des éléments {{HTMLElement("input")}}, les champs de type `"date"` gèrent les attributs suivants : +En complément des attributs communs à l'ensemble des éléments [``](/fr/docs/Web/HTML/Element/Input), les champs de type `"date"` gèrent les attributs suivants : -| Attribut | Description | -| ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -| `{{anch("max")}}` | La date la plus avancée qui peut être saisie. | -| `{{anch("min")}}` | La date la plus reculée qui peut être saisie. | -| `{{anch("step")}}` | Le pas à utiliser pour l'incrément quand on utilise les boutons d'augmentation/diminution. Cet incrément est également utilisé pour la validation. | +### `max` -### {{htmlattrdef("max")}} - -La date la plus avancée qui peut être saisie dans le contrôle. Si la valeur de {{htmlattrxref("value", "input")}} est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `max` n'est pas une chaîne de caractères qui suit le format `yyyy-MM-dd`, il n'y aura pas de valeur maximale. +La date la plus avancée qui peut être saisie dans le contrôle. Si la valeur de [`value`](/fr/docs/Web/HTML/Element/Input#attr-value) est supérieure à la date indiquée par cet attribut, l'élément ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur de l'attribut `max` n'est pas une chaîne de caractères qui suit le format `yyyy-mm-dd`, il n'y aura pas de valeur maximale. La valeur de cet attribut doit être une date supérieure ou égale à celle indiquée par l'attribut `min`. -### {{htmlattrdef("min")}} +### `min` -La date minimale qui peut être saisie dans le contrôle. Toute date saisie antérieure à celle-ci ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur de l'attribut `min` n'est pas une chaîne de caractères qui suit le format `yyyy-MM-dd`, il n'y aura pas de valeur minimale. +La date minimale qui peut être saisie dans le contrôle. Toute date saisie antérieure à celle-ci ne respectera pas [les contraintes de validation](/fr/docs/Web/Guide/HTML/Constraint_validation). Si la valeur de l'attribut `min` n'est pas une chaîne de caractères qui suit le format `yyyy-mm-dd`, il n'y aura pas de valeur minimale. La valeur de cet attribut doit être une date antérieure ou égale à celle indiquée par l'attribut `max`. -### {{htmlattrdef("step")}} +### `step` + +L'attribut `step` est un nombre qui indique le « pas » suivi par le compteur. Il peut également prendre la valeur spéciale `any` (décrite ci-après). Seules les valeurs qui suivent cette progression (à partir de `min` ou de `value` si ces attributs sont fournis) seront considérées comme valides. + +Une chaîne de caractères `any` indique qu'aucune contrainte de pas n'est appliquée et que n'importe quelle valeur (sous réserve qu'elle respecte les autres contraintes potentiellement indiquées par `min` ou `max`) est valide. -{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} +> **Note :** Lorsque les données saisies par l'utilisatrice ou l'utilisateur ne respectent pas cette contrainte, l'agent utilisateur pourra arrondir à la valeur valide la plus proche, avec une préférence pour les dates les plus avancées quand deux dates sont aussi proches de la valeur saisie. -Pour les champs `date`, la valeur de `step` est exprimée en jours avec un facteur de multiplication de 86 400 000 (soit le nombre de millisecondes en une journée). La valeur par défaut de `step` est 1. +Pour les champs `date`, la valeur de `step` est exprimée en jours et est traité comme un nombre de millisecondes égal à 86 400 000 fois la valeur de `step`. La valeur par défaut de `step` est 1 (ce qui correspond à un jour). > **Note :** Utiliser `any` comme valeur pour `step` produira le même effet que la valeur `1` pour les champs `date`. ## Utilisation des contrôles de saisie des dates -Les champs date paraissent pratiques de prime abord : ils fournissent une interface utilisateur simple qui permet de sélectionner des dates et normalisent le format des données envoyées au serveur quelle que soit la locale de l'utilisateur. Toutefois, il existe certains problèmes avec `` en raison de la prise en charge limitée des navigateurs. +Les champs date paraissent pratiques de prime abord : ils fournissent une interface utilisateur simple qui permet de sélectionner des dates et normalisent le format des données envoyées au serveur quelle que soit la locale de l'utilisatrice ou l'utilisateur. Toutefois, il existe certains problèmes avec `` en raison de la prise en charge limitée des navigateurs. Dans les exemples qui suivent, nous verrons comment utiliser `` dans des cas simples et complexes en ajoutant des conseils quant à la prise en charge des navigateurs (en espérant que celle-ci s'améliore au fur et à mesure). ### Utilisation simple -Dans son expression la plus simple `` s'utilise avec un élément `` et un élément {{htmlelement("label")}} : +Dans son expression la plus simple `` s'utilise avec un élément `` et un élément [`