仕様

OPTION要素は、
select要素のオプション、
またはdatalist要素の
候補リストの一部としての
オプションを
表します。

optionオプション (selectable choice)
カテゴリなし
種類通常要素
この要素を
使用できる
状態		select要素, datalist要素, optgroup要素
許可されて
いる内容		label属性があり value属性もある場合は、何もない。
label属性があり value属性はない場合は、テキストのみ。
label属性がない datalist要素の子要素の場合は、テキストのみ。
label属性がない datalist要素の子要素でない場合は、要素間の空白でないテキスト。
属性グローバル属性,
label
ユーザーに表示されるラベル
value
フォーム送信に使用される値
disabled
フォームコントロールが無効になっているかどうか
selected
オプションがデフォルトで選択されているかどうか
text / html
での
タグの省略		開始タグは省略できません。option要素の直後に別のoption要素が続いている場合、またはoptgroup要素が直後にある場合、または親要素にこれ以上コンテンツがない場合は、option要素の終了タグを省略できます。
許可されて
いるARIA		なし[既定値 : option]
DOM
インター
フェイス
HTMLOptionElement
  1. [Exposed=Window]
  2. interface HTMLOptionElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute boolean disabled;
  6. readonly attribute HTMLFormElement? form;
  7. [CEReactions] attribute DOMString label;
  8. [CEReactions] attribute boolean defaultSelected;
  9. attribute boolean selected;
  10. [CEReactions] attribute DOMString value;
  11.  
  12. [CEReactions] attribute DOMString text;
  13. readonly attribute long index;
  14. };
レンダリング
特になし
参加
コンテキスト		インラインフォーマットコンテキスト
確立
コンテキスト		インラインフォーマットコンテキスト
option要素は、select要素のオプション、または datalist要素の候補リストの一部としてのオプションを表します。
  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect">
  3. <option>sel123</option>
  4. <option>sel456</option>
  5. </select>
  6. <datalist id="idaDL01">
  7. <option>dat123</option>
  8. <option>dat456</option>
  9. </datalist>
  10. <input name="nipText" list="idaDL01">
  11. <button name="nbtSender" value="./fmselect.htm">ボタン</button>
  12. <br>受信用の<br>ページへ
  13. </form>

受信用の
ページへ
参照元
  1. HTML Living Standard. 4.10.10 The option element
  2. HTML Living Standard. 4.11 Interactive elements 4.11.3.5 Using the option element to define a command
  3. HTML 5.2 W3C 勧告. 4.10.10 The option element
  4. HTML 4.01 Specification W3C 勧告. 17.6 The SELECT, OPTGROUP, and OPTION elements
  5. MDN Web Docs. HTML <option>:

使用可能な箇所

select要素,
datalist要素,
optgroup要素に
配置できます。

option要素は、select要素, datalist要素, optgroup要素に配置できます。

  1. <select>
  2. <option>abc123</option>
  3. <option>def456</option>
  4. </select>

select要素の子要素として配置できます。

  1. <input name="nipText" list="idaDatalist">
  2. <datalist id="idaDatalist">
  3. <option>abc123</option>
  4. <option>def456</option>
  5. </datalist>

datalist要素の子要素として配置できます。

  1. <select>
  2. <optgroup label="alphabet">
  3. <option>abcdef</option>
  4. <option>ghijkl</option>
  5. </optgroup>
  6. <optgroup label="number">
  7. <option>123456</option>
  8. <option>789012</option>
  9. </optgroup>
  10. </select>

optgroup要素の子要素として配置できます。optgroup要素は、select要素の子要素として配置できます。

配置できるコンテンツ

テキストを
配置できます。

option要素は、label属性があり value属性もある場合は何もない、 label属性があり value属性はない場合はテキストのみ、 label属性がない datalist要素の子要素の場合はテキストのみ、 label属性がない datalist要素の子要素でない場合は要素間の空白でないテキスト を配置できます。

「要素間の空白」とは、空のテキストノードおよびそれらの文字 (ホワイトスペース) のシーケンスのみで構成されるテキストノードです。

  1. <select>
  2. <option label="label11"></option>
  3. <option label="label12" value="value12"></option>
  4. <option>def456</option>
  5. </select>

２行目は、label属性があり value属性はないのでテキストのみです。「要素間の空白」も認められているので、空でも空白でも可能です。 ３行目は、label属性があり value属性もあるので配置できるものは何もないです。表示の値は label属性値で送信の値は value属性値が用いられます。 ４行目は、label属性がない datalist要素の子要素でないので「要素間の空白」でないテキストが配置できます。

  1. <input name="nipText" list="idaDatalist3">
  2. <datalist id="idaDatalist3">
  3. <option label="label11"></option>
  4. <option label="label12" value="value12"></option>
  5. <option>def456</option>
  6. </datalist>

３行目は、label属性があり value属性はないのでテキストのみです。「要素間の空白」も認められているので、空でも空白でも可能です。 ４行目は、label属性があり value属性もあるので配置できるものは何もないです。表示の値は label属性値で送信の値は value属性値が用いられます。 ５行目は、label属性がない datalist要素の子要素なのでテキストのみです。「要素間の空白」も認められているので、空でも空白でも可能です。

属性

label属性

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect">
  3. <option label="label11" value="value11"></option>
  4. <option label="label12"></option>
  5. <option label="label13">def456</option>
  6. </select>
  7. <button name="nbtSender" value="./fmoption.htm">ボタン</button>
  8. <br>受信用の<br>ページへ
  9. </form>

label属性は、要素のラベルを表します。フォームで送信する値は value属性の値であり value属性がない時は option要素の内容です。
この例では、送信データは "value11", ""(空), "def456" が選択されます。


受信用の
ページへ
  1. <form action="./fmreceive.htm">
  2. <input name="nipText" list="idaDatalist4">
  3. <datalist id="idaDatalist4">
  4. <option label="label11" value="value11"></option>
  5. <option label="label12"></option>
  6. <option label="label13">def456</option>
  7. </datalist>
  8. <button name="nbtSender" value="./fmoption.htm">ボタン</button>
  9. <br>受信用の<br>ページへ
  10. </form>

label属性は、要素のラベルを表します。選択される値は value属性の値であり value属性がない時は option要素の内容です。
この例では、value属性がなく option要素の内容が空の label12 は一覧に表示されません。


受信用の
ページへ

value属性

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect">
  3. <option label="label11" value="value11"></option>
  4. <option value="value13">def456</option>
  5. </select>
  6. <button name="nbtSender" value="./fmoption.htm">ボタン</button>
  7. <br>受信用の<br>ページへ
  8. </form>

value属性は、要素の値を表します。フォームで送信する値は value属性の値であり value属性がない時は option要素の内容です。
label属性がない datalist要素の子要素でない option要素は、内容を空にはできません。
この例では、送信データは "value11", "value13" が選択されます。


受信用の
ページへ
  1. <form action="./fmreceive.htm">
  2. <input name="nipText" list="idaDatalist5">
  3. <datalist id="idaDatalist5">
  4. <option label="label11" value="value11"></option>
  5. <option value="value12"></option>
  6. <option value="value13">def456</option>
  7. </datalist>
  8. <button name="nbtSender" value="./fmoption.htm">ボタン</button>
  9. <br>受信用の<br>ページへ
  10. </form>

value属性は、要素の値を表します。選択される値は value属性の値であり value属性がない時は option要素の内容です。


受信用の
ページへ

disabled属性

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect">
  3. <option>abc123</option>
  4. <option disabled>def456</option>
  5. <option>ghi789</option>
  6. </select>
  7. <button name="nbtSender" value="./fmoption.htm">ボタン</button>
  8. <br>受信用の<br>ページへ
  9. </form>

disabled属性は、ユーザーがそのコントロールを利用できないことを示す論理属性です。


受信用の
ページへ
  1. <form action="./fmreceive.htm">
  2. <input name="nipText" list="idaDatalist6">
  3. <datalist id="idaDatalist6">
  4. <option>abc123</option>
  5. <option disabled>def456</option>
  6. <option>ghi789</option>
  7. </datalist>
  8. <button name="nbtSender" value="./fmoption.htm">ボタン</button>
  9. <br>受信用の<br>ページへ
  10. </form>

disabled属性は、ユーザーがそのコントロールを利用できないことを示す論理属性です。


受信用の
ページへ

selected属性

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect">
  3. <option>abc123</option>
  4. <option selected>def456</option>
  5. <option>ghi789</option>
  6. </select>
  7. <button name="nbtSender" value="./fmoption.htm">ボタン</button>
  8. <br>受信用の<br>ページへ
  9. </form>

selected属性は、要素のデフォルトの選択性を表す論理属性です。


受信用の
ページへ
  1. <form action="./fmreceive.htm">
  2. <input name="nipText" list="idaDatalist7">
  3. <datalist id="idaDatalist7">
  4. <option>abc123</option>
  5. <option selected>def456</option>
  6. <option>ghi789</option>
  7. </datalist>
  8. <button name="nbtSender" value="./fmoption.htm">ボタン</button>
  9. <br>受信用の<br>ページへ
  10. </form>

selected属性は、要素のデフォルトの選択性を表す論理属性です。


受信用の
ページへ

気を付ける点

親の要素

select要素, datalist要素のどちらの子要素として配置するかによって、属性など振る舞いが異なります。