HTML 属性:min

min 属性定义了可接受和有效的输入最小值。如果元素的 value 小于此值,则该元素将无法通过验证。此值必须小于等于 max 属性的值。

某些输入类型具有默认的最小值。如果输入项没有默认的最小值,且 min 指定的值无法转换为有效的数字(或未设置最小值),则输入没有最小值。

以下输入类型支持该属性:datemonthweektimedatetime-localnumberrange 类型,以及 <meter> 元素。

语法

不同输入类型的 min 值语法
输入类型 语法 示例
date yyyy-mm-dd <input type="date" min="2019-12-25" step="1">
month yyyy-mm <input type="month" min="2019-12" step="12">
week yyyy-W## <input type="week" min="2019-W23" step="">
time HH:mm <input type="time" min="09:00" step="900">
datetime-local yyyy-mm-ddTHH:mm <input type="datetime-local" min="2019-12-25T19:30">
number <number> <input type="number" min="0" step="5" max="100">
range <number> <input type="range" min="60" step="5" max="100">

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

参阅客户端验证rangeUnderflow 获取更多信息。

对于 <meter> 元素,min 属性定义了测量范围的最小数值边界。若指定,则该值必须小于最大值(max 属性)。在两种情况下,如果省略,则默认值为 1。

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

对 step 的影响

minstep 的值决定了有效的值范围,即使未包含 step 属性,step 也会默认取值为 1

我们可以为无效输入添加一个红色边框:

css
input:invalid {
  border: solid red 3px;
}

然后定义一个最小值为 7.2 且省略了 step 属性的输入元素,此时 step 默认值为 1。

html
<input id="myNumber" name="myNumber" type="number" min="7.2" value="8" />

由于 step 的默认值为 1,因此有效值包括 7.28.29.2 等。而值 8 是无效的。由于我们包含了无效值,支持的浏览器将显示该值为无效。

如果没有明确指定,numberrange 类型的 step 默认值为 1,而日期、时间输入类型的 step 默认值为 1 个单位(秒、周、月、天)。

无障碍考虑

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

规范

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

浏览器兼容性

html.elements.input.min

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
min

Legend

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

Full support
Full support

html.elements.meter.min

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
min

Legend

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

Full support
Full support
No support
No support

参见