new repository

1 files changed, 82 insertions, 0 deletions

diff --git a/devdocs/html/attributes%2Fstep.html b/devdocs/html/attributes%2Fstep.html
new file mode 100644
index 00000000..b5fe57e2
--- /dev/null
+++ b/devdocs/html/attributes%2Fstep.html
@@ -0,0 +1,82 @@
+<header><h1>HTML attribute: step</h1></header><div class="section-content">
+<p>The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to or the keyword <code>any</code>. It is valid for the numeric input types, including the <a href="../element/input/date">date</a>, <a href="../element/input/month">month</a>, <a href="../element/input/week">week</a>, <a href="../element/input/time">time</a>, <a href="../element/input/datetime-local">datetime-local</a>, <a href="../element/input/number">number</a> and <a href="../element/input/range">range</a> types.</p> <p>The <code>step</code> sets the <em>stepping interval</em> when clicking up and down spinner buttons, moving a slider left and right on a range, and validating the different date types. If not explicitly included, <code>step</code> defaults to 1 for <code>number</code> and <code>range</code>, and 1 unit type (minute, week, month, day) for the date/time input types. The value can must be a positive number - integer or float — or the special value <code>any</code>, which means no stepping is implied, and any value is allowed (barring other constraints, such as <a href="min"><code>min</code></a> and <a href="max"><code>max</code></a>).</p> <p>The default stepping value for <code>number</code> inputs is 1, allowing only integers to be entered, <em>unless</em> the stepping base is not an integer. The default stepping value for <code>time</code> is 1 second, with 900 being equal to 15 minutes.</p>
+</div>
+<h2 id="syntax">Syntax</h2>
+<div class="section-content">
+<figure class="table-container"><div class="_table"><table class="no-markdown"> <caption>Default values for step</caption> <thead> <tr> <th>Input type</th> <th>Value</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td><a href="../element/input/date">date</a></td> <td>1 (day)</td> <td><code>&lt;input type="date" min="2019-12-25" step="1"&gt;</code></td> </tr> <tr> <td><a href="../element/input/month">month</a></td> <td>1 (month)</td> <td><code>&lt;input type="month" min="2019-12" step="12"&gt;</code></td> </tr> <tr> <td><a href="../element/input/week">week</a></td> <td>1 (week)</td> <td><code>&lt;input type="week" min="2019-W23" step="2"&gt;</code></td> </tr> <tr> <td><a href="../element/input/time">time</a></td> <td>60 (seconds)</td> <td><code>&lt;input type="time" min="09:00" step="900"&gt;</code></td> </tr> <tr> <td><a href="../element/input/datetime-local">datetime-local</a></td> <td>1 (second)</td> <td><code>&lt;input type="datetime-local" min="2019-12-25T19:30"
+step="7"&gt;</code></td> </tr> <tr> <td><a href="../element/input/number">number</a></td> <td>1</td> <td><code>&lt;input type="number" min="0" step="0.1" max="10"&gt;</code></td> </tr> <tr> <td><a href="../element/input/range">range</a></td> <td>1</td> <td><code>&lt;input type="range" min="0" step="2" max="10"&gt;</code></td> </tr> </tbody> </table></div></figure> <p>If <code>any</code> is not explicitly set, valid values for the <code>number</code>, date/time input types, and <code>range</code> input types are equal to the basis for stepping - the <a href="min"><code>min</code></a> value and increments of the step value, up to the <a href="max"><code>max</code></a> value, if specified. For example, if we have <code>&lt;input type="number" min="10" step="2"&gt;</code> any even integer, 10 or greater, is valid. If omitted, <code>&lt;input type="number"&gt;</code>, any integer is valid, but floats, like 4.2, are not valid, as <code>step</code> defaults to 1. For 4.2 to be valid, <code>step</code> would have had to be set to <code>any</code>, 0.1, 0.2, or any the min value would have had to be a number ending in .2, such as <code>&lt;input type="number" min="-5.2"&gt;</code></p>
+</div>
+<h3 id="min_impact_on_step">min impact on step</h3>
+<div class="section-content">
+<p>The value of <code>min</code> and <code>step</code> define what are valid values, even if the <code>step</code> attribute is not included, as <code>step</code> defaults to <code>0</code>.</p> <p>We add a big red border around invalid inputs:</p> <div class="code-example">
+<p class="example-header"><span class="language-name">css</span></p>
+<pre data-signature="6PMEpHs0vkMNWTCDnxCiFvk6vsP7Y36Lf2EE3Y3cOfI=" data-language="css"><span class="token selector">input:invalid</span> <span class="token punctuation">{</span>
+  <span class="token property">border</span><span class="token punctuation">:</span> solid red 3px<span class="token punctuation">;</span>
+<span class="token punctuation">}</span>
+</pre>
+</div> <p>Then define an input with a minimum value of 7.2, omitting the step attribute, wherein it defaults to 1.</p> <div class="code-example">
+<p class="example-header"><span class="language-name">html</span></p>
+<pre data-signature="5KugUhYrA7ZrK/PgdWnjnBnBnCBmU1NYb+3wzzWuvXc=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myNumber<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myNumber<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1.2<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span>
+</pre>
+</div> <p>Valid values include <code>1.2</code>, <code>3.2</code>, <code>5.2</code>, <code>7.2</code>, <code>9.2</code>, <code>11.2</code>, and so on. Integers and even numbers followed by .2 are not valid. As we included an invalid value, supporting browsers will show the value as invalid. The number spinner, if present, will only show valid float values of <code>1.2</code> and greater</p>
+<div class="code-example" id="sect1">
+
+<iframe class="sample-code-frame" title="min impact on step sample" id="frame_min_impact_on_step" width="200" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/step/runner.html?id=min_impact_on_step" loading="lazy"></iframe>
+</div> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the value is considered invalid in constraint validation and will match the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a> pseudoclasses</p> </div> <p>See <a href="../constraint_validation">Client-side validation</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/stepMismatch"><code>stepMismatch</code></a> for more information.</p>
+</div>
+<h2 id="accessibility_concerns">Accessibility concerns</h2>
+<div class="section-content"><p>Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the <code>min</code> attribute, ensure this minimum requirement is understood by the user. Providing instructions within the <a href="../element/label"><code>&lt;label&gt;</code></a> may be sufficient. If providing instructions outside of labels, which allows more flexible positioning and design, consider using <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-labelledby"><code>aria-labelledby</code></a> or <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby"><code>aria-describedby</code></a>.</p></div>
+<h2 id="specifications">Specifications</h2>
+<div class="_table"><table class="standard-table">
+<thead><tr><th scope="col">Specification</th></tr></thead>
+<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/input.html#attr-input-step">HTML Standard <br><small># attr-input-step</small></a></td></tr></tbody>
+</table></div>
+<h2 id="browser_compatibility">Browser compatibility</h2>
+<div class="_table"><table>
+<thead>
+<tr id="bct-browser-type">
+<th></th>
+<th colspan="6">Desktop</th>
+<th colspan="6">Mobile</th>
+</tr>
+<tr id="bct-browsers">
+<th></th>
+<th>Chrome</th>
+<th>Edge</th>
+<th>Firefox</th>
+<th>Internet Explorer</th>
+<th>Opera</th>
+<th>Safari</th>
+<th>WebView Android</th>
+<th>Chrome Android</th>
+<th>Firefox for Android</th>
+<th>Opera Android</th>
+<th>Safari on IOS</th>
+<th>Samsung Internet</th>
+</tr>
+</thead>
+<tbody><tr>
+<th><code>step</code></th>
+<td class="bc-supports-yes">5</td>
+<td class="bc-supports-yes">12</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-yes">10</td>
+<td class="bc-supports-yes">≤12.1</td>
+<td class="bc-supports-yes">5</td>
+<td class="bc-supports-yes">≤37</td>
+<td class="bc-supports-yes">18</td>
+<td class="bc-supports-yes">16</td>
+<td class="bc-supports-yes">≤12.1</td>
+<td class="bc-supports-yes">4</td>
+<td class="bc-supports-yes">1.0</td>
+</tr></tbody>
+</table></div>
+<h2 id="see_also">See also</h2>
+<div class="section-content"><ul> <li><a href="max"><code>max</code></a></li> <li><a href="min"><code>min</code></a></li> <li><a href="../constraint_validation">Constraint validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">Form validation</a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/stepMismatch"><code>validityState.stepMismatch</code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a></li> <li><a href="../element/input"><code>&lt;input&gt;</code></a></li> <li>
+<a href="../element/input/date">date</a>, <a href="../element/input/month">month</a>, <a href="../element/input/week">week</a>, <a href="../element/input/time">time</a>, <a href="../element/input/datetime-local">datetime-local</a>, <a href="../element/input/number">number</a> and <a href="../element/input/range">range</a> types, and the <a href="../element/meter"><code>&lt;meter&gt;</code></a>
+</li> </ul></div><div class="_attribution">
+  <p class="_attribution-p">
+    &copy; 2005&ndash;2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step</a>
+  </p>
+</div>