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

htmlweb developmentfront end technology更新于 2024/5/23 0:44:17

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>