HTML - max 属性

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

打印本页