如何在HTML中使用min和max属性？

HTML中的min和max属性用于指定<input>元素的可接受值范围。max属性设置<input>元素的最大值，而min属性设置<input>元素的最小值。

对于输入限制，min和max属性与数字和日期输入类型一起使用。

语法

以下是使用min和max属性的语法

<input type="number" min="min_value" max="max_value">

让我们深入研究以下示例，以清楚地了解如何在HTML中使用min和max属性。

使用min和max属性

HTML中的min和max属性用于设置<input>元素的值范围。min属性定义了包含该属性的输入可接受和有效的最小值。max属性定义了包含该属性的输入可接受和有效的最大值。

示例

在以下示例中，我们使用min和max属性来设置输入的最小值和最大值。

<!DOCTYPE html>
<html>
<body>
   <form>
      <label for="min">Date Of Birth:</label>
      <input id="min" name="min" type="date" min="1995-12-31"><br><br>
      <label for="max">Age:</label>
      <input type="number" id="max" name="max" max="50">
      <input type="submit" value="Submit">
   </form>
</body>
</html>

执行上述脚本后，它将生成包含出生日期和年龄输入字段的输出，其中出生日期设置为最小值，年龄设置为最大值，以及一个提交按钮。

使用<form> action属性

HTML中的<form> action属性用于指定提交表单时处理输入控件的文件的URL。

示例

在以下示例中，我们使用min和max属性以及<form> action和get方法。

<!DOCTYPE html>
<html>
<body>
   <form action = "tutorialspoint/.com" method = "get">
      Select number between 1-50:
      <input type = "number" name="num" min = "1" max = "50"><br>
      <input type = "submit" value = "Submit">
   </form>
</body>
</html>

脚本执行后，它将生成包含文本和文本框以及提交按钮的输出。

更新于：2022年10月12日

4K+ 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告