HTML <option> タグ

定義と使用法

<option> タグが選択リスト内のオプションを定義します。

<option> 要素は <select>、<optgroup> または <datalist> 要素内で使用します。

注意：<option> タグは属性なしで使用できますが、通常 value 属性が必要で、フォームの送信時にサーバーに送信される内容を示します。

ヒント：長いオプションリストがある場合、 <optgroup> タグ内で関連オプションをグループ化します。

も参照してください：

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

インスタンス

例 1

4つのオプションを含むドロップダウンリスト：

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

自分で試してみる

例 2

在 <datalist> 要素中使用 <option>：

<label for="browser">リストからあなたのブラウザを選んでください：</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Edge">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

自分で試してみる

例 3

在 <optgroup> 要素中使用 <option>：

<label for="cars">自動車ブランドを選んでください：</label>
<select 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>

自分で試してみる

属性

属性 値 説明
disabled disabled オプションを無効にする。
label テキスト オプションの短いラベルを指定します。
selected selected ページが読み込まれたときに選択されるオプションを指定します。
value テキスト サーバーに送信する値を指定します。

グローバル属性

<option> タグは以下をサポートしています HTML 中のグローバル属性。

イベント属性

<option> タグは以下をサポートしています HTML 中のイベント属性。

デフォルトの CSS 設定

無。

ブラウザのサポート

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