在 HTML5 中为 input 元素设置最小值和最大值

在 HTML5 中，我们可以为 <input> 元素设置最小值和最大值，来限制用户输入的范围。本文将介绍如何实现这个功能。

最小值 min

使用 min 属性可以为 <input> 元素设置最小值。该属性值应该是一个数字或日期，是用户可输入的最小值。当用户输入小于最小值的数值或日期时，浏览器会自动发出警告。

下面是一个示例：

<label for="age">您的年龄：</label>
<input type="number" id="age" name="age" min="18">

上述代码中，min 属性被设置为 18，意味着用户不能输入小于 18 的年龄。当用户输入小于 18 的数字时，浏览器会发出警告。

注意：某些浏览器可能不支持 min 属性。在这种情况下，您需要使用 JavaScript 代码来实现输入检查。

最大值 max

同样地，使用 max 属性可以为 <input> 元素设置最大值。该属性值应该是一个数字或日期，是用户可输入的最大值。当用户输入大于最大值的数值或日期时，浏览器会自动发出警告。

下面是一个示例：

<label for="price">商品价格：</label>
<input type="number" id="price" name="price" max="999">

上述代码中，max 属性被设置为 999，意味着用户不能输入大于 999 的价格。当用户输入大于 999 的数字时，浏览器会发出警告。

注意：同样地，某些浏览器可能不支持 max 属性。在这种情况下，您需要使用 JavaScript 代码来实现输入检查。

总结

使用 min 和 max 属性可以帮助我们限制用户输入的范围。这对于需要输入特定范围数值或日期的应用程序非常有用。注意，某些浏览器可能不支持这些属性，因此我们需要考虑使用 JavaScript 代码来实现输入检查。