HTML 属性:max

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

¥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 validation. This value must be greater than or equal to the value of the min attribute. If the max attribute is present but 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.

对数字输入类型有效,包括 datemonthweektimedatetime-localnumberrange 类型以及 <progress><meter> 元素,max 属性是一个数字,指定要考虑的表单控件的最大正值 有效的。

¥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.

如果该值超过允许的最大值,则 validityState.rangeOverflow 将为 true,并且该控件将由 :out-of-range:invalid 伪类匹配。

¥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
输入类型 语法 示例
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 <input type="number" min="0" step="5" max="100">
range <input type="range" min="60" step="5" max="100">

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

¥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.

有关详细信息,请参阅 客户端验证rangeOverflow

¥See Client-side validation and rangeOverflow for more information.

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

¥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 minimum value (min attribute), if specified. In both cases, if omitted, the value defaults to 1.

Syntax for max values for other elements
输入类型 语法 示例
<progress> <progress id="file" max="100" value="70"> 70% </progress>
<meter> <meter id="fuel" min="0" max="100" low="33" high="66" optimum="80" value="40"> at 40/100</meter>

无障碍问题

¥Accessibility concerns

提供说明以帮助用户了解如何填写表单并使用各个表单控件。指示任何必需和可选的输入、数据格式和其他相关信息。使用 max 属性时,请确保用户理解此最大要求。在 <label> 内提供说明可能就足够了。如果在标签之外提供说明,可以更灵活地定位和设计,请考虑使用 aria-labelledbyaria-describedby

¥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.

规范

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

¥Specifications

浏览器兼容性

¥Browser compatibility

html.elements.input.max

BCD tables only load in the browser

html.elements.meter.max

BCD tables only load in the browser

html.elements.progress.max

BCD tables only load in the browser

也可以看看