HTML min和max属性

min和max属性用于设置数值或日期输入框的最小值和最大值边界，浏览器会自动进行表单验证。

基本语法

<input type="number" min="最小值" max="最大值">
<input type="date" min="最早日期" max="最晚日期">

适用类型

代码示例

数值范围限制

<form>
  <label>年龄（18-100岁）：</label>
  <input type="number" name="age" min="18" max="100" required>

  <label>数量（1-99）：</label>
  <input type="number" name="quantity" min="1" max="99">

  <button type="submit">提交</button>
</form>

日期范围限制

<form>
  <label>预订日期：</label>
  <input type="date" name="booking" min="2026-01-01" max="2026-12-31">

  <label>出生日期：</label>
  <input type="date" name="birthday" min="1900-01-01" max="2026-05-17">

  <button type="submit">提交</button>
</form>

滑块控件

<form>
  <label>音量（0-100）：</label>
  <input type="range" name="volume" min="0" max="100" value="50">
  <output id="volumeValue">50</output>
</form>

<script>
  const range = document.querySelector('input[name="volume"]');
  const output = document.querySelector('#volumeValue');
  range.addEventListener('input', () => {
    output.textContent = range.value;
  });
</script>

验证行为

当输入值超出min/max范围时：

• 表单提交会被阻止
• 输入框显示:invalid伪类样式
• validity对象中rangeUnderflow或rangeOverflow属性为true

<form>
  <input type="number" min="10" max="100" id="numInput">
  <span id="errorMsg"></span>
</form>

<script>
  const input = document.getElementById('numInput');
  input.addEventListener('input', () => {
    if (input.validity.rangeUnderflow) {
      document.getElementById('errorMsg').textContent = '值不能小于10';
    } else if (input.validity.rangeOverflow) {
      document.getElementById('errorMsg').textContent = '值不能大于100';
    }
  });
</script>

注意：min/max仅限制提交时的值，用户仍可输入超出范围的数值，需配合step属性使用可优化步进效果。

要点总结

1. min设置最小值，max设置最大值，可单独使用
2. 适用于number、range、date等数值/日期类型输入框
3. 验证失败时validity对象对应属性为true
4. 配合CSS伪类可实现视觉反馈
5. 滑块控件(type="range")强制依赖min/max设置范围