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>

允许输入多个电子邮件

让我们看一下以下示例,我们将在此示例中使用 input type=email 的 multiple 属性。

<!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>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
multiple
html_attributes_reference.htm
广告