diff options
| author | julieng <julien.gattelier@gmail.com> | 2021-10-13 07:13:08 +0200 |
|---|---|---|
| committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-11-07 11:56:53 +0100 |
| commit | dea9d1f019d9e14357c58cf18653df1ac779d9d8 (patch) | |
| tree | d20318111821d4e935a6c53409240078c4f687e5 /files/fr/web/html/element/input/month/index.md | |
| parent | 8829a7c9eb82f180bac76ed5836aaef95be209a1 (diff) | |
| download | translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.tar.gz translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.tar.bz2 translated-content-dea9d1f019d9e14357c58cf18653df1ac779d9d8.zip | |
convert content to md
Diffstat (limited to 'files/fr/web/html/element/input/month/index.md')
| -rw-r--r-- | files/fr/web/html/element/input/month/index.md | 505 |
1 files changed, 248 insertions, 257 deletions
diff --git a/files/fr/web/html/element/input/month/index.md b/files/fr/web/html/element/input/month/index.md index 6f21f8d10d..e09147781e 100644 --- a/files/fr/web/html/element/input/month/index.md +++ b/files/fr/web/html/element/input/month/index.md @@ -7,184 +7,170 @@ tags: - Reference translation_of: Web/HTML/Element/input/month --- -<div>{{HTMLRef}}</div> +{{HTMLRef}} -<p>Les éléments {{htmlelement("input")}} dont l'attribut <code>type</code> vaut <code><strong>"month"</strong></code> permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format <code>"YYYY-MM"</code>, où <code>YYYY</code> représente l'année sur quatre chiffre et <code>MM</code> le mois sur deux chiffres.</p> +Les éléments {{htmlelement("input")}} dont l'attribut `type` vaut **`"month"`** permettent de créer des contrôles où l'utilisateur peut saisir un mois et année. La valeur associée à un tel élément suit le format `"YYYY-MM"`, où `YYYY` représente l'année sur quatre chiffre et `MM` le mois sur deux chiffres. -<div>{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}}</div> +{{EmbedInteractiveExample("pages/tabbed/input-month.html", "tabbed-shorter")}} -<p>L'interface utilisateur associée à ce contrôle varie d'un navigateur à l'autre et la prise en charge de cette fonctionnalité reste encore hétérogène : seuls Chrome, Opéra et Edge implémentent cette fonctionnalité sur ordinateur et la plupart des navigateurs mobiles possèdent une implémentation. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, l'élément sera transformé en un simple <code><a href="/fr/docs/Web/HTML/Element/input/text"><input type="text"></a></code>.</p> +L'interface utilisateur associée à ce contrôle varie d'un navigateur à l'autre et la prise en charge de cette fonctionnalité reste encore hétérogène : seuls Chrome, Opéra et Edge implémentent cette fonctionnalité sur ordinateur et la plupart des navigateurs mobiles possèdent une implémentation. Pour les navigateurs qui ne prennent pas en charge cette fonctionnalité, l'élément sera transformé en un simple [`<input type="text">`](/fr/docs/Web/HTML/Element/input/text). -<p>Si votre navigateur ne prend pas en charge ce type d'élément, voici ensuite une capture d'écran de Chrome : cliquer sur la flèche vers le bas permettra de faire apparaître un sélecteur de date qui permettra de choisir le mois et l'année.</p> +Si votre navigateur ne prend pas en charge ce type d'élément, voici ensuite une capture d'écran de Chrome : cliquer sur la flèche vers le bas permettra de faire apparaître un sélecteur de date qui permettra de choisir le mois et l'année. -<p><img alt="" src="month-control-chrome.png"></p> + -<p>Voici un aperçu du contrôle sous Edge :</p> +Voici un aperçu du contrôle sous Edge : -<p><img alt="" src="month-control-edge.png"></p> + -<h2 id="Valeur">Valeur</h2> +## Valeur -<p>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du mois et de l'année saisies via le contrôle, au format YYYY-MM (c'est-à-dire une année sur 4 chiffres suivi d'un tiret (<code>"-"</code>) suivi du mois sur deux chiffres. Le format détaillé est <a href="/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_mois">décrit dans l'article sur les formats des dates/heures</a>.</p> +Une chaîne de caractères ({{domxref("DOMString")}}) qui représente la valeur du mois et de l'année saisies via le contrôle, au format YYYY-MM (c'est-à-dire une année sur 4 chiffres suivi d'un tiret (`"-"`) suivi du mois sur deux chiffres. Le format détaillé est [décrit dans l'article sur les formats des dates/heures](/fr/docs/Web/HTML/Formats_date_heure_HTML#Représentation_des_mois). -<p>Il est possible de définir une valeur par défaut pour le contrôle en utilisant l'attribut {{htmlattrxref("value", "input")}} de la façon suivante :</p> +Il est possible de définir une valeur par défaut pour le contrôle en utilisant l'attribut {{htmlattrxref("value", "input")}} de la façon suivante : -<h3 id="Exemple_1">Exemple 1</h3> +### Exemple 1 -<pre class="brush: html"><label for="bday-month">Quel est le mois de votre naissance ?</label> -<input id="bday-month" type="month" name="bday-month" value="2017-06"></pre> +```html +<label for="bday-month">Quel est le mois de votre naissance ?</label> +<input id="bday-month" type="month" name="bday-month" value="2017-06"> +``` -<p>{{EmbedLiveSample('Exemple_1', 600, 60)}}</p> +{{EmbedLiveSample('Exemple_1', 600, 60)}} -<p>On notera que la façon dont la date est affichée peut varier selon la locale de l'utilisateur et être présentée sous un format différent. En revanche, d'un point de vue technique, la valeur de l'attribut <code>value</code> suivra toujours le format <code>YYYY-MM</code>.</p> +On notera que la façon dont la date est affichée peut varier selon la locale de l'utilisateur et être présentée sous un format différent. En revanche, d'un point de vue technique, la valeur de l'attribut `value` suivra toujours le format `YYYY-MM`. -<p>Par exemple, lorsque le formulaire précédent sera envoyé vers le serveur, l'information sera transmise de cette façon : <code>bday-month=1978-06</code>.</p> +Par exemple, lorsque le formulaire précédent sera envoyé vers le serveur, l'information sera transmise de cette façon : `bday-month=1978-06`. -<p>Il est également possible de manipuler la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple :</p> +Il est également possible de manipuler la date en JavaScript grâce à la propriété {{domxref("HTMLInputElement.value")}}. Par exemple : -<h3 id="Exemple_2">Exemple 2</h3> +### Exemple 2 -<pre class="brush: html hidden"><label for="bday-month">Quel est le mois de votre naissance ?</label> -<input id="bday-month" type="month" name="bday-month" value="2017-06"></pre> -</div> +```html hidden +<label for="bday-month">Quel est le mois de votre naissance ?</label> +<input id="bday-month" type="month" name="bday-month" value="2017-06"> +``` -<pre class="brush: js hidden">var monthControl = document.querySelector('input[type="month"]'); -monthControl.value = '1978-06';</pre> +```js hidden +var monthControl = document.querySelector('input[type="month"]'); +monthControl.value = '1978-06'; +``` -<p>{{EmbedLiveSample("Exemple_2", 600, 60)}}</p> +{{EmbedLiveSample("Exemple_2", 600, 60)}} -<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2> +## Attributs supplémentaires -<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mois gèrent les attributs suivants :</p> +En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les champs pour les mois gèrent les attributs suivants : -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Attribut</th> - <th scope="col">Description</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("max")}}</code></td> - <td>Le mois (et l'année) le plus tardif qui est considéré comme valide.</td> - </tr> - <tr> - <td><code>{{anch("min")}}</code></td> - <td>Le mois (et l'année) le plus tôt qui est considéré comme valide.</td> - </tr> - <tr> - <td><code>{{anch("readonly")}}</code></td> - <td>Un booléen qui indique si l'utilisateur peut modifier la valeur du champ.</td> - </tr> - <tr> - <td><code>{{anch("step")}}</code></td> - <td>Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur.</td> - </tr> - </tbody> -</table> +| Attribut | Description | +| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `{{anch("max")}}` | Le mois (et l'année) le plus tardif qui est considéré comme valide. | +| `{{anch("min")}}` | Le mois (et l'année) le plus tôt qui est considéré comme valide. | +| `{{anch("readonly")}}` | Un booléen qui indique si l'utilisateur peut modifier la valeur du champ. | +| `{{anch("step")}}` | Le pas qui est utilisé pour incrémenter la valeur du champ. Cet incrément est utilisé par l'interface utilisateur et également pour vérifier la valeur. | -<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> +### {{htmlattrdef("max")}} -<p>Le mois le plus tardif, indiqué avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-MM"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle.</p> +Le mois le plus tardif, indiqué avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-MM"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est supérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie n'est pas une chaîne de caractères au format correct, aucun maximum ne sera fixé pour la valeur du contrôle. -<p>Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut <code>min</code>.</p> +Cette valeur doit être supérieure ou égale à celle indiquée par l'attribut `min`. -<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> +### {{htmlattrdef("min")}} -<p>Le mois le plus tôt, indiqué avec l'année, sous la forme d'une chaîne de caractères au format <code>"yyyy-MM"</code>. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">la validation échouera</a>. Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle.</p> +Le mois le plus tôt, indiqué avec l'année, sous la forme d'une chaîne de caractères au format `"yyyy-MM"`. Si la valeur saisie dans le champ (représentée par l'attribut {{htmlattrxref("value", "input")}}) est antérieure à cette date, [la validation échouera](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation). Si la valeur fournie pour cet attribut n'est pas une chaîne de caractères au format correct, aucun minimum ne sera fixé pour la valeur du contrôle. -<p>Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut <code>max</code>.</p> +Cette valeur doit être inférieure ou égale à celle indiquée par l'attribut `max`. -<h3 id="htmlattrdef(readonly)">{{htmlattrdef("readonly")}}</h3> +### {{htmlattrdef("readonly")}} -<p>Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. La valeur de l'attribut <code>value</code> peut toutefois être modifiée grâce à du code JavaScript qui changerait la propriété {{domxref("HTMLInputElement.value")}}.</p> +Un attribut booléen qui, lorsqu'il est présent, indique que le champ ne peut pas être édité par l'utilisateur. La valeur de l'attribut `value` peut toutefois être modifiée grâce à du code JavaScript qui changerait la propriété {{domxref("HTMLInputElement.value")}}. -<div class="note"> -<p><strong>Note :</strong> Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut <code>required</code> n'aura aucun effet si l'attribut <code>readonly</code> est défini.</p> -</div> +> **Note :** Un champ en lecture seule pouvant ne pas avoir de valeur, l'attribut `required` n'aura aucun effet si l'attribut `readonly` est défini. -<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> +### {{htmlattrdef("step")}} -<p>{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}}</p> +{{page("/fr/docs/Web/HTML/Element/input/number", "step-include")}} -<p>Pour les champs <code>month</code>, la valeur de l'attribut <code>step</code> est exprimée en mois et le facteur d'amplification est égal à 1 (la valeur sous-jacente est également exprimée en mois). La valeur par défaut pour cet attribut est 1.</p> +Pour les champs `month`, la valeur de l'attribut `step` est exprimée en mois et le facteur d'amplification est égal à 1 (la valeur sous-jacente est également exprimée en mois). La valeur par défaut pour cet attribut est 1. -<h2 id="Utiliser_<input_typemonth>">Utiliser <code><input type="month"></code></h2> +## Utiliser `<input type="month">` -<p>Un élément <code><input></code> de type <code>month</code> permet d'avoir une interface utilisateur simple d'utilisation pour choisir un mois et également de respecter un même format, quelle que soit la locale de l'utilisateur. Toutefois, <code><input type="month"></code> n'est pas pris en charge par l'ensemble des navigateurs ce qui peut poser problème.</p> +Un élément `<input>` de type `month` permet d'avoir une interface utilisateur simple d'utilisation pour choisir un mois et également de respecter un même format, quelle que soit la locale de l'utilisateur. Toutefois, `<input type="month">` n'est pas pris en charge par l'ensemble des navigateurs ce qui peut poser problème. -<p>Nous verrons ici quelques cas d'utilisation, simples puis complexes et nous aborderons ensuite comment gérer l'absence de prise en charge.</p> +Nous verrons ici quelques cas d'utilisation, simples puis complexes et nous aborderons ensuite comment gérer l'absence de prise en charge. -<h3 id="Utilisation_simple">Utilisation simple</h3> +### Utilisation simple -<p>Dans son expression la plus simple, il suffit d'employer un élément <code><input></code> ainsi qu'un élément {{htmlelement("label")}} :</p> +Dans son expression la plus simple, il suffit d'employer un élément `<input>` ainsi qu'un élément {{htmlelement("label")}} : -<pre class="brush: html"><form> - <label for="bday-month">Quel est le mois de votre naissance ?</label> - <input id="bday-month" type="month" name="bday-month"> -</form></pre> +```html +<form> + <label for="bday-month">Quel est le mois de votre naissance ?</label> + <input id="bday-month" type="month" name="bday-month"> +</form> +``` -<p>{{EmbedLiveSample('Utilisation_simple', 600, 40)}}</p> +{{EmbedLiveSample('Utilisation_simple', 600, 40)}} -<h3 id="Indiquer_une_date_maximale_et_une_date_minimale">Indiquer une date maximale et une date minimale</h3> +### Indiquer une date maximale et une date minimale -<p>On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre la période pendant laquelle l'utilisateur peut choisir un mois. Dans l'exemple qui suit, on définit une date au plus tôt avec <code>1900-01</code> et une date au plus tard avec <code>2017-08</code>:</p> +On peut utiliser les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} afin de restreindre la période pendant laquelle l'utilisateur peut choisir un mois. Dans l'exemple qui suit, on définit une date au plus tôt avec `1900-01` et une date au plus tard avec `2017-08`: -<pre class="brush: html"><form> - <label for="bday-month">Quel est le mois de votre naissance ?</label> - <input id="bday-month" type="month" name="bday-month" - min="1900-01" max="2017-08"> -</form></pre> +```html +<form> + <label for="bday-month">Quel est le mois de votre naissance ?</label> + <input id="bday-month" type="month" name="bday-month" + min="1900-01" max="2017-08"> +</form> +``` -<p>{{EmbedLiveSample('Indiquer_une_date_maximale_et_une_date_minimale', 600, 40)}}</p> +{{EmbedLiveSample('Indiquer_une_date_maximale_et_une_date_minimale', 600, 40)}} -<p>Grâce ce fragment de code :</p> +Grâce ce fragment de code : -<ul> - <li>Seuls les mois entre janvier 1900 et août 2017 peuvent être sélectionnés (le contrôle ne doit pas permettre de sélectionner un mois en dehors de cette période)</li> - <li>Selon le navigateur, les mois en dehors de la période ne peuvent pas être sélectionnés (Edge) ou sont invalides mais toujours disponibles (Chrome).</li> -</ul> +- Seuls les mois entre janvier 1900 et août 2017 peuvent être sélectionnés (le contrôle ne doit pas permettre de sélectionner un mois en dehors de cette période) +- Selon le navigateur, les mois en dehors de la période ne peuvent pas être sélectionnés (Edge) ou sont invalides mais toujours disponibles (Chrome). -<div class="note"> -<p><strong>Note :</strong> L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité.</p> -</div> +> **Note :** L'attribut {{htmlattrxref("step", "input")}} devrait pouvoir être utilisé afin d'ajuster le pas d'incrémentation (par exemple si on ne veut pouvoir sélectionner que les mois de début de trimestre). Toutefois, à l'heure où nous écrivons ces lignes, aucun navigateur ne semble prendre correctement en charge cette fonctionnalité. -<h3 id="Contrôler_la_taille_du_champ">Contrôler la taille du champ</h3> +### Contrôler la taille du champ -<p><code><input type="month"></code> ne peut pas être dimensionné grâce à {{htmlattrxref("size", "input")}}, il vous faudra utiliser <a href="/fr/docs/Web/CSS">CSS</a> si besoin.</p> +`<input type="month">` ne peut pas être dimensionné grâce à {{htmlattrxref("size", "input")}}, il vous faudra utiliser [CSS](/fr/docs/Web/CSS) si besoin. -<h2 id="Validation">Validation</h2> +## Validation -<p>Par défaut, <code><input type="month"></code> n'applique pas de validation particulière sur la valeur saisie. C'est l'interface utilisateur qui ne permet pas de choisir autre chose qu'un mois.</p> +Par défaut, `<input type="month">` n'applique pas de validation particulière sur la valeur saisie. C'est l'interface utilisateur qui ne permet pas de choisir autre chose qu'un mois. -<p>Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de limiter la période valide et l'attribut {{htmlattrxref("required", "input")}} rend le champ obligatoire. Avec ces attributs, les navigateurs afficheront un message d'erreur si la date choisie est hors de la période ou si la valeur est vide.</p> +Les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max", "input")}} permettent de limiter la période valide et l'attribut {{htmlattrxref("required", "input")}} rend le champ obligatoire. Avec ces attributs, les navigateurs afficheront un message d'erreur si la date choisie est hors de la période ou si la valeur est vide. -<p>Prenons un exemple avec une période délimitée et un champ obligatoire :</p> +Prenons un exemple avec une période délimitée et un champ obligatoire : -<pre class="brush: html"><form> - <div> - <label for="month">À quel mois souhaitez-vous venir cet été ?</label> - <input id="month" type="month" name="month" - min="2017-06" max="2017-09" required> - <span class="validity"></span> - </div> - <div> - <input type="submit" value="Envoyer le formulaire"> - </div> -</form></pre> +```html +<form> + <div> + <label for="month">À quel mois souhaitez-vous venir cet été ?</label> + <input id="month" type="month" name="month" + min="2017-06" max="2017-09" required> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Envoyer le formulaire"> + </div> +</form> +``` -<p>Si vous tentez d'envoyer le formulaire avec une date incomplète ou en dehors de cette période, le navigateur doit afficher un message d'erreur. Voici le résultat <em>live</em> :</p> +Si vous tentez d'envoyer le formulaire avec une date incomplète ou en dehors de cette période, le navigateur doit afficher un message d'erreur. Voici le résultat _live_ : -<p>{{EmbedLiveSample('Validation', 600, 120)}}</p> +{{EmbedLiveSample('Validation', 600, 120)}} -<p>Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité :</p> +Voici une capture d'écran qui illustre le résultat obtenu avec un navigateur prenant en charge cette fonctionnalité : -<p><img alt="" src="month-required.png"></p> + -<p>Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré.</p> +Voici ensuite la feuille de style CSS utilisée dans l'exemple précédent. On utilise {{cssxref(":valid")}} et {{cssxref(":invalid")}} afin de mettre en forme le contrôle selon que la valeur saisie est invalide. Les icônes ajoutées sont placées dans un élément {{htmlelement("span")}} à part car Chrome ne permet pas de gérer du contenu généré à même le contrôle ni de mettre en forme ce contenu généré. -<pre class="brush: css">div { +```css +div { margin-bottom: 10px; position: relative; } @@ -207,52 +193,52 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> +} +``` -<div class="warning"> -<p><strong>Attention :</strong> Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses.</p> -</div> +> **Attention :** Il est également important de vérifier le format de la valeur saisie côté serveur ! En effet, il est tout à fait possible pour un utilisateur de modifier le code HTML du site ou d'envoyer des données au serveur sans passer par le formulaire. Il est donc nécessaire de contrôler la valeur avant de s'en servir dans la logique de l'application côté serveur afin d'éviter des conséquences malheureuses. -<h2 id="Gérer_la_prise_en_charge_des_navigateurs">Gérer la prise en charge des navigateurs</h2> +## Gérer la prise en charge des navigateurs -<p>Comme évoqué plus haut, le problème principal relatif à ces contrôles est l'absence partielle de prise en charge des navigateurs. Seuls Chrome, Opera et Edge supportent ce type de contrôle sur ordinateurs et la plupart des navigateurs mobiles le prennent en charge. À titre d'exemple, voici une capture d'écran du contrôle sous Chrome pour Android :</p> +Comme évoqué plus haut, le problème principal relatif à ces contrôles est l'absence partielle de prise en charge des navigateurs. Seuls Chrome, Opera et Edge supportent ce type de contrôle sur ordinateurs et la plupart des navigateurs mobiles le prennent en charge. À titre d'exemple, voici une capture d'écran du contrôle sous Chrome pour Android : -<p><img alt="" src="month-android.png"></p> + -<p>Les navigateurs qui ne prennent pas en charge cette fonctionnalité basculent sur un contrôle textuel classique mais cela pose problème à la fois en termes de cohérence de l'interface utilisateur et aussi par rapport à la gestion des données.</p> +Les navigateurs qui ne prennent pas en charge cette fonctionnalité basculent sur un contrôle textuel classique mais cela pose problème à la fois en termes de cohérence de l'interface utilisateur et aussi par rapport à la gestion des données. -<p>C'est ce deuxième aspect qui est le plus problématique. Comme nous l'avons mentionné, la valeur d'une date saisie dans un contrôle <code><input type="month"></code> est toujours normalisée au format <code>"YYYY-MM"</code>. En revanche, avec un champ textuel, le navigateur ne convertit pas la valeur saisie et les personnes peuvent très bien écrire un mois sous plusieurs formes :</p> +C'est ce deuxième aspect qui est le plus problématique. Comme nous l'avons mentionné, la valeur d'une date saisie dans un contrôle `<input type="month">` est toujours normalisée au format `"YYYY-MM"`. En revanche, avec un champ textuel, le navigateur ne convertit pas la valeur saisie et les personnes peuvent très bien écrire un mois sous plusieurs formes : -<ul> - <li><code>MMYYYY</code></li> - <li><code>MM/YYYY</code></li> - <li><code>MM-YYYY</code></li> - <li><code>YYYY-MM</code></li> - <li>etc.</li> -</ul> +- `MMYYYY` +- `MM/YYYY` +- `MM-YYYY` +- `YYYY-MM` +- etc. -<p>Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur l'élément <code><input type="month"></code>. Bien que le contrôle de type <code>month</code> ne gère pas cet attribut, ce dernier sera pris en charge par le champ texte. Vous pouvez essayer l'exemple suivant dans un navigateur qui ne prend pas en charge le contrôle de saisie des mois :</p> +Une façon de contourner ce problème consiste à utiliser l'attribut {{htmlattrxref("pattern", "input")}} sur l'élément `<input type="month">`. Bien que le contrôle de type `month` ne gère pas cet attribut, ce dernier sera pris en charge par le champ texte. Vous pouvez essayer l'exemple suivant dans un navigateur qui ne prend pas en charge le contrôle de saisie des mois : -<pre class="brush: html"><form> - <div> - <label for="month">À quel mois souhaitez-vous venir cet été ? (utilisez le format yyyy-mm)</label> - <input id="month" type="month" name="month" +```html +<form> + <div> + <label for="month">À quel mois souhaitez-vous venir cet été ? (utilisez le format yyyy-mm)</label> + <input id="month" type="month" name="month" min="2017-06" max="2017-09" required - pattern="[0-9]{4}-[0-9]{2}"> - <span class="validity"></span> - </div> - <div> - <input type="submit" value="Envoyer le formulaire"> - </div> -</form></pre> + pattern="[0-9]{4}-[0-9]{2}"> + <span class="validity"></span> + </div> + <div> + <input type="submit" value="Envoyer le formulaire"> + </div> +</form> +``` -<p>{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}}</p> +{{EmbedLiveSample('Gérer_la_prise_en_charge_des_navigateurs', 600, 100)}} -<p>Si vous tentez d'envoyer ce formulaire, vous verrez un message d'erreur si la valeur saisie ne respecte pas le format <code>nnnn-nn</code>, où <code>n</code> est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates inexistantes ou au mauvais format.</p> +Si vous tentez d'envoyer ce formulaire, vous verrez un message d'erreur si la valeur saisie ne respecte pas le format `nnnn-nn`, où `n` est un chiffre entre 0 et 9. Bien entendu, cela n'empêche pas de saisir des dates inexistantes ou au mauvais format. -<p>De plus, cela présage que l'utilisateur comprenne le format dans lequel il faut saisir la valeur. Bref, le problème subsiste.</p> +De plus, cela présage que l'utilisateur comprenne le format dans lequel il faut saisir la valeur. Bref, le problème subsiste. -<pre class="brush: css hidden">div { +```css hidden +div { margin-bottom: 10px; position: relative; } @@ -275,56 +261,60 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> - -<p>La meilleure façon de gérer la saisie de mois pour l'ensemble des navigateurs consiste actuellement à saisir le mois et l'année dans deux contrôles séparés, représentés chacun par un élément {{htmlelement("select")}}. On peut également utiliser certaines bibliothèques JavaScript telles que <a href="https://jqueryui.com/datepicker/">jQuery date picker</a> ou le plugin <a href="http://timepicker.co/">jQuery timepicker</a>.</p> - -<h2 id="Exemples">Exemples</h2> - -<p>Dans l'exemple qui suit, on crée deux ensembles d'éléments pour choisir un mois : un sélecteur natif <code><input type="month"></code> d'une part et un ensemble de deux éléments {{htmlelement("select")}} pour choisir le mois et l'année d'autre part (ce sont ces deux éléments qui seront utilisés lorsque le navigateur ne prend pas en charge le contrôle natif).</p> - -<p>{{EmbedLiveSample('Exemples', 600, 140)}}</p> - -<p>Voici le fragment de code HTML utilisé :</p> - -<pre class="brush: html"><form> - <div class="nativeDatePicker"> - <label for="month-visit">À quel mois souhaitez-vous venir cet été ?</label> - <input type="month" id="month-visit" name="month-visit"> - <span class="validity"></span> - </div> - <p class="fallbackLabel">À quel mois souhaitez-vous venir cet été ?</p> - <div class="fallbackDatePicker"> - <div> - <span> - <label for="month">Mois :</label> - <select id="month" name="month"> - <option selected>Janvier</option> - <option>Février</option> - <option>Mars</option> - <option>Avril</option> - <option>Mai</option> - <option>Juin</option> - <option>Juillet</option> - <option>Août</option> - <option>Septembre</option> - <option>Octobre</option> - <option>Novembre</option> - <option>Décembre</option> - </select> - </span> - <span> - <label for="year">Année :</label> - <select id="year" name="year"> - </select> - </span> - </div> - </div> -</form></pre> - -<p>Les mois sont représentés statiquement (ce sont toujours les mêmes) et les valeurs pour les années sont générées dynamiquement à partir de l'année courante (voir les commentaires dans le code suivant).</p> - -<pre class="brush: css hidden">div { +} +``` + +La meilleure façon de gérer la saisie de mois pour l'ensemble des navigateurs consiste actuellement à saisir le mois et l'année dans deux contrôles séparés, représentés chacun par un élément {{htmlelement("select")}}. On peut également utiliser certaines bibliothèques JavaScript telles que [jQuery date picker](https://jqueryui.com/datepicker/) ou le plugin [jQuery timepicker](http://timepicker.co/). + +## Exemples + +Dans l'exemple qui suit, on crée deux ensembles d'éléments pour choisir un mois : un sélecteur natif `<input type="month">` d'une part et un ensemble de deux éléments {{htmlelement("select")}} pour choisir le mois et l'année d'autre part (ce sont ces deux éléments qui seront utilisés lorsque le navigateur ne prend pas en charge le contrôle natif). + +{{EmbedLiveSample('Exemples', 600, 140)}} + +Voici le fragment de code HTML utilisé : + +```html +<form> + <div class="nativeDatePicker"> + <label for="month-visit">À quel mois souhaitez-vous venir cet été ?</label> + <input type="month" id="month-visit" name="month-visit"> + <span class="validity"></span> + </div> + <p class="fallbackLabel">À quel mois souhaitez-vous venir cet été ?</p> + <div class="fallbackDatePicker"> + <div> + <span> + <label for="month">Mois :</label> + <select id="month" name="month"> + <option selected>Janvier</option> + <option>Février</option> + <option>Mars</option> + <option>Avril</option> + <option>Mai</option> + <option>Juin</option> + <option>Juillet</option> + <option>Août</option> + <option>Septembre</option> + <option>Octobre</option> + <option>Novembre</option> + <option>Décembre</option> + </select> + </span> + <span> + <label for="year">Année :</label> + <select id="year" name="year"> + </select> + </span> + </div> + </div> +</form> +``` + +Les mois sont représentés statiquement (ce sont toujours les mêmes) et les valeurs pour les années sont générées dynamiquement à partir de l'année courante (voir les commentaires dans le code suivant). + +```css hidden +div { margin-bottom: 10px; position: relative; } @@ -347,11 +337,13 @@ input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; -}</pre> +} +``` -<p>Une partie intéressante du code est celle qui permet de détecter la prise en charge de fonctionnalité. Pour détecter si le navigateur prend en charge ce contrôle, on crée un nouvel élément {{htmlelement("input")}} dont on modifie le type afin qu'il vaille <code>month</code> puis on vérifie immédiatement la valeur associée au type : les navigateurs qui ne prennent pas en charge la fonctionnalité renverront <code>text</code> car le champ <code>month</code> a automatiquement transformé en <code>text</code>. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui construit avec les éléments {{htmlelement("select")}}).</p> +Une partie intéressante du code est celle qui permet de détecter la prise en charge de fonctionnalité. Pour détecter si le navigateur prend en charge ce contrôle, on crée un nouvel élément {{htmlelement("input")}} dont on modifie le type afin qu'il vaille `month` puis on vérifie immédiatement la valeur associée au type : les navigateurs qui ne prennent pas en charge la fonctionnalité renverront `text` car le champ `month` a automatiquement transformé en `text`. Si c'est le cas, on masque le sélecteur natif et on affiche le sélecteur alternatif (celui construit avec les éléments {{htmlelement("select")}}). -<pre class="brush: js">// On définit des variables +```js +// On définit des variables var nativePicker = document.querySelector('.nativeDatePicker'); var fallbackPicker = document.querySelector('.fallbackDatePicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); @@ -384,73 +376,72 @@ function populateYears() { var year = date.getFullYear(); // On ajoute l'année courante et les 100 années à venir - // dans l'élément <select> pour l'année - for(var i = 0; i <= 100; i++) { + // dans l'élément <select> pour l'année + for(var i = 0; i <= 100; i++) { var option = document.createElement('option'); option.textContent = year-i; yearSelect.appendChild(option); } -}</pre> +} +``` -<div class="note"> -<p><strong>Note :</strong> Attention, certaines années peuvent contenir 53 semaines ! (cf. <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">cet article Wikipédia</a>) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles.</p> -</div> +> **Note :** Attention, certaines années peuvent contenir 53 semaines ! (cf. [cet article Wikipédia](https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year)) Il vous faudra prendre cela en compte si vous souhaitez développer des applications réelles. -<h2 id="Résumé_technique">Résumé technique</h2> +## Résumé technique <table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Valeur")}}</strong></td> - <td>Une chaîne de caractères ({{domxref("DOMString")}}) qui représente un mois et une année ou bien la chaîne vide.</td> - </tr> - <tr> - <td><strong>Évènements</strong></td> - <td>{{domxref("HTMLElement/change_event", "change")}} et {{domxref("HTMLElement/input_event", "input")}}.</td> - </tr> - <tr> - <td><strong>Attributs pris en charge</strong></td> - <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}} et {{htmlattrxref("step", "input")}}.</td> - </tr> - <tr> - <td><strong>Attributs IDL</strong></td> - <td><code>value</code></td> - </tr> - <tr> - <td><strong>Méthodes</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}.</td> - </tr> - </tbody> + <tbody> + <tr> + <td><strong>{{anch("Valeur")}}</strong></td> + <td> + Une chaîne de caractères ({{domxref("DOMString")}}) qui + représente un mois et une année ou bien la chaîne vide. + </td> + </tr> + <tr> + <td><strong>Évènements</strong></td> + <td> + {{domxref("HTMLElement/change_event", "change")}} et + {{domxref("HTMLElement/input_event", "input")}}. + </td> + </tr> + <tr> + <td><strong>Attributs pris en charge</strong></td> + <td> + {{htmlattrxref("autocomplete", "input")}}, + {{htmlattrxref("list", "input")}}, + {{htmlattrxref("readonly", "input")}} et + {{htmlattrxref("step", "input")}}. + </td> + </tr> + <tr> + <td><strong>Attributs IDL</strong></td> + <td><code>value</code></td> + </tr> + <tr> + <td><strong>Méthodes</strong></td> + <td> + {{domxref("HTMLInputElement.select", "select()")}}, + {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, + {{domxref("HTMLInputElement.stepUp", "stepUp()")}}. + </td> + </tr> + </tbody> </table> -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#month-state-(type=month)', '<input type="month">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - </tbody> -</table> +## Specifications + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------------ | +| {{SpecName('HTML WHATWG', 'forms.html#month-state-(type=month)', '<input type="month">')}} | {{Spec2('HTML WHATWG')}} | | -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("html.elements.input.input-month")}}</p> +{{Compat("html.elements.input.input-month")}} -<h2 id="Voir_aussi">Voir aussi</h2> +## Voir aussi -<ul> - <li>L'élément générique {{HTMLElement("input")}} et l'interface DOM qui permet de le manipuler : {{domxref("HTMLInputElement")}}</li> - <li><a href="/fr/docs/Web/HTML/Formats_date_heure_HTML">Les formats de date et d'heure utilisés en HTML</a></li> - <li><a href="/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire">Un tutoriel à propos des sélecteurs de dates et d'heures</a></li> - <li><code><a href="/fr/docs/Web/HTML/Element/input/datetime-local"><input type="datetime-local"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/date"><input type="date"></a></code>, <code><a href="/fr/docs/Web/HTML/Element/input/time"><input type="time"></a></code>, and <code><a href="/fr/docs/Web/HTML/Element/input/week"><input type="week"></a></code></li> -</ul> +- L'élément générique {{HTMLElement("input")}} et l'interface DOM qui permet de le manipuler : {{domxref("HTMLInputElement")}} +- [Les formats de date et d'heure utilisés en HTML](/fr/docs/Web/HTML/Formats_date_heure_HTML) +- [Un tutoriel à propos des sélecteurs de dates et d'heures](/fr/docs/Web/Guide/HTML/Formulaires/Les_blocs_de_formulaires_natifs#Sélection_de_date_et_d'horaire) +- [`<input type="datetime-local">`](/fr/docs/Web/HTML/Element/input/datetime-local), [`<input type="date">`](/fr/docs/Web/HTML/Element/input/date), [`<input type="time">`](/fr/docs/Web/HTML/Element/input/time), and [`<input type="week">`](/fr/docs/Web/HTML/Element/input/week) |