HTML <select>タグ
例
次の4つのオプションを使用してドロップダウンリストを作成します。
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
この<select>要素は、ドロップダウンリストを作成するために使用されます。
この<select>要素は、ユーザー入力を収集するために、ほとんどの場合フォームで使用されます。
nameフォームの送信後にフォームデータを参照するには、属性が必要です（属性を省略すると、
nameドロップダウンリストのデータは送信されません）。
idドロップダウンリストをラベルに関連付けるには、この属性が必要です。
要素内の<option>タグ<select>は、ドロップダウンリストで使用可能なオプションを定義します。
ヒント：アクセシビリティのベストプラクティスとして、常に<label>タグを追加してください。
ブラウザのサポート
| Element | |||||
|---|---|---|---|---|---|
| <select> | Yes | Yes | Yes | Yes | Yes |
属性
| Attribute | Value | Description |
|---|---|---|
| autofocus | autofocus | Specifies that the drop-down list should automatically get focus when the page loads |
| disabled | disabled | Specifies that a drop-down list should be disabled |
| form | form_id | Defines which form the drop-down list belongs to |
| multiple | multiple | Specifies that multiple options can be selected at once |
| name | name | Defines a name for the drop-down list |
| required | required | Specifies that the user is required to select a value before submitting the form |
| size | number | Defines the number of visible options in a drop-down list |
グローバル属性
この<select>タグは、HTMLのグローバル属性もサポートしています。
イベント属性
この<select>タグは、HTMLのイベント属性もサポートしています。
その他の例
例
<optgroup>タグで<select>を使用します。
<label for="cars">Choose a car:</label>
<select
name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
関連ページ
HTML DOMリファレンス：オブジェクトを選択
CSSチュートリアル：フォームのスタイリング
デフォルトのCSS設定
なし。