HTML <select> タグ

定義と使用方法

<select> 要素はドロップダウンリストを作成するために使用されます。

<select> 要素は最もよくフォーム内で使用され、ユーザーの入力を収集するために使用されます。

フォームを提出後、name属性を使用してフォームデータを参照する必要があります（name属性を省略すると、ドロップダウンリストのデータは提出されません）。

<select> 要素内の <option>タグ ドロップダウンリスト内の利用可能なオプションを定義します。

ドロップダウンリストとラベル（label）を関連付けるためにid属性を使用する必要があります。

ヒント：常に追加してください <label>タグ 最適なアクセス性の実践を得るために！

参照もしてください：

HTML DOM リファレンスマニュアル：Select オブジェクト

CSS 教程：フォームのスタイルを設定します

インスタンス

例 2

4つのオプションを持つドロップダウンリストを作成する：

<label for="cars">自動車ブランドを選んでください：</label>
<select name="cars" id="cars">
  <option value="audi">アウディ</option>
  <option value="byd">ビダン</option>
  <option value="geely">ジリ</option>
  <option value="volvo">ボルボ</option>
</select>

実際に試してみてください

例 1

例 2 <select> <optgroup>タグと一緒に使用する：

<label for="cars">自動車ブランドを選んでください：</label>
<select name="cars" id="cars">
  <optgroup label="中国車">
    <option value="byd">ビダン</option>
    <option value="geely">ジリ</option>
  </optgroup>
  <optgroup label="ドイツ車">
    <option value="mercedes">メルセデス・ベンツ</option>
    <option value="audi">アウディ</option>
  </optgroup>
</select>

実際に試してみてください

属性

属性 値 説明
autofocus autofocus ドロップダウンリストがページ読み込み時に自動的にフォーカスを獲得するように設定する必要があります。
disabled disabled ドロップダウンリストを無効にする必要があります。
form フォーム id ドロップダウンリストが属するフォームを定義します。
multiple multiple 複数のオプションを選択することができます。
name 名前 ドロップダウンリストの名前を定義します。
required required フォームを送信する前にユーザーが値を選択する必要があることを指定します。
size 数字 ドロップダウンリストに表示されるオプションの数を定義します。

グローバル属性

<select> タグは以下のサポートも行います HTMLでのグローバル属性。

イベント属性

<select> タグは以下のサポートも行います HTMLでのイベント属性。

デフォルトの CSS 設定

なし。

ブラウザのサポート

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
サポート サポート サポート サポート サポート