HTML 屬性：multiple

布林型 **multiple** 屬性，如果設定，表示表單控制元件接受一個或多個值。適用於 email 和 file 輸入型別以及 <select>，使用者選擇多個值的方式取決於表單控制元件。

根據型別，如果設定了 multiple 屬性，表單控制元件的外觀可能會有所不同。對於檔案輸入型別，瀏覽器提供的本機訊息會有所不同。在 Firefox 中，如果存在該屬性，檔案輸入將顯示“未選擇檔案”，如果不存在該屬性，則顯示“未選擇檔案”。大多數瀏覽器會為設定了 multiple 屬性的 <select> 控制元件顯示一個滾動列表框，而如果沒有該屬性，則顯示一個單行下拉選單。如果未設定該屬性，而 email 輸入包含多個逗號分隔的電子郵件地址，則 :invalid 偽類將匹配，而無論是否包含 multiple 屬性，電子郵件輸入的顯示方式都相同。

在 email 輸入型別上設定 multiple 時，使用者可以包含零個（如果未設定 required）、一個或多個逗號分隔的電子郵件地址。

html

<input type="email" multiple name="emails" id="emails" />

當且僅當指定了 multiple 屬性時，該值可以是格式正確的逗號分隔的電子郵件地址列表。列表中每個地址的尾隨空格和前導空格都會被刪除。

在 file 輸入型別上設定 multiple 時，使用者可以選擇一個或多個檔案。使用者可以使用所選平臺允許的任何方式（例如，按住 Shift 或 Control 鍵，然後單擊）從檔案選擇器中選擇多個檔案。

html

<input type="file" multiple name="uploads" id="uploads" />

如果省略該屬性，使用者每個 <input> 只能選擇一個檔案。

<select> 元素上的 multiple 屬性表示一個控制元件，用於從選項列表中選擇零個或多個選項。否則，<select> 元素表示一個控制元件，用於從選項列表中選擇一個 <option>。該控制元件通常根據是否具有 multiple 屬性具有不同的外觀，當存在該屬性時，大多數瀏覽器會顯示一個滾動列表框，而不是單行下拉選單。

html

<select multiple name="dwarfs" id="dwarfs">
  <option>Grumpy</option>
  <option>Happy</option>
  <option>Sleepy</option>
  <option>Bashful</option>
  <option>Sneezy</option>
  <option>Dopey</option>
  <option>Doc</option>
</select>

如果指定了 multiple，大多數瀏覽器會顯示一個滾動列表框，而不是單行下拉選單。

無障礙性問題

提供說明，幫助使用者瞭解如何填寫表單並使用各個表單控制元件。指示任何必填和可選輸入、資料格式以及其他相關資訊。使用 multiple 屬性時，請告知使用者允許使用多個值，並提供有關如何提供多個值的說明，例如“用逗號分隔電子郵件地址”。

在多選框上設定 size="1" 可能會使它在某些瀏覽器中顯示為單選框，但這樣它在獲得焦點時不會擴充套件，從而影響可用性。不要這樣做。如果您確實更改了 select 的外觀，即使您沒有更改，也要確保告知使用者可以透過其他方法選擇多個選項。

示例

電子郵件輸入

html

<label for="emails">Who do you want to email?</label>
<input
  type="email"
  multiple
  name="emails"
  id="emails"
  list="dwarf-emails"
  required
  size="64" />

<datalist id="dwarf-emails">
  <option value="grumpy@woodworkers.com">Grumpy</option>
  <option value="happy@woodworkers.com">Happy</option>
  <option value="sleepy@woodworkers.com">Sleepy</option>
  <option value="bashful@woodworkers.com">Bashful</option>
  <option value="sneezy@woodworkers.com">Sneezy</option>
  <option value="dopey@woodworkers.com">Dopey</option>
  <option value="doc@woodworkers.com">Doc</option>
</datalist>

input:invalid {
  border: red solid 3px;
}

當且僅當指定了 multiple 屬性時，該值可以是格式正確的逗號分隔的電子郵件地址列表。列表中每個地址的尾隨空格和前導空格都會被刪除。如果存在 required 屬性，則至少需要一個電子郵件地址。

當 multiple 存在時，某些瀏覽器支援從關聯的 <datalist> 顯示後續電子郵件地址的選項 list 的外觀。其他瀏覽器則不支援。

檔案輸入

在 file 輸入型別上設定 multiple 時，使用者可以選擇一個或多個檔案

html

<form method="post" enctype="multipart/form-data">
  <p>
    <label for="uploads"> Choose the images you want to upload: </label>
    <input
      type="file"
      id="uploads"
      name="uploads"
      accept=".jpg, .jpeg, .png, .svg, .gif"
      multiple />
  </p>
  <p>
    <label for="text">Pick a text file to upload: </label>
    <input type="file" id="text" name="text" accept=".txt" />
  </p>
  <p>
    <input type="submit" value="Submit" />
  </p>
</form>

注意設定了 multiple 的示例與沒有 multiple 的其他 file 輸入之間的外觀差異。

在提交表單時，如果我們使用 method="get"，每個選定檔案的名稱都將作為 URL 引數新增到 URL 引數中，例如 ?uploads=img1.jpg&uploads=img2.svg。但是，由於我們正在提交多部分表單資料，因此必須使用 post。有關更多資訊，請參閱 <form> 元素和傳送表單資料。

選擇

html

<form method="get" action="#">
  <p>
    <label for="dwarfs">Select the dwarf woodsman you like:</label>
    <select multiple name="dwarfs" id="dwarfs">
      <option>grumpy@woodworkers.com</option>
      <option>happy@woodworkers.com</option>
      <option>sleepy@woodworkers.com</option>
      <option>bashful@woodworkers.com</option>
      <option>sneezy@woodworkers.com</option>
      <option>dopey@woodworkers.com</option>
      <option>doc@woodworkers.com</option>
    </select>
  </p>
  <p>
    <label for="favoriteOnly">Select your favorite:</label>
    <select name="favoriteOnly" id="favoriteOnly">
      <option>grumpy@woodworkers.com</option>
      <option>happy@woodworkers.com</option>
      <option>sleepy@woodworkers.com</option>
      <option>bashful@woodworkers.com</option>
      <option>sneezy@woodworkers.com</option>
      <option>dopey@woodworkers.com</option>
      <option>doc@woodworkers.com</option>
    </select>
  </p>
  <p>
    <input type="submit" value="Submit" />
  </p>
</form>

注意這兩種表單控制元件的外觀差異。

css

/* uncomment this CSS to make the multiple the same height as the single */

/*
select[multiple] {
  height: 1.5em;
  vertical-align: top;
}
select[multiple]:focus,
select[multiple]:active {
  height: auto;
}
*/

有幾種方法可以在帶有multiple屬性的<select>元素中選擇多個選項。根據作業系統的不同，滑鼠使用者可以按住Ctrl、Command或Shift鍵，然後單擊多個選項來選擇或取消選擇它們。鍵盤使用者可以透過將焦點放在<select>元素上，使用Up和Down游標鍵上下移動選項來選擇要選擇的範圍頂部或底部的專案，從而選擇多個連續的專案。對非連續專案的支援並不那麼好：應該能夠透過按Space鍵來選擇和取消選擇專案，但瀏覽器之間的支援各不相同。

規範

規範
HTML 標準 # attr-input-multiple
HTML 標準 # attr-select-multiple

HTML 屬性：multiple

試試看

概述

無障礙性問題

示例

電子郵件輸入

檔案輸入

選擇

規範

瀏覽器相容性

html.elements.input.multiple

html.elements.select.multiple

另請參閱