HTML 属性:max

max 属性定义了输入字段所能接受的最大值。如果元素的 value 大于此值,则该元素将不能通过校验。此值必须大于等于 min 属性的值。如果存在 max 属性但未指定或无效,则 max 值不会被应用。如果 max 属性有效,并且非空值大于 max 属性所允许的最大值,则约束验证将阻止表单提交。

max 属性适用于数值类型的输入,包括 datemonthweektimedatetime-localnumberrange 类型,以及 <progress><meter> 元素。它是一个数值,用于指定表单控件被认为有效的最大正值。

如果值超出了允许的最大值,validityState.rangeOverflow 将为 true,且控件会匹配 :out-of-range:invalid 伪类。

语法

各输入类型的 max 值语法
输入类型 语法 示例
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">

备注: 当用户输入的数据不符合设置的最大值时,该值在约束验证中被视为无效,并会匹配 :invalid:out-of-range 伪类。

请参阅客户端验证rangeOverflow 了解更多信息。

对于 <progress> 元素,max 属性描述了 progress 元素所表示的任务一共需要完成多少工作。如果该属性存在,必须具有大于零的值,并且是有效的浮点数。对于 <meter> 元素,max 属性定义了测量范围的上限值。此值必须大于最小值(如果指定了min 属性)。在这两种情况下,如果省略,默认值为 1。

其他元素的 max 值语法
元素类型 语法 示例
<progress> <number> <progress id="file" max="100" value="70"> 70% </progress>
<meter> <number> <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>

无障碍考虑

提供帮助用户了解如何填写表单并使用各个表单控件的指引。标明任何必填和可选的输入项、数据格式以及其他相关信息。在使用 max 属性时,确保用户理解最大值的要求。可以通过 <label> 提供说明。如果需要在标签之外提供上述说明以实现更灵活的布局设计,请考虑使用 aria-labelledbyaria-describedby

规范

Specification
HTML
# attr-input-max
HTML
# attr-meter-max
HTML
# attr-progress-max

浏览器兼容性

html.elements.input.max

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
max

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.meter.max

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
max

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

html.elements.progress.max

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
max

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见