diff options
| author | Craig Jennings <c@cjennings.net> | 2024-04-07 13:41:34 -0500 |
|---|---|---|
| committer | Craig Jennings <c@cjennings.net> | 2024-04-07 13:41:34 -0500 |
| commit | 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 (patch) | |
| tree | f1190704f78f04a2b0b4c977d20fe96a828377f1 /devdocs/html/attributes%2Fmax.html | |
new repository
Diffstat (limited to 'devdocs/html/attributes%2Fmax.html')
| -rw-r--r-- | devdocs/html/attributes%2Fmax.html | 154 |
1 files changed, 154 insertions, 0 deletions
diff --git a/devdocs/html/attributes%2Fmax.html b/devdocs/html/attributes%2Fmax.html new file mode 100644 index 00000000..acd702fc --- /dev/null +++ b/devdocs/html/attributes%2Fmax.html @@ -0,0 +1,154 @@ +<header><h1>HTML attribute: max</h1></header><div class="section-content"> +<p>The <code>max</code> attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the <a href="../element/input#value"><code>value</code></a> of the element is greater than this, the element fails <a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation">validation</a>. This value must be greater than or equal to the value of the <a href="min"><code>min</code></a> attribute. If the <code>max</code> attribute is present but is not specified or is invalid, no <code>max</code> value is applied. If the <code>max</code> attribute is valid and a non-empty value is greater than the maximum allowed by the <code>max</code> attribute, constraint validation will prevent form submission.</p> <p>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, and both the <a href="../element/progress"><code><progress></code></a> and <a href="../element/meter"><code><meter></code></a> elements, the <code>max</code> attribute is a number that specifies the most positive value a form control to be considered valid.</p> <p>If the value exceeds the max value allowed, the <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/rangeOverflow"><code>validityState.rangeOverflow</code></a> will be true, and the control will be matched by the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:out-of-range"><code>:out-of-range</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> pseudo-classes.</p> +</div> +<h3 id="syntax">Syntax</h3> +<div class="section-content"> +<figure class="table-container"><div class="_table"><table class="no-markdown"> <caption> Syntax for <code>max</code> values by input <code>type</code> </caption> <thead> <tr> <th>Input type</th> <th>Syntax</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td><a href="../element/input/date">date</a></td> <td><code>yyyy-mm-dd</code></td> <td><code><input type="date" max="2019-12-25" step="1"></code></td> </tr> <tr> <td><a href="../element/input/month">month</a></td> <td><code>yyyy-mm</code></td> <td><code><input type="month" max="2019-12" step="12"></code></td> </tr> <tr> <td><a href="../element/input/week">week</a></td> <td><code>yyyy-W##</code></td> <td><code><input type="week" max="2019-W23" step=""></code></td> </tr> <tr> <td><a href="../element/input/time">time</a></td> <td><code>hh:mm</code></td> <td><code><input type="time" max="17:00" step="900"></code></td> </tr> <tr> <td><a href="../element/input/datetime-local">datetime-local</a></td> <td><code>yyyy-mm-ddThh:mm</code></td> <td><code><input type="datetime-local" max="2019-12-25T23:59"></code></td> </tr> <tr> <td><a href="../element/input/number">number</a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><number></a></td> <td><code><input type="number" min="0" step="5" max="100"></code></td> </tr> <tr> <td><a href="../element/input/range">range</a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><number></a></td> <td><code><input type="range" min="60" step="5" max="100"></code></td> </tr> </tbody> </table></div></figure> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the maximum value set, 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> pseudo-classes.</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/rangeOverflow"><code>rangeOverflow</code></a> for more information.</p> <p>For the <a href="../element/progress"><code><progress></code></a> element, the <code>max</code> attribute describes how much work the task indicated by the <code>progress</code> element requires. If present, must have a value greater than zero and be a valid floating point number. For the <a href="../element/meter"><code><meter></code></a> element, the <code>max</code> attribute defines the upper numeric bound of the measured range. This must be greater than the minimum value (<a href="min"><code>min</code></a> attribute), if specified. In both cases, if omitted, the value defaults to 1.</p> <figure class="table-container"><div class="_table"><table class="no-markdown"> <caption> Syntax for <code>max</code> values for other elements </caption> <thead> <tr> <th>Input type</th> <th>Syntax</th> <th>Example</th> </tr> </thead> <tbody> <tr> <td><a href="../element/progress"><code><progress></code></a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><number></a></td> <td><code><progress id="file" max="100" value="70"> 70% +</progress></code></td> </tr> <tr> <td><a href="../element/meter"><code><meter></code></a></td> <td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/number"><number></a></td> <td><code><meter id="fuel" min="0" max="100" low="33" high="66" +optimum="80" value="40"> at 40/100</meter></code></td> </tr> </tbody> </table></div></figure> +</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>max</code> attribute, ensure this maximum requirement is understood by the user. Providing instructions within the <a href="../element/label"><code><label></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#the-min-and-max-attributes">HTML Standard <br><small># the-min-and-max-attributes</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-meter-max">HTML Standard <br><small># attr-meter-max</small></a></td></tr> +<tr><td><a href="https://html.spec.whatwg.org/multipage/form-elements.html#attr-progress-max">HTML Standard <br><small># attr-progress-max</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>max</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<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>max</code></th> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-yes">≤18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">6</td> +<td class="bc-supports-no">No</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">16</td> +<td class="bc-supports-yes">11</td> +<td class="bc-supports-yes">10.3</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<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>max</code></th> +<td class="bc-supports-yes">4</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> +<h3 id="html.elements.input.max">html.elements.input.max</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.meter.max">html.elements.meter.max</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h3 id="html.elements.progress.max">html.elements.progress.max</h3> +<p>BCD tables only load in the browser<noscript> with JavaScript enabled. Enable JavaScript to view data.</noscript></p> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="step"><code>step</code></a></li> <li><a href="min"><code>min</code></a></li> <li>other meter attributes: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/low" class="page-not-created"><code>low</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/high" class="page-not-created"><code>high</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/optimum" class="page-not-created"><code>optimum</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/rangeOverflow"><code>validityState.rangeOverflow</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><input></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><meter></code></a> +</li> </ul></div><div class="_attribution"> + <p class="_attribution-p"> + © 2005–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/max" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/max</a> + </p> +</div> |