HTML 属性: multiple

試してみましょう

概要

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

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

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

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

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

multiple 属性を <select> 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、 <select> 要素は、選択肢のリストから単一の <option> を選択するためのコントロールを表します。

multiple を指定すると、ほとんどのブラウザーでは 1 行のドロップダウンではなく、スクロールするリストボックスが表示されます。

アクセシビリティの考慮

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

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

例

email 入力型

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

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

file 入力型

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

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

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

select

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

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

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

仕様書

ブラウザーの互換性

html.elements.input.multiple

Enable JavaScript to view this browser compatibility table.

html.elements.select.multiple

Enable JavaScript to view this browser compatibility table.

関連情報

• <input>
• <select>
• 複数のメールアドレスの許可