【HTML Living Standard】multiple属性の使い方
multiple属性の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
multipleプロパティは、HTMLの特定のフォーム要素において、ユーザーが複数の選択肢を一度に選べるようにする機能の状態を保持するプロパティです。このプロパティは、主に<input type="file">要素と<select>要素に適用されるブーリアン属性として機能します。
<input type="file">要素にmultiple属性を付与すると、ユーザーはファイル選択ダイアログから複数のファイルを同時に選択し、アップロードできるようになります。これにより、個別のファイルを選択する手間を省き、一度に多くのファイルを処理する必要がある場合に非常に効率的です。
同様に、<select>要素にmultiple属性を付与すると、ユーザーはドロップダウンリストの中から、Ctrlキー（Windows/Linux）やCommandキー（macOS）を押しながらクリックすることで、複数のオプションを自由に選択できるようになります。この機能は、アンケートフォームや設定画面などで、複数の項目を一度に選択する必要がある場合に特に有用です。
このプロパティはブーリアン属性であるため、属性が存在するだけで機能が有効になります。例えば、<input type="file" multiple>や<select multiple>のように記述します。値の指定は必須ではありませんが、XHTML互換性のため<select multiple="multiple">のように記述することも可能です。multipleプロパティを利用することで、ユーザーエクスペリエンスを向上させ、より柔軟なデータ入力を実現できます。
構文(syntax)
1<input type="file" multiple>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTML multiple属性で複数ファイル選択する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>複数ファイル選択のサンプル</title> 7</head> 8<body> 9 <h1>ファイルの複数選択</h1> 10 <form action="#" method="post" enctype="multipart/form-data"> 11 <label for="myFiles">複数のファイルを選択してください:</label> 12 <!-- 13 'multiple'属性は、ユーザーがフォーム送信のために複数のファイルを選択できることを指定します。 14 この属性が'input type="file"'要素に存在する場合、ファイル選択ダイアログで 15 複数のファイルを選択できるようになります（通常はCtrl/Cmdキーを押しながら選択）。 16 この属性がない場合、ユーザーは一度に1つのファイルしか選択できません。 17 --> 18 <input type="file" id="myFiles" name="myFiles[]" multiple> 19 <br><br> 20 <button type="submit">送信</button> 21 </form> 22</body> 23</html>
multiple属性は、HTMLのフォーム要素である<input type="file">に対して使用される属性です。この属性の主な役割は、ユーザーがウェブフォームを通じてファイルをアップロードする際に、複数のファイルを選択できるようにすることです。
具体的には、<input type="file" multiple>のようにこの属性を記述すると、ファイル選択ダイアログが表示された際に、ユーザーは通常Ctrlキー（macOSではCmdキー）を押しながら複数のファイルを選択し、一度にアップロードできるようになります。もしこのmultiple属性が指定されていない場合、ユーザーは一度に一つのファイルしか選択することができません。
この属性は、引数や戻り値を持ちません。multiple属性は「真偽値属性」と呼ばれるタイプで、属性が存在すること自体が機能を有効にするシグナルとなります。そのため、属性値として何かを指定する必要はなく、単に属性名を記述するだけで機能が動作します。
提供されたサンプルコードでは、<input type="file" id="myFiles" name="myFiles[]" multiple>と記述されているため、このファイル入力欄ではユーザーが複数のファイルを同時に選択し、フォームを送信できるようになっています。これにより、写真のアルバムアップロードなど、多くのファイルを一度に扱うウェブアプリケーションで役立ちます。
multiple属性は、input type="file"要素に指定することで、ユーザーがファイル選択ダイアログから複数のファイルを選択できるようになります。この属性がない場合、一度に一つのファイルしか選択できません。複数のファイルを受け取るには、input要素のname属性をname="myFiles[]"のように配列形式で指定することが重要です。また、ファイルをアップロードするフォームには、必ずenctype="multipart/form-data"属性を設定してください。これにより、ブラウザがファイルを正しく送信できるようになります。選択されたファイルの数や種類、サイズを制限したい場合は、JavaScriptやサーバーサイドでの追加の検証処理が必要となります。ブラウザやOS環境によっては、複数選択の操作方法が異なる場合がありますのでご注意ください。
HTML: multiple属性で複数選択セレクトボックスを実装する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>複数選択可能なセレクトボックスの例</title> 7</head> 8<body> 9 <h1>複数選択可能なセレクトボックス</h1> 10 11 <form action="#" method="post"> 12 <label for="fruits">好きな果物を選んでください（複数選択可能）:</label><br> 13 <!-- 14 multiple属性は、ユーザーがリストから複数の選択肢を選択できるようにします。 15 通常、Ctrlキー（MacではCmdキー）を押しながらクリックすることで複数選択が可能です。 16 size属性は、表示される選択肢の数を指定し、複数選択時に便利です。 17 --> 18 <select id="fruits" name="fruits" multiple size="5"> 19 <option value="apple">りんご</option> 20 <option value="banana">バナナ</option> 21 <option value="orange">オレンジ</option> 22 <option value="grape">ぶどう</option> 23 <option value="melon">メロン</option> 24 <option value="strawberry">いちご</option> 25 </select> 26 <br><br> 27 <button type="submit">選択を送信</button> 28 </form> 29</body> 30</html>
multiple属性は、HTMLの<select>要素（セレクトボックス）に対して使用される属性です。この属性を指定することで、ユーザーがリストの中から複数の項目を同時に選択できるようになります。
通常、ユーザーはキーボードのCtrlキー（macOSの場合はCommandキー）を押しながら、マウスで複数の項目をクリックすることで、選択肢を一つずつ追加または解除できます。この属性はブール値属性であり、その属性が存在するだけで機能が有効になります。そのため、具体的な引数を取ることはなく、特定の値を戻すこともありません。ブラウザはmultiple属性の存在を認識し、それに合わせてユーザーインターフェースの挙動を変更します。
サンプルコードでは、<select id="fruits" name="fruits" multiple size="5">のようにmultiple属性が記述されています。これにより、「好きな果物を選んでください」というセレクトボックスで、りんご、バナナ、オレンジなど、複数の果物を同時に選択することが可能です。また、size属性を併用することで、一度に表示される選択肢の数を指定し、複数選択時の操作性を向上させています。この機能は、フォームでユーザーに複数の項目を選ばせたい場合に非常に有用です。
multiple属性は、select要素に指定することで、ユーザーがリストから複数の選択肢を選べるようにする属性です。利用者は、通常Ctrlキー（MacではCmdキー）を押しながらクリックすることで、複数の項目を選択できます。この操作方法はユーザーに伝える必要があります。multiple属性を使う際は、同時にsize属性で表示する選択肢の数を指定すると良いでしょう。これによりセレクトボックスがリスト形式で表示され、複数選択が可能であることが直感的に分かりやすくなり、操作性も向上します。size属性がない場合、通常のドロップダウン形式になり、複数選択がしにくい点に注意が必要です。また、フォーム送信時には複数の値がサーバーへ送られるため、サーバー側の処理で適切に受け取れるよう考慮してください。