HTML 屬性：multiple

試一試

<label for="recipients">Where should we send the receipt?</label>
<input id="recipients" name="recipients" type="email" multiple />

<label for="shakes">Which shakes would you like to order?</label>
<select id="shakes" name="shakes" multiple>
  <option>Vanilla Shake</option>
  <option>Strawberry Shake</option>
  <option>Chocolate Shake</option>
</select>

<label for="payment">How would you like to pay?</label>
<select id="payment" name="payment">
  <option>Credit card</option>
  <option>Bank Transfer</option>
</select>

label {
  display: block;
  margin-top: 1em;
}

input,
select {
  width: 100%;
}

input:invalid {
  background-color: lightpink;
}

如果設定了 multiple 屬性，表單控制元件的外觀可能會因型別而異。對於檔案輸入型別，瀏覽器提供的原生訊息有所不同。在 Firefox 中，當此屬性存在時，檔案輸入顯示為“未選擇檔案”，而當此屬性不存在時，則顯示為“未選擇檔案”（譯者注：原文此處有誤，應為單數）。大多數瀏覽器會為設定了 multiple 屬性的 <select> 控制元件顯示一個滾動列表框，而當該屬性省略時，則顯示一個單行下拉列表。email 輸入無論是否包含 multiple 屬性，顯示方式都相同，但如果包含多個用逗號分隔的電子郵件地址而未設定該屬性，它將匹配 :invalid 偽類。

當在 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> 的控制元件。

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 時，大多數瀏覽器會顯示一個滾動列表框，而不是單行下拉列表。

多個選定的選項使用 URLSearchParams 陣列約定提交，即 name=value1&name=value2。

可訪問性考慮

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

在多選框上設定 size="1" 可能會在某些瀏覽器中使其看起來像單選框，但隨後它不會在聚焦時展開，從而損害可用性。不要這樣做。如果你確實更改了選擇框的外觀，即使你不更改，也要確保透過其他方法告知使用者可以選擇多個選項。

示例

電子郵件輸入

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 的示例與未設定的 file 輸入之間的外觀差異。

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

select

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

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> 元素上，然後使用 向上 和 向下 游標鍵選擇要選擇範圍的頂部或底部的專案，從而選擇多個連續的專案。非連續專案的選擇支援不那麼好：專案應該能夠透過按 空格鍵 進行選擇和取消選擇，但支援因瀏覽器而異。

規範

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

幫助改進 MDN

瞭解如何貢獻

此頁面由 MDN 貢獻者最後修改於 2025 年 7 月 24 日。

在 GitHub 上檢視此頁面 • 報告此內容的問題

試一試

概述

可訪問性考慮

示例

電子郵件輸入

檔案輸入

select

規範

瀏覽器相容性

html.elements.input.multiple

html.elements.select.multiple

另見

幫助改進 MDN