HTML - multiple 属性_HTML 菜鸟教程

HTML multiple 属性是一个布尔属性，它允许表单控件接受多个值。

当与输入（type='file & email'）一起使用时，它允许用户选择多个文件并一次撰写多封电子邮件，如果它与select元素一起使用，它允许用户一次选择多个选项。

语法

<tag multiple></tag>

适用于

下面列出的元素允许使用 HTML multiple 属性

元素	描述
<input>	HTML <input> 标签用于接受来自用户的各种类型的输入。
<select>	HTML <select> 标签用于在在线表单中创建下拉列表。

HTML multiple 属性示例

以下示例将说明 HTML minlength 属性，我们应该在何处以及如何使用此属性！

从下拉列表中选择多个值

在以下示例中，我们将使用带有 select 标签的 multiple 属性来选择下拉列表中的多个值。

<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML 'multiple' attribute</title>
</head>

<body>
	 <p>Select languages you knows (use Ctrl + click): </p>
	 <select multiple>
			<option value="">Hindi</option>
			<option value="">English</option>
			<option value="">Malayalam</option>
			<option value="">Telugu</option>
	 </select>
	 <p>Select your mother tongue:</p>
	 <select>
			<option value="">Hindi</option>
			<option value="">English</option>
			<option value="">Malayalam</option>
			<option value="">Telugu</option>
	 </select>
</body>

</html>

在输入中选择多个文件

在此示例中，我们将使用带有 <input type='file' 的 multiple 属性>来接收来自用户的多个文件。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML 'multiple' attribute</title>
</head>
<body>
	 <h3>
			Example of HTML 'multiple' attribute
	 </h3>
	 <form>
			<p>Select files: </p>
			<input type="file" multiple>
			<button onclick="return false;" >
				 Submit
			</button>
	 </form>
	 <p> 
			You can select multiple files at a time, 
			Use Ctrl + click
	 </p>

</body>
</html>

允许多封电子邮件进入

让我们看一下以下示例，我们将在其中将 multiple 属性与输入 type=email 一起使用。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML 'multiple' attribute</title>
	 <style>
			input:invalid {
				 background-color: lightcoral;
			}
	 </style>
</head>
<body>
	 <h3>
			Example of the HTML 'multiple' attribute
	 </h3>
	 <form>
			<label>Multiple Emails: </label>
			<input type="email" name='email' multiple> 
			(with multiple attribute) 
			<br>
			<br>

			<label for="">Single Email: </label>
			<input type="email" name='email'> 
			(without multiple attribute) 
			<br>
			<br>
			<button onclick="return false;" >
				 Submit
			</button>
	 </form>
</body>
</html>

支持的浏览器

浏览器
是否支持	Yes	Yes	Yes	Yes	Yes

<< HTML - min 属性 HTML - name 属性 >>