【HTML】multiple属性を使って複数選択を許可する方法

このページについて

このページではHTMLで使う事ができるmultipleの機能と使い方を解説しています。

multipleはinputタグ/selectタグで使う事ができる属性で、これを使うとユーザーが複数選択をする事ができるようになります。通常は1つしか項目を選択したりアップロードできないようになっていますが、この属性を使う事でその制約を外す事ができます。

multipleはブール値と言って、「書いたら有効、書かなかったら無効」という性質を持っています。

inputタグで使う場合、はtype属性でfileかemailを使った場合に有効になります。以下はfileでの使用例です。実際にはname属性やid属性が必要ですが今回は例のため省略しています。

<input type="file" multiple>

見た目的には変化はありませんが、ユーザーはShiftキーやControlキーを使って複数のファイルを選択する事が可能になります。

emailで使う場合は、メールアドレスをカンマ区切りで複数入力できるようになります。こればかりはユーザーに対してメッセージで明記するしか伝える方法が無いため、入力エリアの前後にでも説明として書いておきましょう。

selectタグで使う場合は実際に実物を見てもらう方がわかりやすいかもしれません。

<select multiple>
<option value="カメックス">カメックス</option>
<optopn value="ラグラージ">ラグラージ</option>
<option value="ボルケニオン">ボルケニオン</option>
</select>

このようなリストを作ると、このように表示されます。

しかしmultipleを省略すると以下のようになります。

<select>
<option value="カメックス>カメックス</option>
<option value="ラグラージ>ラグラージ</option>
<option value="ボルケニオン">ボルケニオン</option>
</select>

この2つの違いは見ての通り、「全て表示」か「一行の選択リストを表示」のどちらかになります。multipleを使った方はShiftキーなどで複数の選択が可能になっていますが、省略した方は一行しか選択できないので常に一つとなります。

multipleはinputタグとselectタグで使う事ができる属性です。使うと複数のファイルアップロードやリストの複数選択などが出来るようになります。