HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<option>
オプション（Option）要素。ドロップダウンリスト（<select>）またはデータリスト（<datalist>）の個々の選択肢を定義します。
info
概要
<option> 要素は、主に親要素である <select>、<optgroup>、または <datalist> 内で使用され、ユーザーが選択できる選択肢（項目）を定義します。
この要素のコンテンツ（開始タグと終了タグの間のテキスト）がユーザーに表示される選択肢のラベルとなり、value 属性に設定された値がフォーム送信時にサーバーへ送られる値になります。
play_circle
デモ (静的表示)
HTML (Source)
<select name="fruits">
<option value="apple">りんご</option>
<option value="orange" selected>オレンジ</option>
<option value="grape" disabled>ぶどう (選択不可)</option>
</select>
Preview (Result)
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| value | フォーム送信時にサーバーへ送られる値。**必須**属性です。この属性がない場合、コンテンツ（表示テキスト）が値として送信されます。 |
| selected | 論理属性。ページが読み込まれた際に、このオプションが初期状態で選択されていることを示します。 |
| disabled | 論理属性。このオプションがユーザーによって選択または操作できないことを示します。フォーム送信時にも含まれません。 |
| label | <option> の短い説明を提供します。<optgroup> 内で <select> に表示される際に使用されます。この属性がある場合、コンテンツのテキストの代わりに表示されます。 |
code
実用例
1. 基本的なドロップダウンリストの項目
<select name="prefecture">
<option value="tokyo">東京都</option>
<option value="osaka" selected>大阪府</option>
<option value="fukuoka">福岡県</option>
</select>
2. 選択不可なオプション（初期選択を促す項目など）
<select name="month">
<option value="" disabled selected>月を選択してください</option>
<option value="1">1月</option>
<option value="2">2月</option>
</select>
3. <optgroup> を使用したグループ化
<select name="os">
<optgroup label="デスクトップOS">
<option value="win">Windows</option>
<option value="mac">macOS</option>
</optgroup>
<optgroup label="モバイルOS">
<option value="ios">iOS</option>
<option value="android">Android</option>
</optgroup>
</select>
lightbulb
知っておくべき重要事項
info
value属性の重要性
<option>要素のコンテンツ（ユーザーに見えるテキスト）と、フォーム送信時にサーバーに送られる値は異なることがあります。value属性を指定しない場合、コンテンツのテキストが値として送信されます。内部処理用の値と表示用のラベルが異なる場合は、必ず value 属性を指定してください。
accessibility_new
アクセシビリティ
<select> 要素には、常に <label> 要素を関連付けるか、aria-label 属性などでラベルを提供し、スクリーンリーダーの利用者が何を選択するリストなのかを理解できるようにする必要があります。