このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
HTML 属性: multiple
論理属性のmultiple 属性は、設定されている場合、フォームコントロールが 1 つ以上の値を受け入れることを意味します。この属性はemail とfile の入力型と<select> に対して有効です。ユーザーが複数の値を選択する方法は、フォームコントロールに依存します。
試してみましょう
<label for="recipients">領収書の送り先は？</label><input name="recipients" type="email" multiple /><label for="shakes">どのシェイクをご注文されますか？</label><select name="shakes" multiple> <option>バニラシェイク</option> <option>ストロベリーシェイク</option> <option>チョコレートシェイク</option></select><label for="payment">支払方法は？</label><select name="payment"> <option>クレジットカード</option> <option>銀行振り込み</option></select>label { display: block; margin-top: 1em;}input,select { width: 100%;}input:invalid { background-color: lightpink;}概要
型によっては、multiple 属性が設定されている場合、フォームコントロールの外観が変わる場合があります。 file 入力型については、ブラウザーが提供するネイティブのメッセージが異なります。 Firefox では、ファイルが選択されていないとき、この属性が設定されていると「ファイルが選択されていません」、設定されていない場合は「ファイルが選択されていません」となります（訳注：英語では file と files の違いがありますが、日本語ではメッセージの違いはありません）。ほとんどのブラウザーでは、<select> コントロールにmultiple 属性が設定されていると、スクロールするリストボックスを表示するのに対し、設定されていない場合は単一行のドロップダウンを表示します。email 入力は同じ表示ですが、この属性が設定されていない場合は、カンマ区切りで複数のメールアドレスが設定されていると:invalid 擬似クラスに一致します。
multiple がemail 入力型に設定されている場合、ユーザーは 0 個（required がない場合）、1 個、またはそれ以上のカンマ区切りのメールアドレスを入れることができます。
<input type="email" multiple name="emails" />multiple 属性が指定された場合のみ、値はカンマで区切られた適切な形式のメールアドレスのリストになります。リスト内の各アドレスから、末尾と先頭のホワイトスペースはすべて削除されます。
multiple がfile 入力型に設定された場合、ユーザーは 1 つ以上のファイルを選択することができます。ユーザーはファイルピッカーから複数のファイルを、選択したプラットフォームが許可する任意の方法（Shift かControl を押したまま、それからクリックするなど）で選択することができます。
<input type="file" multiple name="uploads" />この属性を省略した場合は、<input> あたりに 1 つのファイルしか選択することができません。
multiple 属性を<select> 要素に設定すると、選択肢のリストから 0 個以上の選択肢を選択するためのコントロールを表します。それ以外の場合、<select> 要素は、選択肢のリストから単一の<option> を選択するためのコントロールを表します。
<select multiple name="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 入力型
<label for="emails">誰にメールしますか？</label><input type="email" multiple name="emails" list="dwarf-emails" required size="64" /><datalist> <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 属性が存在する場合、少なくとも 1 つのメールアドレスが必要です。
ブラウザーによっては、multiple が存在する場合には、関連付けられた<datalist> から配下のメールアドレスのために選択肢のlist を表示することがあります。他のブラウザーは対応していません。
file 入力型
multiple がfile 入力型に設定されている場合、1 つ以上のファイルを選択することができます。
<form method="post" enctype="multipart/form-data"> <p> <label for="uploads">アップロードする画像を選択してください: </label> <input type="file" name="uploads" accept=".jpg, .jpeg, .png, .svg, .gif" multiple /> </p> <p> <label for="text">アップロードするテキストファイルを選択してください: </label> <input type="file" 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> を選択するための制御を表します。一般的に、このコントロールは複数の属性の存在に基づいて異なる外観を持ち、属性が存在する場合には、ほとんどのブラウザーは、一行のドロップダウンではなくスクロールするリストボックスを表示します。
<form method="get" action="#"> <p> <label for="dwarfs">好きなドワーフの木こりを選んでください:</label> <select multiple name="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"> <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 のコメントを解除すると、複数選択が単一選択と同じ高さになるようにします。 *//*select[multiple] { height: 1.5em; vertical-align: top;}select[multiple]:focus,select[multiple]:active { height: auto;}*/複数の属性を持つ<select> 要素の中で複数のオプションを選択する方法がいくつかあります。オペレーティングシステムに応じて、マウスを使用する人はCtrl、Command、またはShift キーを押したまま、複数のオプションをクリックして、それらを選択／選択解除することができます。キーボードユーザーは<select> 要素に焦点を当てて、カーソルキーのUp とDown を使って選択したい範囲の上部または下部にある項目を選択して、オプションを上下に移動することで、複数の連続した項目を選択することができます。連続していない項目の選択はあまりサポートされていません:Space キーを押すことで項目の選択と選択解除ができるはずですが、サポートはブラウザーによって異なります。
仕様書
| Specification |
|---|
| HTML # attr-input-multiple |
| HTML # attr-select-multiple |