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 Standard
# attr-input-min
HTML Standard
# attr-meter-max

浏览器兼容性

html.elements.input.min

BCD tables only load in the browser

html.elements.meter.min

BCD tables only load in the browser

参见