option要素 - select要素内のオプション、または datalist要素内の提案リストの一部としてのオプションを表す option要素に関してのメモ書きです。 - (The option element.)

1.仕様

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

option

選択可能な選択肢 (selectable choice)

種類

通常要素

カテゴリ

なし

使用できるコンテキスト

select要素
datalist要素
optgroup要素

コンテンツモデル

テキスト

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

テキストに分類される要素は、です。

要素に label属性と value属性がある場合は、Nothing

要素に label属性はあるが value属性がない場合は、テキスト

要素に label属性がなく、datalist要素の子ではない場合は、要素間の空白ではないテキスト

要素に label属性がなく、datalist要素の子の場合は、テキスト

タグの省略

終了タグは省略できます。

option要素の直後に別のoption要素が続く場合、その直後に optgroup要素が続く場合、直後に hr要素が続く場合、または親要素にそれ以上のコンテンツがない場合、option要素の終了タグは省略できます。

コンテンツ属性

グローバル属性他

disabled属性: フォームコントロールが無効かどうか
label属性: ユーザーに見えるラベル
selected属性: オプションがデフォルトで選択されているかどうか
value属性: フォーム送信に使用される値

DOM インターフェイス

HTMLOptionElement

[Exposed=Window, LegacyFactoryFunction=Option(optional DOMString text = "", optional DOMString value, optional boolean defaultSelected = false, optional boolean selected = false)]
interface HTMLOptionElement : HTMLElement {
[HTMLConstructor] constructor();
[CEReactions] attribute boolean disabled;
readonly attribute HTMLFormElement? form;
[CEReactions] attribute DOMString label;
[CEReactions] attribute boolean defaultSelected;
attribute boolean selected;
[CEReactions] attribute DOMString value;
[CEReactions] attribute DOMString text;
readonly attribute long index;
};

HTMLElement

[Exposed=Window]
interface HTMLElement : Element {
[HTMLConstructor] constructor();
// metadata attributes
[CEReactions] attribute DOMString title;
[CEReactions] attribute DOMString lang;
[CEReactions] attribute boolean translate;
[CEReactions] attribute DOMString dir;
// user interaction
[CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
[CEReactions] attribute DOMString inert;
undefined click();
[CEReactions] attribute DOMString accessKey;
readonly attribute DOMString accessKeyLabel;
[CEReactions] attribute boolean draggable;
[CEReactions] attribute boolean spellcheck;
[CEReactions] attribute DOMString writingSuggestions;
[CEReactions] attribute DOMString autocapitalize;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
[CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
ElementInternals attachInternals();
// The popover API
undefined showPopover();
undefined hidePopover();
boolean togglePopover(optional boolean force);
[CEReactions] attribute DOMString? popover;
};
HTMLElement includes GlobalEventHandlers;
HTMLElement includes ElementContentEditable;
HTMLElement includes HTMLOrSVGElement;

Element

[Exposed=Window]
interface Element : Node {
readonly attribute DOMString? namespaceURI;
readonly attribute DOMString? prefix;
readonly attribute DOMString localName;
readonly attribute DOMString tagName;
[CEReactions] attribute DOMString id;
[CEReactions] attribute DOMString className;
[SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
[CEReactions, Unscopable] attribute DOMString slot;
boolean hasAttributes();
[SameObject] readonly attribute NamedNodeMap attributes;
sequence<DOMString> getAttributeNames();
DOMString? getAttribute(DOMString qualifiedName);
DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
[CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
[CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
[CEReactions] undefined removeAttribute(DOMString qualifiedName);
[CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
[CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
boolean hasAttribute(DOMString qualifiedName);
boolean hasAttributeNS(DOMString? namespace, DOMString localName);
Attr? getAttributeNode(DOMString qualifiedName);
Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
[CEReactions] Attr? setAttributeNode(Attr attr);
[CEReactions] Attr? setAttributeNodeNS(Attr attr);
[CEReactions] Attr removeAttributeNode(Attr attr);
ShadowRoot attachShadow(ShadowRootInit init);
readonly attribute ShadowRoot? shadowRoot;
Element? closest(DOMString selectors);
boolean matches(DOMString selectors);
boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
HTMLCollection getElementsByTagName(DOMString qualifiedName);
HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
HTMLCollection getElementsByClassName(DOMString classNames);
[CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
undefined insertAdjacentText(DOMString where, DOMString data); // legacy
};

GlobalEventHandlers

interface mixin GlobalEventHandlers {
attribute EventHandler onabort;
attribute EventHandler onauxclick;
attribute EventHandler onbeforeinput;
attribute EventHandler onbeforematch;
attribute EventHandler onbeforetoggle;
attribute EventHandler onblur;
attribute EventHandler oncancel;
attribute EventHandler oncanplay;
attribute EventHandler oncanplaythrough;
attribute EventHandler onchange;
attribute EventHandler onclick;
attribute EventHandler onclose;
attribute EventHandler oncontextlost;
attribute EventHandler oncontextmenu;
attribute EventHandler oncontextrestored;
attribute EventHandler oncopy;
attribute EventHandler oncuechange;
attribute EventHandler oncut;
attribute EventHandler ondblclick;
attribute EventHandler ondrag;
attribute EventHandler ondragend;
attribute EventHandler ondragenter;
attribute EventHandler ondragleave;
attribute EventHandler ondragover;
attribute EventHandler ondragstart;
attribute EventHandler ondrop;
attribute EventHandler ondurationchange;
attribute EventHandler onemptied;
attribute EventHandler onended;
attribute OnErrorEventHandler onerror;
attribute EventHandler onfocus;
attribute EventHandler onformdata;
attribute EventHandler oninput;
attribute EventHandler oninvalid;
attribute EventHandler onkeydown;
attribute EventHandler onkeypress;
attribute EventHandler onkeyup;
attribute EventHandler onload;
attribute EventHandler onloadeddata;
attribute EventHandler onloadedmetadata;
attribute EventHandler onloadstart;
attribute EventHandler onmousedown;
[LegacyLenientThis] attribute EventHandler onmouseenter;
[LegacyLenientThis] attribute EventHandler onmouseleave;
attribute EventHandler onmousemove;
attribute EventHandler onmouseout;
attribute EventHandler onmouseover;
attribute EventHandler onmouseup;
attribute EventHandler onpaste;
attribute EventHandler onpause;
attribute EventHandler onplay;
attribute EventHandler onplaying;
attribute EventHandler onprogress;
attribute EventHandler onratechange;
attribute EventHandler onreset;
attribute EventHandler onresize;
attribute EventHandler onscroll;
attribute EventHandler onscrollend;
attribute EventHandler onsecuritypolicyviolation;
attribute EventHandler onseeked;
attribute EventHandler onseeking;
attribute EventHandler onselect;
attribute EventHandler onslotchange;
attribute EventHandler onstalled;
attribute EventHandler onsubmit;
attribute EventHandler onsuspend;
attribute EventHandler ontimeupdate;
attribute EventHandler ontoggle;
attribute EventHandler onvolumechange;
attribute EventHandler onwaiting;
attribute EventHandler onwebkitanimationend;
attribute EventHandler onwebkitanimationiteration;
attribute EventHandler onwebkitanimationstart;
attribute EventHandler onwebkittransitionend;
attribute EventHandler onwheel;
};

ElementContentEditable

interface mixin ElementContentEditable {
[CEReactions] attribute DOMString contentEditable;
[CEReactions] attribute DOMString enterKeyHint;
readonly attribute boolean isContentEditable;
[CEReactions] attribute DOMString inputMode;
};

HTMLOrSVGElement

interface mixin HTMLOrSVGElement {
[SameObject] readonly attribute DOMStringMap dataset;
attribute DOMString nonce; // intentionally no [CEReactions]
[CEReactions] attribute boolean autofocus;
[CEReactions] attribute long tabIndex;
undefined focus(optional FocusOptions options = {});
undefined blur();
};

ARIA in HTML

暗黙的="option" ARIAロール="No" aria-* 属性="GlobalAny"

暗黙的な ARIAセマンティクスは、role=option です。

作成者は、暗黙的な ARIAセマンティクス, または HTML要素のネイティブセマンティクスを上書きしてはいけません。

グローバル aria-* 属性と、許可されたロールに適用される任意の aria-* 属性が記述できます。
作者はoption要素にaria-selected属性を使うべきではありません。

レンダリング

特になし

option: Nothing;

CSS を大雑把に読むと、特に指定はされていません。既定値から、フローレイアウトに配置されたときにインラインレベルのボックス(インラインボックス)を生成すると思われます。などになります。

説明

option要素は、select要素内のオプション、または datalist要素内の提案リストの一部としてのオプションを表します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>option要素の例 - (Example of option element) | 離珠のHTMLでしぃ！</title>
</head>
<body>
<h1>option要素の例</h1>
<form action="../Html/fmreceive.htm">
<select name="nseSelect">
<option>ABC123</option>
<option>DEF456</option>
</select>
<button name="nbtSender" value="../Html/exoption.htm">ボタン</button>
<br>受信用の<br>ページへ
</form>
</body>
</html>

このサンプルへのリンクです。
(./exoption.htm)

参照元

HTML Living Standard. 4.10.10 The option element (Last Updated 27 August 2024)
HTML Living Standard. 4.11 Interactive elements 4.11.3.5 Using the option element to define a command (Last Updated 27 August 2024)
HTML 5.2 W3C 勧告. 4.10.10 The option element (W3C勧告、2017年12月14日)
HTML 5.1 W3C 勧告. 4.10.10 The option element (W3C勧告、2016年11月1日)
HTML 5 W3C 勧告. 4.10.10 The option element (W3C勧告、2014年10月28日)
HTML 4.01 Specification W3C 勧告. 17.6 The SELECT, OPTGROUP, and OPTION elements (W3C勧告1999年12月24日)
HTML 3.2 Reference Specification (W3C勧告1997年1月14日)
Hypertext Markup Language - 2.0 (November 1995)
<option>: HTML 選択肢要素 - HTML: ハイパーテキストマークアップ言語 | MDN

JSONデータ

JSON形式での、データのイメージです。

{
"option": {
"check": "2024-09-01",
"group": "Form",
"element": "- O (#PCDATA) -- selectable choice. (Normal elements.) [None] --",
"attlist": {
"%Global;": "",
"disabled": "(disabled) #IMPLIED -- Whether the form control is disabled --",
"label": "%Text; #IMPLIED -- User-visible label --",
"selected": "(selected) #IMPLIED -- Whether the option is selected by default --",
"value": "CDATA #IMPLIED -- Value to be used for form submission --",
},
"comment": "選択可能な選択肢 (selectable choice)",
"point": "select要素内のオプション、または datalist要素内の提案リストの一部としてのオプションを表します。",
"kind": "Normal",
"categories": "None",
"used": [
"select",
"datalist",
"optgroup",
],
"contentmodel": "option (%Text)",
"contentmodelsupplement": [
"要素に label属性と value属性がある場合は、Nothing",
"要素に label属性はあるが value属性がない場合は、テキスト",
"要素に label属性がなく、datalist要素の子ではない場合は、要素間の空白ではないテキスト",
"要素に label属性がなく、datalist要素の子の場合は、テキスト",
],
"tag": [
"-",
"O",
],
"tagsupplement": "option要素の直後に別のoption要素が続く場合、その直後に optgroup要素が続く場合、直後に hr要素が続く場合、または親要素にそれ以上のコンテンツがない場合、option要素の終了タグは省略できます。",
"attributes": {
"disabled": "フォームコントロールが無効かどうか",
"label": "ユーザーに見えるラベル",
"selected": "オプションがデフォルトで選択されているかどうか",
"value": "フォーム送信に使用される値",
},
"dominterface": "HTMLOptionElement",
"rendering": "None",
"reference": [
{
"title": "HTML Living Standard. 4.10.10 The option element.",
"href": "https://html.spec.whatwg.org/multipage/form-elements.html#the-option-element",
"heading": "HTML Living Standard. 4.10.10 The option element",
"sub": "Last Updated 27 August 2024",
},
{
"title": "HTML Living Standard. 4.11 Interactive elements 4.11.3.5 Using the option element to define a command.",
"href": "https://html.spec.whatwg.org/multipage/interactive-elements.html#using-the-option-element-to-define-a-command",
"heading": "HTML Living Standard. 4.11 Interactive elements 4.11.3.5 Using the option element to define a command",
"sub": "Last Updated 27 August 2024",
},
{
"title": "HTML 5.2 W3C Recommendation. 4.10.10 The option element. W3C Recommendation, 14 December 2017.",
"href": "https://www.w3.org/TR/2017/REC-html52-20171214/sec-forms.html#the-option-element",
"heading": "HTML 5.2 W3C 勧告. 4.10.10 The option element",
"sub": "W3C勧告、2017年12月14日",
},
{
"title": "HTML 5.1 W3C Recommendation. 4.10.10 The option element. W3C Recommendation, 1 November 2016.",
"href": "https://www.w3.org/TR/2016/REC-html51-20161101/sec-forms.html#the-option-element",
"heading": "HTML 5.1 W3C 勧告. 4.10.10 The option element",
"sub": "W3C勧告、2016年11月1日",
},
{
"title": "HTML 5 W3C Recommendation. 4.10.10 The option element. W3C Recommendation, 28 October 2014.",
"href": "https://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-option-element",
"heading": "HTML 5 W3C 勧告. 4.10.10 The option element",
"sub": "W3C勧告、2014年10月28日",
},
{
"title": "HTML 4.01 Specification W3C Recommendation. 17.6 The SELECT, OPTGROUP, and OPTION elements. W3C Recommendation 24 December 1999.",
"href": "https://www.w3.org/TR/html401/interact/forms.html#h-17.6",
"heading": "HTML 4.01 Specification W3C 勧告. 17.6 The SELECT, OPTGROUP, and OPTION elements",
"sub": "W3C勧告1999年12月24日",
},
{
"title": "HTML 3.2 Reference Specification. W3C Recommendation 14-Jan-1997.",
"href": "https://www.w3.org/TR/2018/SPSD-html32-20180315/#select",
"heading": "HTML 3.2 Reference Specification",
"sub": "W3C勧告1997年1月14日",
},
{
"title": "Hypertext Markup Language - 2.0. November 1995.",
"href": "https://www.ietf.org/rfc/rfc1866.txt",
"heading": "Hypertext Markup Language - 2.0",
"sub": "November 1995",
},
{
"title": "MDN Web Docs. HTML <option>: The HTML Option element.",
"href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/option",
"heading": "<option>: HTML 選択肢要素 - HTML: ハイパーテキストマークアップ言語 | MDN",
},
],
"version": {
"first": "HTML2",
"latest": "HTML Living Standard",
},
}
}

注意: 簡易に描画する為に、各項目の後ろに , を付与しています。JSON の形式では、末尾の項目の後には , は付けません。

最終確認日

2024-09-01

2.使用可能な箇所

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

option要素を使用できる状態(コンテキスト・Context)は、select要素, datalist要素, optgroup要素に配置できます。

3.配置できるコンテンツ

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

optionは、子(内容・コンテンツ・Content)として、テキストを配置できます。ただし条件があります。
要素にlabelとvalueがある場合は、「何もない」(Nothing) です。要素のコンテンツモデルが「何もない」の場合、要素にはテキストノード (要素間の空白以外) と要素ノードが含まれていてはなりません。
要素にlabelはあるがvalueがない場合は、テキストです。
要素にlabelがなく、datalistの子ではない場合は、要素間の空白ではないテキストです。
要素にlabelがなく、datalistの子の場合は、テキストです。

4.属性

グローバル属性と、
disabled,
label,
selected,
value を
設定できます。

optionは、グローバル属性とdisabled属性, label属性, selected属性, value属性を設定できます。

<form action="./fmreceive.htm">
<select name="nseSelect">
<option value="">選択なし</option>
<option>ABC123</option>
<option>DEF456</option>
</select>
<button name="nbtSender" value="./fooption.htm#MAP4NEXT">ボタン</button>
</form>

form要素を改めて提示していない限り、この雛型の 4 行目の一部分であるoption要素の開始タグを置き換えてデモとしています。

button要素のvalueの値は、作成者の決め事によりその都度送信元が分かる様に書き換えています。nameの値は、作成者の決め事によりnbtSenderで固定です。

disabled属性

<option disabled>

disabled は、コントロールを非対話型にして、その値が送信されないようにする為に使用されるブール属性です。

label属性

<option label="Lavel01">

label は、要素のラベルを提供します。option要素のラベルは、label コンテンツ属性の値 (存在する場合) であり、その値が空の文字列でない場合は、要素の text IDL 属性の値です。

label コンテンツ属性が指定されている場合、空であってはなりません。

<form action="./fmreceive.htm">
<select name="nseSelect">
<option value="">選択なし</option>
<option label="L01" value="V01"></option>
<option label="L02">C02</option>
<option label="L03"></option>
</select>
<button name="nbtSender" value="./fooption.htm#MH3LABEL">ボタン</button>
</form>

この例は、labelが指定されていて他の属性, コンテンツの組み合わせにより、どの値が送信データとなるかの例示です。

labelとvalueが共にある場合, labelはあるがvalueがない場合でコンテンツが要素間の空白ではないテキストの場合, 要素間の空白の場合の３通りを各option要素で用意してみました。実際に送信してみないと違いが判りませんが、一応の例示です。

selected属性

<option selected>

selected は、ブール属性です。これは、要素のデフォルトの選択状態を表します。

multipleが指定されていないselect要素には、selectedが設定された子孫option要素が複数存在してはなりません。

value属性

<option value="Value01">

value は、要素の値を提供します。option要素の値は、value コンテンツ属性がある場合はその値、ない場合は要素の text IDL 属性の値になります。

<form action="./fmreceive.htm">
<select name="nseSelect">
<option value="">選択なし</option>
<option label="L01" value="V01"></option>
<option value="V02">C02</option>
</select>
<button name="nbtSender" value="./fooption.htm#MH3VALUE">ボタン</button>
</form>

この例は、valueが指定されていて他の属性, コンテンツの組み合わせにより、どの値が送信データとなるかの例示です。

labelとvalueが共にある場合, labelはないがvalueがある場合でコンテンツが要素間の空白ではないテキストの場合の２通りを各option要素で用意してみました。実際に送信してみないと違いが判りませんが、一応の例示です。

5.Web API

select要素,
datalist要素の
プロパティである
optionsは、
それらの要素内の
option要素
(HTMLCollection
オブジェクト)の
HTMLCollectionを
返します。

option要素単体を表すプロパティはないですが、option要素をフィルターとするselect要素, datalist要素をルートとする HTMLCollection を返すoptionsがあります。

<form action="./fmreceive.htm">
<select name="nseSelect" id="iseSelect551">
<option value="">選択なし</option>
<option label="L01" value="V01"></option>
<option label="L02">C02</option>
<option label="L03"></option>
<option value="V04">C04</option>
<option>C05</option>
</select>
<button name="nbtSender" value="./fooption.htm#MAP5NEXT">ボタン</button>
</form>
<div>このselectのoptionは、
<div id="idvJsOption551">〇〇</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var voDiv551 = document.getElementById("idvJsOption551");
var veOl = document.createElement("ol");
var veLi = document.createElement("li");
var veSpan = document.createElement("span");
var voOptions = document.getElementById("iseSelect551").options;
for (var i = 0; i < voForms150.length; i++){
veLi = document.createElement("li");
veSpan = document.createElement("span");
veSpan.innerHTML = 'disabled="' + voOptions[i].disabled + '"<br>selected="' + voOptions[i].selected + '"<br>label="' + voOptions[i].label + '"<br>value="' + voOptions[i].value + '"<br>text="' + voOptions[i].text + '"';
veLi.appendChild(veSpan);
veOl.appendChild(veLi);
}
if(veOl.childElementCount) {
voDiv551.textContent = "";
while(voDiv551.firstChild){
voDiv551.removeChild(voDiv551.firstChild);
}
voDiv551.appendChild(veOl);
}
});
</script>

option要素を扱う例示です。ここではselect要素の子孫での例ですが、datalist要素の子孫でも変わらない部分を提示しています。

select要素の取得をidを用いて documentの getElementById()メソッドで行っていますが、単なる例示なので出来れば良いでこの方法を採用しています。実際に使う時には、form要素からnameで辿るなど、どこのフォームか分かる方が良いかもしれません。命名規則で対応するのもありかもしれないので、その辺は内部規約で決めておくのが良いでしょう。

このselectのoptionは、

disabled="false"
selected="true"
label="選択なし"
value=""
text="選択なし"
disabled="false"
selected="false"
label="L01"
value="V01"
text=""
disabled="false"
selected="false"
label="L02"
value="C02"
text="C02"
disabled="false"
selected="false"
label="L03"
value=""
text=""
disabled="false"
selected="false"
label="C04"
value="V04"
text="C04"
disabled="false"
selected="false"
label="C05"
value="C05"
text="C05"

6.レンダリング

レンダリングについて
スタイルシートでの
仕様での提案は
特にないようです。

option要素は、select要素がレンダリングするリストボックスまたはドロップダウンボックスのリストの中の１つである事が期待されているという記述があるだけで、option要素自体のレンダリングに関してのスタイルシートでの提案はないようです。

option要素は、要素のラベルを表示することによってレンダリングされることが期待されます。ラベルは、optgroup要素がある場合はその下にインデントされます。

他の要素を代用して同等のレンダリングをする事を考えたら、リストの１項目という事でdisplay: list-itemが意味的には使えるかもしれません。マーカーを意識する必要があるので、手間は増えますが。
技術的にレンダリングだけを考えたら、ブロックレベルボックスを生成すればよいのでdisplay: blockが使い勝手が良いでしょう。代用する要素をdiv要素とするだけで良いので容易です。

7.気を付ける点

インターフェース

option要素は、select要素またはdatalist要素での選択可能な選択肢としての要素な訳で、フォームコントロールの一部を成す為のデータを提示するものかと思います。なので、「ユーザー」, 「作成者」だけでなく「送信先」も意識した作りが必要です。

「ユーザー」を意識したページの分かり易さや使い易さ、「作成者」を意識したソースコードの書き易さや読み易さ、「送信先」を意識した送信データの使い易さなど、バランスが大変ですがとりあえず意味ある作りを心掛けましょう。

8.付記

選択肢なのか
定義済みリストなのか
意識しましょう。

選択と言っても、チェックボックスなどの方法もあります。インターフェイスという視点も、データの用途という視点も、いろいろ検討するのが良いでしょう。下手に凝った作りは、問題になり易いです。必要な点を含めたうえで、より簡素な作りを目指しましょう。

次は、「optgroup要素」です。
共通のラベルを持つオプション要素のグループを表す optgroup要素に関してのメモ書きです。
前のページの「datalist要素」はこちらです。
上位のページの「フォーム」はこちらです。