HTML 入門

HTML セレクトボックス

HTML フォームにおいて、<select> と <option> タグはドロップダウンメニュー（ドロップダウンリスト）を作成するために使用されます。

ドロップダウンメニューを使用すると、ユーザーはあらかじめ定義された一連の選択肢の中から項目を選択できます。これは構造化され、かつユーザーフレンドリーなデータ収集方法を提供します。国の選択、商品カテゴリの選定、日付の指定など、ドロップダウンリストは Web 開発において不可欠な要素です。

ユーザーが自由に入力するテキストボックスと比較して、ドロップダウンメニューは選択肢を整理して提示するため、ユーザーの入力ミスを大幅に減らし、全体的なユーザーエクスペリエンス（UX）を向上させることができます。

1. <select> タグの基本理解

<select> タグは、HTML フォーム内でドロップダウンリスト（セレクトボックスとも呼ばれます）を定義するためのコンテナ要素です。これは「パッケージ箱」のような役割を果たし、その中に一つ以上の <option> タグを内包します。これらの <option> タグが、ユーザーに提供される具体的な選択肢を表します。

1.1 基本構文

<select> タグの基本的な構造は以下の通りです。

<select>
  <option value="value1">選択肢 1</option>
  <option value="value2">選択肢 2</option>
  <option value="value3">選択肢 3</option>
</select>
  • <select>: ドロップダウンリストを作成するメインタグです。
  • <option>: リスト内の各項目を表します。value 属性はフォーム送信時に実際にサーバーへ送られるデータを指定し、<option> と </option> の間に挟まれたテキストが、ユーザーがブラウザ上で目にする文字になります。

1.2 <select> タグの主要な属性

<select> タグは、その挙動や外観を制御するための様々な属性（アトリビュート）をサポートしています。

  • name: フォームデータの処理において極めて重要です。ドロップダウンボックスの名前を指定します。フォーム送信時、サーバーはこの名前をキーにして、ユーザーが選択した値を見つけ出します。name 属性がないと、選択されたデータはサーバーに送信されません。
  • id: 一意の識別子を提供します。これにより CSS でスタイルを適用したり、JavaScript で動的な挙動を制御したりすることが可能になります。
  • multiple: この属性を追加すると、ユーザーはリストから複数の項目を選択できるようになります。送信時、選択された値は通常、配列として送信されます。
  • size: デフォルトで表示される選択肢の数を指定します。全選択肢が size の値を超える場合、ブラウザは自動的にスクロールバーを表示します。
  • required: ブール属性（Boolean attribute）であり、フォーム送信前にユーザーが有効な項目を選択することを必須にします。
  • disabled: ブール属性で、ドロップダウンボックス全体を無効化します。ユーザーはクリックしたり操作したりすることができなくなります。

例：シンプルなフルーツ選択ボックス

<label for="fruit">好きなフルーツを選択してください：</label>
<select name="favorite_fruit" id="fruit">
  <option value="apple">リンゴ</option>
  <option value="banana">バナナ</option>
  <option value="orange">オレンジ</option>
  <option value="grape">ブドウ</option>
</select>

この例のポイント：

  • name 属性は "favorite_fruit" に設定されています。フォーム送信時、サーバーは "favorite_fruit" という名前のパラメータを受け取り、その値は（ユーザーの選択に応じて）"apple" や "banana" になります。
  • id は "fruit" に設定され、直前の <label for="fruit"> と紐付けられています。ラベルテキストをクリックするだけでセレクトボックスがアクティブになるため、アクセシビリティが大幅に向上します。

2. <option> タグの詳細

<option> タグは、<select> 要素内の一つ一つの選択肢を表します。各 <option> タグには必ず value 属性を付け、その選択肢が表す具体的なデータをサーバーに明示することが強く推奨されます。

2.1 基本構文

<option value="データ値">ユーザーに表示するテキスト</option>
  • value: フォーム送信時にサーバーへ送られる実際の値を指定します。
  • ユーザーに表示するテキスト: メニューを開いた時にユーザーが目にする文字です。

2.2 <option> タグの主要な属性

  • value: 前述の通り、サーバーへ送信する値を指定します。
  • selected: ブール属性で、ページロード時にデフォルトで選択状態にしておく項目を指定します。通常の <select> 要素では、selected 属性を持てるのは一つの <option> だけです（multiple が有効な場合を除く）。
  • disabled: ブール属性で、特定の選択肢を無効化します。ユーザーはリスト上でその項目を確認できますが（通常はグレーアウトされます）、選択することはできません。

例：デフォルトの選択肢を設定する
ページを開いた時に、デフォルトで「バナナ」が選択されている状態にする場合：

<label for="fruit">好きなフルーツを選択してください：</label>
<select name="favorite_fruit" id="fruit">
  <option value="apple">リンゴ</option>
  <option value="banana" selected>バナナ</option> 
  <option value="orange">オレンジ</option>
  <option value="grape">ブドウ</option>
</select>

例：特定の選択肢を無効化する
「オレンジ」が品切れの場合、その選択を不可にできます：

<label for="fruit">好きなフルーツを選択してください：</label>
<select name="favorite_fruit" id="fruit">
  <option value="apple">リンゴ</option>
  <option value="banana">バナナ</option>
  <option value="orange" disabled>オレンジ（品切れ）</option> 
  <option value="grape">ブドウ</option>
</select>

3. <optgroup> による項目のグループ化

選択肢が非常に多い場合、<optgroup> タグを使用して関連する項目をグループ化することで、メニューの整理整頓と可読性を劇的に向上させることができます。

3.1 基本構文

<select>
  <optgroup label="グループ 1 の名称">
    <option value="value1">選択肢 1</option>
    <option value="value2">選択肢 2</option>
  </optgroup>
  <optgroup label="グループ 2 の名称">
    <option value="value3">選択肢 3</option>
    <option value="value4">選択肢 4</option>
  </optgroup>
</select>
  • <optgroup>: 選択肢のグループを定義します。
  • label: グループの見出し（タイトル）を指定します。このタイトルはリスト内に表示されますが、通常は太字で表示されクリックすることはできません。あくまでカテゴリーを示すヒントとして機能します。

例：フルーツをタイプ別にグループ化する

<label for="fruit">好きなフルーツを選択してください：</label>
<select name="favorite_fruit" id="fruit">
  <optgroup label="柑橘類">
    <option value="orange">オレンジ</option>
    <option value="lemon">レモン</option>
    <option value="grapefruit">グレープフルーツ</option>
  </optgroup>
  <optgroup label="その他のフルーツ">
    <option value="apple">リンゴ</option>
    <option value="banana">バナナ</option>
    <option value="grape">ブドウ</option>
  </optgroup>
</select>

4. 複数選択モードの有効化：Multiple Select Box

<select> タグに multiple 属性を追加するだけで、ユーザーは複数の項目を選択できるようになります。デスクトップ環境では、通常 Ctrl キー（Windows）または Cmd キー（Mac）を押しながらクリックすることで複数選択が可能です。

例：複数のフルーツを選択できるようにする

<label for="fruits">好きなフルーツを選択してください（複数選択可）：</label><br>
<select name="favorite_fruits[]" id="fruits" multiple size="4">
  <option value="apple">リンゴ</option>
  <option value="banana">バナナ</option>
  <option value="orange">オレンジ</option>
  <option value="grape">ブドウ</option>
  <option value="kiwi">キウイ</option>
</select>

この例のポイント：

  • multiple 属性により多重選択が可能になります。
  • size="4" により、選択ボックスが最初から 4 項目分の高さに展開されて表示されます。入り切らない項目はスクロールバーで確認します。
  • (上級者向けヒント) name="favorite_fruits[]" のブラケット [] に注目してください。PHP などの多くのバックエンド言語では、名前に [] を付けることで、サーバーが複数の選択値を「配列」として正しく受け取れるようになります。