HTML max 属性用于定义输入字段可接受且有效的最大值。
输入的值必须小于或等于最大值。如果表单输入字段值大于 max 属性值,则在提交表单时会显示一些警告。
语法
<input max="number|date">
适用于
下面列出的元素允许使用 HTML max 属性
元素 | 描述 |
---|---|
<input> | HTML <input> 标签用于接收来自用户的各种类型的输入。 |
<progress> | HTML <progress> 标签用于显示任务的完成进度 |
<meter> | HTML <meter> 标签用于渲染给定范围内的数据。 |
HTML max 属性的示例
以下示例将说明 HTML low 属性,我们应该在何处以及如何使用此属性!
设置数字输入的最大值
在以下示例中,我们将 max 属性与第 th input type=number 一起使用,以指定数字输入的最大值为 5。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML max attribute</title>
</head>
<body>
<form>
Enter Number:
<input type="number" max="5">
<button>Submit</button>
</form>
</body>
</html>
设置日期输入的最大值
考虑到另一种情况,我们将使用带有输入 type=date 的 max 属性来设置日期输入的最大允许值。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML max attribute</title>
</head>
<body>
<form> Enter the date before 2021-02-02:
<br>
<input type="date" max="2021-02-02">
<button>Submit</button>
</form>
</body>
</html>
设置进度条的最大值
在以下示例中,我们定义了一个进度条,并将其最大值设置为 100,以便当前进度以百分比显示。
<!DOCTYPE html>
<html>
<body>
<h1>The progress Bar</h1>
<label for="file">
Loading progress:
</label>
<progress id="file"
value="32"
max="100">
</progress>
</body>
</html>
设置仪表元素的最大值
在以下示例中,我们将创建一个仪表元素并将最大值设置为 100,以显示百分比进度。
<!DOCTYPE html>
<html lang="en">
<body>
<h3>HTML low Attribute</h3>
<label for="server-load">
Room 1: Server Load
</label>
<meter id="server-load"
value="40"
min="0"
max="100"
low="50"
high="90"
optimum="0.5">
</meter>
</body>
</html>
支持的浏览器
浏览器 | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
是否支持 | 5.0 | 10.0 | 16.0 | 5.1 | 10.6 |