HTMLのセレクトボックス（プルダウン）の使い方を完全ガイド！selectとoptionの基本を覚えよう
新人
「HTMLでプルダウンメニューみたいな選択肢を作ることってできますか？」
先輩
「うん、それはselectタグとoptionタグを使えば簡単に作れるよ。ユーザーに選んでもらうようなときによく使うんだ。」
新人
「例えば、都道府県の一覧を表示して選んでもらうとかですか？」
先輩
「そうそう！それじゃあ、HTMLのセレクトボックスの作り方を詳しく説明していくね。」
1. HTMLのselect要素とは
select要素は、ユーザーに選択肢を表示するためのHTMLタグです。ドロップダウン形式のセレクトボックス（プルダウンメニュー）を作るときに使います。中には複数のoption要素を含めることで、選択肢を増やすことができます。
基本的なselectの使い方は以下のとおりです。
<form>
<select name="fruit">
<option value="apple">りんご</option>
<option value="banana">バナナ</option>
<option value="orange">オレンジ</option>
</select>
</form>
2. option要素とは
option要素は、select要素の中で1つ1つの選択肢を表すタグです。ユーザーに表示するテキストはタグの中に書き、実際に送信される値はvalue属性で指定します。
例えば、上の例で「りんご」が選ばれた場合、送信される値は「apple」になります。フォームからデータを受け取るプログラムではこのvalueが使われます。
3. 初期値を設定する方法
ユーザーが最初に見るときに、あらかじめ選択されている項目を指定したいときは、option要素にselected属性をつけます。
<form>
<select name="color">
<option value="red" selected>赤</option>
<option value="blue">青</option>
<option value="green">緑</option>
</select>
</form>
このようにselectedをつけることで、最初に表示される選択肢を指定できます。
4. セレクトボックスを使った実践的なフォーム
都道府県を選ぶセレクトボックスを使った実践的な例を見てみましょう。
<form action="/submit" method="post">
<label for="pref">都道府県を選んでください：</label>
<select name="prefecture" id="pref">
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
<option value="kyoto">京都府</option>
</select>
<input type="submit" value="送信">
</form>
labelタグを使ってセレクトボックスとラベルを関連付けると、よりアクセシビリティが高くなります。初心者の方でもHTMLフォームが扱いやすくなります。
5. セレクトボックスにグループを作るoptgroup要素
optgroup要素を使うと、選択肢をカテゴリで分けることができます。例えば、東日本と西日本で都道府県を分けて表示することが可能です。
<form>
<select name="prefecture">
<optgroup label="東日本">
<option value="hokkaido">北海道</option>
<option value="tokyo">東京</option>
</optgroup>
<optgroup label="西日本">
<option value="osaka">大阪</option>
<option value="fukuoka">福岡</option>
</optgroup>
</select>
</form>
optgroupを使うことで、選択肢のまとまりがわかりやすくなり、ユーザーにとって選びやすいセレクトボックスになります。
6. 複数選択できるセレクトボックス
select要素にmultiple属性をつけると、複数の項目を同時に選択できるようになります。Ctrlキー（MacではCommandキー）を使って複数選択ができます。
<form>
<select name="languages" multiple size="4">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
<option value="python">Python</option>
</select>
</form>
複数選択するフォームはアンケートなどでよく使われます。ただし、スマホなどでは操作しづらいため注意が必要です。
