HTML attribute: max
Themax attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If thevalue of the element is greater than this, the element failsvalidation. This value must be greater than or equal to the value of themin attribute. If themax attribute is present but is not specified or is invalid, nomax value is applied. If themax attribute is valid and a non-empty value is greater than the maximum allowed by themax attribute, constraint validation will prevent form submission.
The max attribute is valid for the numeric input types, including thedate,month,week,time,datetime-local,number andrange types, and both the<progress> and<meter> elements. It is a number that specifies the most positive value a form control to be considered valid.
If the value exceeds the max value allowed, thevalidityState.rangeOverflow will be true, and the control will be matched by the:out-of-range and:invalid pseudo-classes.
Syntax
| Input type | Syntax | Example |
|---|---|---|
| date | yyyy-mm-dd | <input type="date" max="2019-12-25" step="1"> |
| month | yyyy-mm | <input type="month" max="2019-12" step="12"> |
| week | yyyy-W## | <input type="week" max="2019-W23" step=""> |
| time | HH:mm | <input type="time" max="17:00" step="900"> |
| datetime-local | yyyy-mm-ddTHH:mm | <input type="datetime-local" max="2019-12-25T23:59"> |
| number | <number> | <input type="number" min="0" step="5" max="100"> |
| range | <number> | <input type="range" min="60" step="5" max="100"> |
Note: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:invalid and:out-of-range pseudo-classes.
SeeClient-side validation andrangeOverflow for more information.
For the<progress> element, themax attribute describes how much work the task indicated by theprogress element requires. If present, must have a value greater than zero and be a valid floating point number. For the<meter> element, themax attribute defines the upper numeric bound of the measured range. This must be greater than the minimum value (min attribute), if specified. In both cases, if omitted, the value defaults to 1.
| Input type | Syntax | Example |
|---|---|---|
<progress> | <number> | <progress max="100" value="70"> 70% </progress> |
<meter> | <number> | <meter min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter> |
Accessibility concerns
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 themax attribute, ensure this maximum requirement is understood by the user. Providing instructions within the<label> may be sufficient. If providing instructions outside of labels, which allows more flexible positioning and design, consider usingaria-labelledby oraria-describedby.
Specifications
| Specification |
|---|
| HTML # attr-input-max |
| HTML # attr-meter-max |
| HTML # attr-progress-max |