MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/d6d7ff2e2f9c

ウェブフォームにおいて HTML <option> 要素は、<select> 要素、<optgroup> 要素、<datalist> 要素内で項目を定義します。したがって、<option> は HTML ドキュメントでポップアップメニューのメニュー項目や、その他の項目の一覧を表すことができます。

コンテンツカテゴリー なし
許可された内容 エスケープされた文字 (例えば &eacute;) を含むテキスト
タグの省略 開始タグは必須。直後に別の <option> 要素または <optgroup> 要素がある場合、または親要素が他に内容を持たない場合は終了タグを省略可能。
許可された親要素 <select> 要素、<optgroup> 要素、<menu> 要素。
許可された ARIA ロール なし
DOM インターフェイス HTMLOptionElement

属性

この要素は グローバル属性 を持ちます。

disabled
この論理属性を設定すると、選択肢が選択不能になります。多くのブラウザーはそのようなコントロールをグレーアウトで表示し、マウスクリックやフォーカスなど、いかなるイベントも受け付けなくなります。この属性を設定していなくても、祖先のいずれかが disable 状態の <optgroup> 要素である場合は無効化されます。
label
この属性は、選択肢の意味を示すラベルテキストです。label 属性を定義していない場合は、要素のテキストコンテンツが要素の値になります。
selected
この論理属性を設定すると、その選択肢が初期状態で選択されます。<option> 要素が multiple を設定していない <select> 要素の子孫である場合、<select> 要素内で 1 個の <option> だけが selected 属性を持てます。
value
この属性の内容物は、フォームで送信する値を表します。値を送信するには、選択肢を選択しなければなりません。この属性を省略すると、option 要素のテキストコンテンツが値になります。

<select> 要素の例をご覧ください。

仕様

仕様書 策定状況 コメント
HTML Living Standard
<option> の定義
現行の標準  
HTML5
<option> の定義
勧告  
HTML 4.01 Specification
<option> の定義
勧告 最初の定義

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート1 (有り)1 (有り) (有り) (有り)
disabled1 (有り)1 (有り) (有り) (有り)
label1 (有り)11 2 3 (有り) (有り) (有り)
selected1 (有り)1 (有り) (有り) (有り)
value1 (有り)1 (有り) (有り) (有り)
機能AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基本サポート (有り) (有り) (有り)1 (有り) (有り) (有り)
disabled (有り) (有り) (有り)1 (有り) (有り) (有り)
label (有り) (有り) (有り)11 (有り) (有り) (有り)
selected (有り) (有り) (有り)1 (有り) (有り) (有り)
value (有り) (有り) (有り)1 (有り) (有り) (有り)

1. Firefox doesn't display the value of the label attribute as option text if element's content is empty. See bug 40545.

2. Historically, Firefox has allowed keyboard and mouse events to bubble up from the <option> element to the parent <select> element, although this behavior is inconsistent across many browsers. For better Web compatibility (and for technical reasons), when Firefox is in multi-process mode and the <select> element is displayed as a drop-down list. The behavior is unchanged if the <select> is presented inline and it has either the multiple attribute defined or a size attribute set to more than 1. Rather than watching <option> elements for events, you should watch for change events on <select>. See bug 1090602 for details.

3. When Mozilla introduced dedicated content threads to Firefox (through the Electrolysis, or e10s, project), support for styling <option> elements was removed temporarily. Starting in Firefox 54, you can apply foreground and background colors to <option> elements again, using the color and background-color CSS properties. See bug 910022 for more information. Note that this is still disabled in Linux due to lack of contrast (see bug 1338283 for progress on this).

関連情報

ドキュメントのタグと貢献者

 このページの貢献者: yyss
 最終更新者: yyss,