HTML Living Standard/option

OPTION要素

<option>要素は、<select>要素や<datalist>要素とともに使用され、選択可能な項目を定義します。ユーザーが選択リストや候補リストから選択できる選択肢を提供するための基本的な構成要素です。

定義

• <option>要素は、選択肢を表現するために使用されます。
• 通常、<select>や<datalist>の子要素として配置されます。

使用方法

以下は、<option>要素の基本的な例です。

<select>との組み合わせ

<label for="fruits">好きな果物を選んでください:</label>
<select id="fruits" name="fruit">
  <option value="apple">りんご</option>
  <option value="banana">バナナ</option>
  <option value="orange">オレンジ</option>
  <option value="grape">ぶどう</option>
</select>

<datalist>との組み合わせ

<label for="cars">車種を入力してください:</label>
<input type="text" id="cars" name="car" list="car-list">
<datalist id="car-list">
  <option value="Toyota">
  <option value="Honda">
  <option value="Nissan">
  <option value="Mazda">
</datalist>

属性

以下は、<option>要素で使用される主要な属性です。

value

• 項目の値を指定します。
• ユーザーが選択した場合、この値がフォーム送信時に使用されます。

<option value="apple">りんご</option>

selected

• 項目をデフォルトで選択状態にする場合に使用します。
• 複数選択が許可されている場合（<select multiple>）、複数のselected属性を使用できます。

<option value="orange" selected>オレンジ</option>

disabled

• 選択できない状態にする場合に使用します。
• 非アクティブ化された項目はユーザーが選択できなくなります。

<option value="grape" disabled>ぶどう</option>

label

• 項目のラベルを指定します。<option>要素内のテキストに代わるものとして表示されます。

<option value="watermelon" label="スイカ">スイカ</option>

使用例

デフォルト選択

<select name="gender">
  <option value="male" selected>男性</option>
  <option value="female">女性</option>
  <option value="other">その他</option>
</select>

複数選択

<select name="colors" multiple>
  <option value="red" selected>赤</option>
  <option value="blue">青</option>
  <option value="green" selected>緑</option>
  <option value="yellow">黄</option>
</select>

注意事項

1. <option>要素はvalue属性を持たない場合、要素内のテキストが送信時の値として使用されます。
2. disabled属性を使用すると、その項目は非選択状態になりますが、スタイリングはブラウザに依存します。
3. selected属性は複数の<option>要素に設定可能ですが、単一選択のリストでは最後のselected属性が優先されます。

スタイリング

• <option>要素のスタイリングには制限がありますが、<select>要素や親要素を使用して間接的にスタイルを調整できます。
• 多くのブラウザで、デフォルトの表示は変更できません。

利用シーン

• ドロップダウンメニュー
• フォームの候補選択リスト
• ユーザーの選択肢を限定したい場合

関連項目

• HTML Living Standard/select
• HTML Living Standard/datalist
• HTML Living Standard/form

関連仕様

• HTML Living Standard - option
• MDN Web Docs - option