HTML 属性: multiple

論理属性の multiple 属性は、設定されている場合、フォームコントロールが 1 つ以上の値を受け入れることを意味します。この属性は emailfile の入力型と <select> に対して有効です。ユーザーが複数の値を選択する方法は、フォームコントロールに依存します。

試してみましょう

概要

型によっては、multiple 属性が設定されている場合、フォームコントロールの外観が変わる場合があります。 file 入力型については、ブラウザーが提供するネイティブのメッセージが異なります。 Firefox では、ファイルが選択されていないとき、この属性が設定されていると「ファイルが選択されていません」、設定されていない場合は「ファイルが選択されていません」となります(訳注:英語では file と files の違いがありますが、日本語ではメッセージの違いはありません)。ほとんどのブラウザーでは、 <select> コントロールに multiple 属性が設定されていると、スクロールするリストボックスを表示するのに対し、設定されていない場合は単一行のドロップダウンを表示します。 email 入力は同じ表示ですが、この属性が設定されていない場合は、カンマ区切りで複数のメールアドレスが設定されていると :invalid 擬似クラスに一致します。

multipleemail 入力型に設定されている場合、ユーザーは 0 個(required がない場合)、1 個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。

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

multiple 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭のホワイトスペースはすべて削除されます。

multiplefile 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法(ShiftControl を押したまま、それからクリックするなど)で選択することができます。

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

この属性を省略した場合は、 <input> あたりに 1 つのファイルしか選択することができません。

multiple 属性を <select> 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、 <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 を指定すると、ほとんどのブラウザーでは 1 行のドロップダウンではなく、スクロールするリストボックスが表示されます。

アクセシビリティ

ユーザーがフォームに記入する方法を理解し、個々のフォームコントロールを使用するための指示を提供してください。入力が必須であるか任意であるか、データの書式、その他の関連する情報です。 multiple 属性を使用する場合は、ユーザーに複数の値が許可されていることを知らせ、「複数のメールアドレスをカンマ区切りで入力してください」などのように、複数の値を入力する方法を指示してください。

複数選択で size="1" を設定すると、ブラウザーによっては単一選択として表示されることがありますが、その場合はフォーカスが拡大されず、使い勝手が悪くなってしまいます。そのようなことはしないでください。 select の外観を変更する場合、また変更しない場合でも、別の方法で複数のオプションを選択できることをユーザーに知らせるようにしてください。

email 入力型

html
<label for="emails">誰にメールしますか?</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>

multiple 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾の空白と先頭の空白はすべて削除されます。 required 属性が存在する場合、少なくとも 1 つのメールアドレスが必要です。

ブラウザーによっては、 multiple が存在する場合には、関連付けられた <datalist> から配下のメールアドレスのために選択肢の list を表示することがあります。他のブラウザーは対応していません。

file 入力型

multiplefile 入力型に設定されている場合、1 つ以上のファイルを選択することができます。

html
<form method="post" enctype="multipart/form-data">
  <p>
    <label for="uploads">アップロードする画像を選択してください: </label>
    <input
      type="file"
      id="uploads"
      name="uploads"
      accept=".jpg, .jpeg, .png, .svg, .gif"
      multiple />
  </p>
  <p>
    <label for="text"
      >アップロードするテキストファイルを選択してください:
    </label>
    <input type="file" id="text" name="text" accept=".txt" />
  </p>
  <p>
    <input type="submit" value="Submit" />
  </p>
</form>

multiple が設定された file 入力欄と、設定されていない入力欄との外見の違いに注意してください。

フォームが送信されたとき、 method="get" を使用していれば、選択された各ファイルの名前が URL 引数に ?uploads=img1.jpg&uploads=img2.svg のように追加されていたはずです。しかし、マルチパートフォームデータを送信しているので、 post を使用する必要があります。詳しくは <form> 要素とフォームデータの送信を参照してください。

select

<select> 要素の multiple 属性は、選択肢のリストから 0 個以上の選択肢を選択するための制御を表します。そうでなければ、<select> 要素は、選択肢のリストから単一の <option> を選択するための制御を表します。一般的に、このコントロールは複数の属性の存在に基づいて異なる外観を持ち、属性が存在する場合には、ほとんどのブラウザーは、一行のドロップダウンではなくスクロールするリストボックスを表示します。

html
<form method="get" action="#">
  <p>
    <label for="dwarfs">好きなドワーフの木こりを選んでください:</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">好きなものを選んでください:</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>

2 つのフォームコントロール間の外観の違いに注意してください。

css
/* この CSS のコメントを解除して、マルチプルがシングルと同じ高さになるようにします。 */

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

複数の属性を持つ <select> 要素の中で複数のオプションを選択する方法がいくつかあります。オペレーティングシステムに応じて、マウスを使用する人は CtrlCommand、または Shift キーを押したまま、複数のオプションをクリックして、それらを選択/選択解除することができます。キーボードユーザーは <select> 要素に焦点を当てて、カーソルキーの UpDown を使って選択したい範囲の上部または下部にある項目を選択して、オプションを上下に移動することで、複数の連続した項目を選択することができます。連続していない項目の選択はあまりサポートされていません: Space キーを押すことで項目の選択と選択解除ができるはずですが、サポートはブラウザーによって異なります。

仕様書

Specification
HTML
# attr-input-multiple
HTML
# attr-select-multiple

ブラウザーの互換性

html.elements.input.multiple

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
multiple

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

html.elements.select.multiple

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
multiple

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報