<option>要素

Technical Summary

Definition / Categories

項目	仕様上の整理
意味	selectの選択肢、またはdatalistの入力候補
Categories	なし
Context	select、datalist、またはoptgroupの子孫
Content model	labelとvalueの有無、datalist内かどうかで異なる。テキスト、または制限付きのphrasing content / div
Tag omission	次のoption、optgroup、hrの直前、または親に後続内容がない場合は終了タグを省略できる。ただし通常の記述では省略しない

labelとvalueの両方を指定したoptionは子を持たないモデルになります。labelを指定せずdatalistの外で使う場合はphrasing contentやdivを含められますが、interactive content、子孫のdatalist・object、tabindexを持つ子孫は置けません。labelがありvalueがない場合、およびdatalist内では、content modelはtextです。

Labelとvalue

仕様上、optionのラベルは、空でないlabel属性があればその値、なければtext IDL属性の値です。値はvalue属性があればその値、なければoption textを収集した結果です。

情報	解決規則	実装上の確認点
UI label	空でないlabel属性、なければoption.text	表示・選択UIのラベルと、送信値を混同しない
Option value	value属性、なければ収集したoption text	表示文の変更が値の変更になる可能性があるため、送信値は明示する
Option text	子孫のテキストを集め、ASCII空白を除去・折りたたむ。script要素は除外	textContentとoption.textは同じ結果とは限らない

<select name="format">
  <option value="html">HTML</option>
  <option value="markdown" label="Markdown"></option>
</select>

実務上は、通常の表示名を子テキストに書き、処理で使う値をvalueに明示する形が読みやすく追跡しやすい設計です。label属性を使う特殊な形では、content modelと表示上のラベルの解決を別に確認します。

リッチなoption内容とselectedcontent

select内のoptionは、content modelが許す場合に画像やphrasing要素などの構造化された内容を持てます。single-selectの先頭button内にあるselectedcontentは、選択中optionの子ノード構造を複製して表示します。optionのlabel属性の文字列は複製しません。そのためlabel解決規則と、選択buttonに表示される子要素構造は関連しますが、同じものではありません。

<select name="language">
  <button type="button">
    <selectedcontent></selectedcontent>
  </button>
  <optgroup>
    <legend>標準仕様</legend>
    <option value="html"><span>HTML Standard</span></option>
    <option value="css"><img src="css.svg" alt=""><span>CSS UI</span></option>
  </optgroup>
</select>

場合	content model / 更新規則	確認する点
labelなしでdatalist外のselect option	phrasing contentまたはdivを含められる。interactive contentとtabindexを持つ子孫は禁止	構造化した内容を含めても、option自体はinteractive widgetではない
option label="…" value="…"	content modelは空	子markupが選択buttonへ表示されるとは限らない
有効なselectedcontentを持つsingle-select	選択中optionの子ノードを複製する。optionのlabel属性は複製しない	選択変更後に複製されたmarkupを確認する
multiple selectまたはdatalist内のoption	multiple selectではselectedcontent更新アルゴリズムは使われない。datalist内のoptionはtext-only	customizable selectのmarkupをdatalist候補に一般化しない

選択されたoptionのvalueはフォーム値として保たれ、子markupは表示内容です。リッチなoption内容に対するブラウザーや支援技術の扱いは実装ごとの確認事項であり、ここでは仕様から推定しません。

Selectednessと初期状態

selected属性は、optionのdefault selectednessを表すboolean属性です。これに対してselectednessは現在の選択状態です。ユーザー操作やoption.selectedの設定で現在状態が変わっても、HTML属性が自動的に同じ意味へ書き換わるわけではありません。

概念	意味	DOMでの対応
selected属性	HTMLに記録された初期選択の指定	option.hasAttribute('selected')
default selectedness	初期状態・リセット時の基準となる選択状態	option.defaultSelected
selectedness	現在そのoptionが選択されているかという状態	option.selected
dirtiness	ユーザー操作やIDL設定後に、selected属性の変更が現在状態へ影響するかを分ける状態	直接の公開IDL属性ではない

<select id="format">
  <option id="html" value="html">HTML</option>
  <option id="md" value="markdown" selected>Markdown</option>
</select>

const option = document.querySelector('#md');
option.defaultSelected; // true
option.selected;        // 現在のselectedness
option.selected = false; // 現在状態を変更し、dirtinessを設定

multipleのないselectでは、選択状態をtrueにする処理に伴い、同じoption listの他のoptionがfalseになります。単一選択の初期化、ユーザー操作、DOM操作、リセットを比較するときは、属性と状態を分けて記録します。

Disabledとoptgroup

optionは、自身にdisabled属性がある場合、または無効なoptgroupの中にある場合にdisabledです。disabledはユーザー操作による選択を止めますが、JavaScriptによるselectednessの変更まで一律に禁止する状態ではありません。

<select name="plan">
  <option value="basic">ベーシック</option>
  <optgroup label="提供終了" disabled>
    <option value="legacy">旧プラン</option>
  </optgroup>
  <option value="pro">プロ</option>
</select>

optgroupのdisabledは、そのグループ内のoptionに影響します。グループ自体は選択対象ではなく、選択されるのはoptionです。

Form submissionとform owner

optionはlisted / submittableなフォームコントロールではありません。フォーム送信のentry listを作る主体は親のselectであり、選択されたoptionの値がselectの名前と組み合わされて送信対象になります。

HTMLOptionElement.formは、option自身がform-associatedだからではなく、最近接のselectのform ownerを返します。select内にないoptionや、datalist内のoptionではnullになります。

構造	option.form	フォームでの意味
form > select > option	祖先form	選択されたoptionの値はselectのentry listに関係する
form外のselectにform属性	selectのform owner	同一document内でselectが関連付けられたformに従う
datalist > option	null	候補自体ではなく、関連するinputの値が送信対象になる

DOM Interface

option要素はHTMLOptionElementとして公開されます。selectedとdefaultSelected、表示用のtextと送信用のvalueを目的に応じて使い分けます。

const option = document.querySelector('option');

option.disabled;
option.form;
option.label;
option.defaultSelected;
option.selected;
option.value;
option.text;
option.index;

const created = new Option('Pro', 'pro', true, false);

API	概要
disabled	自身のdisabled属性を反映するboolean。実効的な無効状態は、無効なoptgroupの影響も受ける
label	label属性を反映する文字列。未指定時はoptionのlabel解決結果
defaultSelected	selected属性を反映するboolean
selected	現在のselectednessを読み書きするboolean。設定時はdirtinessにも関係する
value	optionの値。value属性がなければoption textから得られる
text	空白を整理したoption text。設定すると子の内容を置き換える
index / form	option list内のindex、および最近接selectのform owner
new Option()	text、value、defaultSelected、selectedの順でoptionを作るlegacy factory function

new Option('Pro', 'pro', true)のように3引数以下で呼ぶ場合、selected属性が設定されても初期selectednessはtrueになりません。4番目の引数で初期selectednessを明示できます。

Fact / Evidence（主張 / 根拠）

仕様上の定義、状態、フォームとの関係を、主張・条件・状態・根拠位置に分けて記録します。ブラウザー実装とアクセシビリティツリーの観測は、下のImplementation Evidenceに分離しています。

Evidence

1. HTML Standard: The option element — context、content model、属性、selectedness、label、value、DOM interface
2. HTML Standard: The select element — option list、single / multipleの選択モデル、リセット、フォーム送信との関係
3. HTML Standard: The datalist element — optionを入力候補として使う場合の関係
4. HTML Standard: The selectedcontent element — 選択中optionの子ノード複製、更新規則、multiple selectとの境界
5. HTML Accessibility API Mappings — option role、selected state、disabled stateのアクセシビリティAPI境界
6. Web Platform Tests: select element — option、selectedness、selectの動作を検証するテスト群の入口

Implementation Evidence

仕様上の主張とは別に、ブラウザー実装・WPT・アクセシビリティ観測を記録します。今回のページ作成時点では、未実施の項目を確認済みとは扱いません。

共通fixture / 記録: fixture ID forms-core-v1で、initial selectedness、selectedness変更とreset、label / value / text、disabled optionとdisabled optgroup、select経由のFormData、datalist内option、HTMLOptionElement APIを確認しました。Chrome 152.0.0.0 / Windows 10 / 確認日 2026-09-15。14項目中14項目がpassです。

今回のIMPLはChrome 1環境のDOM・フォームAPI実測です。WPTの実行結果とAAMの観測結果が揃うまでは、ブラウザー間共通の実装結果として登録しません。

Coverage / Open Issues

• 確認済みoptionの意味、Categories、使用コンテキスト、content model、主要属性
• 確認済みlabel / valueの解決、selected属性とselectedness、disabled optionとdisabled optgroupの仕様上の境界
• 確認済みHTMLOptionElementの主要IDL、selectのフォーム送信との関係、datalist内optionの位置付け
• 未完了Chrome 1環境以外でのselectedness初期化、属性変更、option list更新、disabled option、FormDataの比較
• 未完了WPTの個別テスト実行結果、HTML-AAM全mapping、datalist候補の展開状態、支援技術ごとの観測
• 仕様確認済みリッチなoption内容、selectedcontentによる子ノード複製とlabel属性との違い、single-selectの条件、datalistのtext-only model
• 未完了customizable option contentの個別WPT、リッチな選択肢のアクセシビリティ公開、ブラウザー別の挙動、歴史的変更と互換性

このページは初期Coverageです。確認済みの範囲を示すものであり、すべてのブラウザーで同じ表示・操作・アクセシビリティAPI結果になること、またはoption要素全体の検証が完了したことを主張しません。

Related surface

初心者向けの選択肢の作り方、表示名と送信値、selected / disabledの使い方はYugienのoption要素ページを参照してください。選択モデル全体はAtlasのselect要素、フォーム送信の共通処理はAtlasのform要素、ラベルとの関係はAtlasのlabel要素でも確認できます。