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
廣告