HTML attribute: max - HTML: HyperText Markup Language 编辑

The max attribute defines the maximum value that is acceptable and valid for the input containing the attribute. If the value of the element is greater than this, the element fails constraint validation. This value must be greater than or equal to the value of the /wiki/en-US/docs/Web/HTML/Attributes/min attribute. If the max attribute is present by is not specified or is invalid, no max value is applied. If the max attribute is valid and a non-empty value is greater than the maximum allowed by the max attribute, constraint validation will prevent form submission.

Valid for the numeric input types, including the date, month, week, time, datetime-local, number and range types, and both the <progress> and <meter> elements, the max attribute is a number that specifies the most positive value a form control to be considered valid.

If the value exceeds the max value allowed, the validityState.rangeOverflow will be true, and the control will be matched by the :out-of-range and :invalid pseudo-classes.

Syntax

Syntax for max values by input type
Input typeSyntaxExample
dateyyyy-mm-dd<input type="date" max="2019-12-25" step="1">
monthyyyy-mm<input type="month" max="2019-12" step="12">
weekyyyy-W##<input type="week" max="2019-W23" step="">
timehh:mm<input type="time" max="17:00" step="900">
datetime-localyyyy-mm-ddThh:mm<input type="datetime-local" /wiki/en-US/docs/Web/HTML/Attributes/min="2019-12-25T23:59">
number<number><input type="number" /wiki/en-US/docs/Web/HTML/Attributes/min="0" step="5" max="100">
range<number><input type="range" /wiki/en-US/docs/Web/HTML/Attributes/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 contraint validation and will match the :invalid and :out-of-range pseudo-classes.

See Client-side validation and rangeOverflow for more information.

For the <progress> element, the max attribute describes how much work the task indicated by the progress element requires. If present, must have a value greater than zero and be a valid floating point number. For the <meter> element, the max attribute defines the upper numeric bound of the measured range. This must be greater than the /wiki/en-US/docs/Web/HTML/Attributes/minimum value (/wiki/en-US/docs/Web/HTML/Attributes/min attribute), if specified. In both cases, if omitted, the value defaults to 1.

Syntax for max values for other elements
Input typeSyntaxExample
<progress><number><progress id="file" max="100" value="70"> 70% </progress>
<meter><number><meter id="fuel" /wiki/en-US/docs/Web/HTML/Attributes/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 the max 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 using aria-labelledby or aria-describedby.

Specifications

SpecificationStatusComment
HTML Living Standard
The definition of 'max attribute' in that specification.
Living Standard
HTML5
The definition of 'max attribute' in that specification.
Recommendation
HTML Living Standard
The definition of 'progress element' in that specification.
Living Standard
HTML5
The definition of 'progress element' in that specification.
Recommendation
HTML Living Standard
The definition of 'meter element' in that specification.
Living Standard
HTML5
The definition of 'meter element' in that specification.
Recommendation

See also

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

词条统计

浏览:130 次

字数:11038

最后编辑:7年前

编辑次数:0 次

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文