diff options
Diffstat (limited to 'files/fr/web/html/attributes/step/index.md')
| -rw-r--r-- | files/fr/web/html/attributes/step/index.md | 166 |
1 files changed, 99 insertions, 67 deletions
diff --git a/files/fr/web/html/attributes/step/index.md b/files/fr/web/html/attributes/step/index.md index c87e0ddc44..47ed3ebe25 100644 --- a/files/fr/web/html/attributes/step/index.md +++ b/files/fr/web/html/attributes/step/index.md @@ -10,18 +10,20 @@ tags: - step translation_of: Web/HTML/Attributes/step --- -<div>{{HTMLSidebar}}</div> +{{HTMLSidebar}} -<p>L'attribut <strong><code>step</code></strong> est un nombre qui indique l'incrément que la valeur doit suivre ou le mot-clé <code>any</code>. Il est valable pour les types de saisie numérique, notamment les <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>.</p> +L'attribut **`step`** est un nombre qui indique l'incrément que la valeur doit suivre ou le mot-clé `any`. Il est valable pour les types de saisie numérique, notamment les [`date`](/fr/docs/Web/HTML/Element/Input/date), [`month`](/fr/docs/Web/HTML/Element/Input/month), [`week`](/fr/docs/Web/HTML/Element/Input/week), [`time`](/fr/docs/Web/HTML/Element/Input/time), [`datetime-local`](/fr/docs/Web/HTML/Element/Input/datetime-local), [`number`](/fr/docs/Web/HTML/Element/Input/number) et [`range`](/fr/docs/Web/HTML/Element/Input/range). -<p><code>step</code> définit l'incrément obtenu lors du clic sur les boutons déroulants haut et bas, du déplacement d'un curseur vers la gauche et la droite sur une plage, et de la validation des différents types de date. S'il n'est pas explicitement inclus, <code>step</code> prend par défaut la valeur 1 pour <code>number</code> et <code>range</code>, et 1 type d'unité (minute, semaine, mois, jour) pour les types d'entrée date/heure. La valeur doit être un nombre positif - entier ou flottant - ou la valeur spéciale <code>any</code>, ce qui signifie qu'aucun incrément n'est impliqué et que toute valeur est autorisée (sauf autres contraintes, comme <a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a> et <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a>).</p> +`step` définit l'incrément obtenu lors du clic sur les boutons déroulants haut et bas, du déplacement d'un curseur vers la gauche et la droite sur une plage, et de la validation des différents types de date. S'il n'est pas explicitement inclus, `step` prend par défaut la valeur 1 pour `number` et `range`, et 1 type d'unité (minute, semaine, mois, jour) pour les types d'entrée date/heure. La valeur doit être un nombre positif - entier ou flottant - ou la valeur spéciale `any`, ce qui signifie qu'aucun incrément n'est impliqué et que toute valeur est autorisée (sauf autres contraintes, comme [`min`](/fr/docs/Web/HTML/Attributes/min) et [`max`](/fr/docs/Web/HTML/Attributes/max)). -<p>La valeur des incréments par défaut pour les entrées <code>number</code> est 1, ce qui permet de ne saisir que des nombres entiers, <em>à moins que</em> la valeur initiale ne soit pas un nombre entier. La valeur de pas par défaut pour les entrées <code>time</code> est de 1 seconde, 900 étant égal à 15 minutes.</p> +La valeur des incréments par défaut pour les entrées `number` est 1, ce qui permet de ne saisir que des nombres entiers, _à moins que_ la valeur initiale ne soit pas un nombre entier. La valeur de pas par défaut pour les entrées `time` est de 1 seconde, 900 étant égal à 15 minutes. -<h2 id="syntax">Syntaxe</h2> +## Syntaxe <table class="standard-table"> - <caption>Valeurs d'incrémentation par défaut</caption> + <caption> + Valeurs d'incrémentation par défaut + </caption> <thead> <tr> <th scope="col">Type d'entrée</th> @@ -31,103 +33,133 @@ translation_of: Web/HTML/Attributes/step </thead> <tbody> <tr> - <td><a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a> + </td> <td>1 (jour)</td> - <td><pre class="brush: html"><input type="date" min="2019-12-25" step="1"></pre></td> + <td> + <pre class="brush: html"> +<input type="date" min="2019-12-25" step="1"></pre + > + </td> </tr> <tr> - <td><a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a> + </td> <td>1 (mois)</td> - <td><pre class="brush: html"><input type="month" min="2019-12" step="12"></pre></td> + <td> + <pre class="brush: html"> +<input type="month" min="2019-12" step="12"></pre + > + </td> </tr> <tr> - <td><a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a> + </td> <td>1 (semaine)</td> - <td><pre class="brush: html"><input type="week" min="2019-W23" step="2"></pre></td> + <td> + <pre class="brush: html"> +<input type="week" min="2019-W23" step="2"></pre + > + </td> </tr> <tr> - <td><a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a> + </td> <td>60 (secondes)</td> - <td><pre class="brush: html"><input type="time" min="09:00" step="900"></pre></td> + <td> + <pre class="brush: html"> +<input type="time" min="09:00" step="900"></pre + > + </td> </tr> <tr> - <td><a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input/datetime-local" + ><code>datetime-local</code></a + > + </td> <td>1 (jour)</td> - <td><pre class="brush: html"><input type="datetime-local" min="019-12-25T19:30" step="7"></pre></td> + <td> + <pre class="brush: html"> +<input type="datetime-local" min="019-12-25T19:30" step="7"></pre + > + </td> </tr> <tr> - <td><a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> + </td> <td>1</td> - <td><pre class="brush: html"><input type="number" min="0" step="0.1" max="10"></pre></td> + <td> + <pre class="brush: html"> +<input type="number" min="0" step="0.1" max="10"></pre + > + </td> </tr> <tr> - <td><a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a></td> + <td> + <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a> + </td> <td>1</td> - <td><pre class="brush: html"><input type="range" min="0" step="2" max="10"></pre></td> + <td> + <pre class="brush: html"> +<input type="range" min="0" step="2" max="10"></pre + > + </td> </tr> </tbody> </table> -<p>Si <code>any</code> n'est pas explicitement défini, les valeurs valides pour les types de saisie <code>number</code>, date/heure, et les types d'entrée <code>range</code> sont égales à la base du pas — la valeur <a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a> et les incréments de la valeur du pas, jusqu'à la valeur <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a>, si spécifiée. Par exemple, si on a <code><input type="number" min="10" step="2"></code> tout entier pair, 10 ou grand, est valide. S'il est omis, <code><input type="number"></code>, tout entier est valide, mais les flottants, comme <code>4,2</code>, ne le sont pas, car <code>step</code> est par défaut à 1. Pour que <code>4,2</code> soit valide, <code>step</code> aurait dû être défini à <code>any</code>, <code>0,1</code>, <code>0,2</code>, et la valeur min aurait dû être un nombre se terminant par .2, comme <code><input type="number" min="-5.2"></code>.</p> +Si `any` n'est pas explicitement défini, les valeurs valides pour les types de saisie `number`, date/heure, et les types d'entrée `range` sont égales à la base du pas — la valeur [`min`](/fr/docs/Web/HTML/Attributes/min) et les incréments de la valeur du pas, jusqu'à la valeur [`max`](/fr/docs/Web/HTML/Attributes/max), si spécifiée. Par exemple, si on a `<input type="number" min="10" step="2">` tout entier pair, 10 ou grand, est valide. S'il est omis, `<input type="number">`, tout entier est valide, mais les flottants, comme `4,2`, ne le sont pas, car `step` est par défaut à 1. Pour que `4,2` soit valide, `step` aurait dû être défini à `any`, `0,1`, `0,2`, et la valeur min aurait dû être un nombre se terminant par .2, comme `<input type="number" min="-5.2">`. -<h3 id="min_impact_on_step">L'impact de min sur step</h3> +### L'impact de min sur step -<p>Les valeurs de <code>min</code> et <code>step</code> définissent ce que sont les valeurs valides, même si l'attribut <code>step</code> n'est pas inclus, car <code>step</code> a par défaut la valeur <code>0</code>.</p> +Les valeurs de `min` et `step` définissent ce que sont les valeurs valides, même si l'attribut `step` n'est pas inclus, car `step` a par défaut la valeur `0`. -<p>Nous ajoutons une grande bordure rouge autour des entrées invalides :</p> +Nous ajoutons une grande bordure rouge autour des entrées invalides : -<pre class="brush: css">input:invalid { +```css +input:invalid { border: solid red 3px; -}</pre> +} +``` -<p>Nous définissons ensuite un champ avec une valeur minimale de 7,2, en omettant l'attribut "step", qui a la valeur 1 par défaut.</p> +Nous définissons ensuite un champ avec une valeur minimale de 7,2, en omettant l'attribut "step", qui a la valeur 1 par défaut. -<pre class="brush: html"><input id="myNumber" name="myNumber" type="number" step="2" min="1.2"></pre> +```html +<input id="myNumber" name="myNumber" type="number" step="2" min="1.2"> +``` -<p>Les valeurs valides comprennent <code>1,2</code>, <code>3,2</code>, <code>5,2</code>, <code>7,2</code>, <code>9,2</code>, <code>11,2</code>, et ainsi de suite. Les nombres entiers et les nombres pairs suivis de .2 ne sont pas valides. Comme nous avons inclus une valeur non valide, les navigateurs qui prennent en charge cette valeur l'afficheront comme non valide. Le compteur de nombres, s'il est présent, n'affichera que les valeurs flottantes valides de <code>1,2</code> et plus.</p> +Les valeurs valides comprennent `1,2`, `3,2`, `5,2`, `7,2`, `9,2`, `11,2`, et ainsi de suite. Les nombres entiers et les nombres pairs suivis de .2 ne sont pas valides. Comme nous avons inclus une valeur non valide, les navigateurs qui prennent en charge cette valeur l'afficheront comme non valide. Le compteur de nombres, s'il est présent, n'affichera que les valeurs flottantes valides de `1,2` et plus. -<div>{{EmbedLiveSample("min_impact_on_step","",50)}}</div> +{{EmbedLiveSample("min_impact_on_step","",50)}} -<div class="note"> - <p><strong>Note :</strong>Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses <a href="/fr/docs/Web/CSS/:invalid"><code>:invalid</code></a> et <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a>.</p> -</div> +> **Note :**Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses [`:invalid`](/fr/docs/Web/CSS/:invalid) et [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range). -<p>Voir <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation côté client</a> et <a href="/fr/docs/Web/API/ValidityState/stepMismatch"><code>stepMismatch</code></a> pour plus d'informations.</p> +Voir [Validation côté client](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) et [`stepMismatch`](/fr/docs/Web/API/ValidityState/stepMismatch) pour plus d'informations. -<h2 id="accessibility_concerns">Accessibilité</h2> +## Accessibilité -<p>Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut <code>min</code>, assurez-vous que cette exigence minimale est comprise par l'utilisateur. Fournir des instructions dans l'élément <a href="/fr/docs/Web/HTML/Element/Label"><code><label></code></a> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus souples, envisagez d'utiliser <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute"><code>aria-labelledby</code></a> ou <a href="/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute"><code>aria-describedby</code></a>.</p> +Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut `min`, assurez-vous que cette exigence minimale est comprise par l'utilisateur. Fournir des instructions dans l'élément [`<label>`](/fr/docs/Web/HTML/Element/Label) peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus souples, envisagez d'utiliser [`aria-labelledby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute) ou [`aria-describedby`](/fr/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute). -<h2 id="specifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'input.html#the-step-attribute', 'l\'attribut step')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'input.html#the-step-attribute', 'l\'attribut step')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - </tr> - </tbody> -</table> +| Spécification | Statut | +| ------------------------------------------------------------------------------------------------------------ | -------------------------------- | +| {{SpecName('HTML WHATWG', 'input.html#the-step-attribute', 'l\'attribut step')}} | {{Spec2('HTML WHATWG')}} | +| {{SpecName('HTML5 W3C', 'input.html#the-step-attribute', 'l\'attribut step')}} | {{Spec2('HTML5 W3C')}} | + +## Voir aussi -<h2 id="see_also">Voir aussi</h2> - -<ul> - <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/max"><code>max</code></a></li> - <li>L'attribut <a href="/fr/docs/Web/HTML/Attributes/min"><code>min</code></a></li> - <li><a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">Validation des contraintes</a></li> - <li>L'API <a href="/fr/docs/Web/API/Constraint_validation">Constraint validation</a></li> - <li>La propriété <a href="/fr/docs/Web/API/validityState/stepMismatch"><code>validityState.stepMismatch</code></a></li> - <li>La pseudo-classe <a href="/fr/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a></li> - <li>L'élément <a href="/fr/docs/Web/HTML/Element/Input"><code><input></code></a></li> - <li>Les types <a href="/fr/docs/Web/HTML/Element/Input/date"><code>date</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/month"><code>month</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/week"><code>week</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/time"><code>time</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/datetime-local"><code>datetime-local</code></a>, <a href="/fr/docs/Web/HTML/Element/Input/number"><code>number</code></a> et <a href="/fr/docs/Web/HTML/Element/Input/range"><code>range</code></a>, ainsi que l'élément <a href="/fr/docs/Web/HTML/Element/Meter"><code><meter></code></a></li> -</ul> +- L'attribut [`max`](/fr/docs/Web/HTML/Attributes/max) +- L'attribut [`min`](/fr/docs/Web/HTML/Attributes/min) +- [Validation des contraintes](/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation) +- L'API [Constraint validation](/fr/docs/Web/API/Constraint_validation) +- La propriété [`validityState.stepMismatch`](/fr/docs/Web/API/validityState/stepMismatch) +- La pseudo-classe [`:out-of-range`](/fr/docs/Web/CSS/:out-of-range) +- L'élément [`<input>`](/fr/docs/Web/HTML/Element/Input) +- Les types [`date`](/fr/docs/Web/HTML/Element/Input/date), [`month`](/fr/docs/Web/HTML/Element/Input/month), [`week`](/fr/docs/Web/HTML/Element/Input/week), [`time`](/fr/docs/Web/HTML/Element/Input/time), [`datetime-local`](/fr/docs/Web/HTML/Element/Input/datetime-local), [`number`](/fr/docs/Web/HTML/Element/Input/number) et [`range`](/fr/docs/Web/HTML/Element/Input/range), ainsi que l'élément [`<meter>`](/fr/docs/Web/HTML/Element/Meter) |