メインコンテンツへスキップ

select要素

1.仕様

SELECT要素は、
一連のオプションの中から
選択するための
コントロールを
表します。

select

選択肢の選択 (option selector)

種類

通常要素

カテゴリ

使用できるコンテキスト
フレージングコンテンツを受け入れる要素

フレージングコンテンツを受け入れる要素のコンテンツとして、使用できます。

フレージングコンテンツを受け入れる要素は、h1要素, h2要素, h3要素, h4要素, h5要素, h6要素, p要素, pre要素, output要素, progress要素, meter要素, label要素, datalist要素, body要素, section要素, nav要素, aside要素, article要素, header要素, footer要素, main要素, address要素, li要素, dt要素, dd要素, caption要素, th要素, td要素, form要素, fieldset要素, search要素, blockquote要素, figure要素, figcaption要素, div要素, dialog要素, abbr要素, b要素, bdi要素, bdo要素, cite要素, code要素, data要素, dfn要素, em要素, i要素, kbd要素, mark要素, q要素, s要素, samp要素, small要素, span要素, strong要素, sub要素, sup要素, u要素, var要素 です。

コンテンツモデル
(optionまたは、optgroup要素または、0個以上のhr) オプションでが混在

(optionまたは、optgroup要素または、0個以上のhr)が配置できます。オプションで、を混在して配置できます。

に分類される要素は、 です。

タグの省略

どちらのタグも省略できません。

コンテンツ属性
グローバル属性 他
autocomplete属性
フォーム自動入力機能のヒント
disabled属性
フォームコントロールが無効かどうか
form属性
要素をフォーム要素に関連付けます
multiple属性
複数の値を許可するかどうか
name属性
フォーム送信および form.elements API で使用する要素の名前
required属性
フォーム送信にコントロールが必要かどうか
size属性
コントロールのサイズ
DOM インターフェイス
HTMLSelectElement
  1. [Exposed=Window]
  2. interface HTMLSelectElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute DOMString autocomplete;
  6. [CEReactions] attribute boolean disabled;
  7. readonly attribute HTMLFormElement? form;
  8. [CEReactions] attribute boolean multiple;
  9. [CEReactions] attribute DOMString name;
  10. [CEReactions] attribute boolean required;
  11. [CEReactions] attribute unsigned long size;
  12.  
  13. readonly attribute DOMString type;
  14.  
  15. [SameObject] readonly attribute HTMLOptionsCollection options;
  16. [CEReactions] attribute unsigned long length;
  17. getter HTMLOptionElement? item(unsigned long index);
  18. HTMLOptionElement? namedItem(DOMString name);
  19. [CEReactions] undefined add((HTMLOptionElement or HTMLOptGroupElement) element, optional (HTMLElement or long)? before = null);
  20. [CEReactions] undefined remove(); // ChildNode overload
  21. [CEReactions] undefined remove(long index);
  22. [CEReactions] setter undefined (unsigned long index, HTMLOptionElement? option);
  23.  
  24. [SameObject] readonly attribute HTMLCollection selectedOptions;
  25. attribute long selectedIndex;
  26. attribute DOMString value;
  27.  
  28. readonly attribute boolean willValidate;
  29. readonly attribute ValidityState validity;
  30. readonly attribute DOMString validationMessage;
  31. boolean checkValidity();
  32. boolean reportValidity();
  33. undefined setCustomValidity(DOMString error);
  34.  
  35. undefined showPicker();
  36.  
  37. readonly attribute NodeList labels;
  38. };
HTMLElement
  1. [Exposed=Window]
  2. interface HTMLElement : Element {
  3. [HTMLConstructor] constructor();
  4.  
  5. // metadata attributes
  6. [CEReactions] attribute DOMString title;
  7. [CEReactions] attribute DOMString lang;
  8. [CEReactions] attribute boolean translate;
  9. [CEReactions] attribute DOMString dir;
  10.  
  11. // user interaction
  12. [CEReactions] attribute (boolean or unrestricted double or DOMString)? hidden;
  13. [CEReactions] attribute DOMString inert;
  14. undefined click();
  15. [CEReactions] attribute DOMString accessKey;
  16. readonly attribute DOMString accessKeyLabel;
  17. [CEReactions] attribute boolean draggable;
  18. [CEReactions] attribute boolean spellcheck;
  19. [CEReactions] attribute DOMString writingSuggestions;
  20. [CEReactions] attribute DOMString autocapitalize;
  21.  
  22. [CEReactions] attribute [LegacyNullToEmptyString] DOMString innerText;
  23. [CEReactions] attribute [LegacyNullToEmptyString] DOMString outerText;
  24.  
  25. ElementInternals attachInternals();
  26.  
  27. // The popover API
  28. undefined showPopover();
  29. undefined hidePopover();
  30. boolean togglePopover(optional boolean force);
  31. [CEReactions] attribute DOMString? popover;
  32. };
  33.  
  34. HTMLElement includes GlobalEventHandlers;
  35. HTMLElement includes ElementContentEditable;
  36. HTMLElement includes HTMLOrSVGElement;
Element
  1. [Exposed=Window]
  2. interface Element : Node {
  3. readonly attribute DOMString? namespaceURI;
  4. readonly attribute DOMString? prefix;
  5. readonly attribute DOMString localName;
  6. readonly attribute DOMString tagName;
  7.  
  8. [CEReactions] attribute DOMString id;
  9. [CEReactions] attribute DOMString className;
  10. [SameObject, PutForwards=value] readonly attribute DOMTokenList classList;
  11. [CEReactions, Unscopable] attribute DOMString slot;
  12.  
  13. boolean hasAttributes();
  14. [SameObject] readonly attribute NamedNodeMap attributes;
  15. sequence<DOMString> getAttributeNames();
  16. DOMString? getAttribute(DOMString qualifiedName);
  17. DOMString? getAttributeNS(DOMString? namespace, DOMString localName);
  18. [CEReactions] undefined setAttribute(DOMString qualifiedName, DOMString value);
  19. [CEReactions] undefined setAttributeNS(DOMString? namespace, DOMString qualifiedName, DOMString value);
  20. [CEReactions] undefined removeAttribute(DOMString qualifiedName);
  21. [CEReactions] undefined removeAttributeNS(DOMString? namespace, DOMString localName);
  22. [CEReactions] boolean toggleAttribute(DOMString qualifiedName, optional boolean force);
  23. boolean hasAttribute(DOMString qualifiedName);
  24. boolean hasAttributeNS(DOMString? namespace, DOMString localName);
  25.  
  26. Attr? getAttributeNode(DOMString qualifiedName);
  27. Attr? getAttributeNodeNS(DOMString? namespace, DOMString localName);
  28. [CEReactions] Attr? setAttributeNode(Attr attr);
  29. [CEReactions] Attr? setAttributeNodeNS(Attr attr);
  30. [CEReactions] Attr removeAttributeNode(Attr attr);
  31.  
  32. ShadowRoot attachShadow(ShadowRootInit init);
  33. readonly attribute ShadowRoot? shadowRoot;
  34.  
  35. Element? closest(DOMString selectors);
  36. boolean matches(DOMString selectors);
  37. boolean webkitMatchesSelector(DOMString selectors); // legacy alias of .matches
  38.  
  39. HTMLCollection getElementsByTagName(DOMString qualifiedName);
  40. HTMLCollection getElementsByTagNameNS(DOMString? namespace, DOMString localName);
  41. HTMLCollection getElementsByClassName(DOMString classNames);
  42.  
  43. [CEReactions] Element? insertAdjacentElement(DOMString where, Element element); // legacy
  44. undefined insertAdjacentText(DOMString where, DOMString data); // legacy
  45. };
GlobalEventHandlers
  1. interface mixin GlobalEventHandlers {
  2. attribute EventHandler onabort;
  3. attribute EventHandler onauxclick;
  4. attribute EventHandler onbeforeinput;
  5. attribute EventHandler onbeforematch;
  6. attribute EventHandler onbeforetoggle;
  7. attribute EventHandler onblur;
  8. attribute EventHandler oncancel;
  9. attribute EventHandler oncanplay;
  10. attribute EventHandler oncanplaythrough;
  11. attribute EventHandler onchange;
  12. attribute EventHandler onclick;
  13. attribute EventHandler onclose;
  14. attribute EventHandler oncontextlost;
  15. attribute EventHandler oncontextmenu;
  16. attribute EventHandler oncontextrestored;
  17. attribute EventHandler oncopy;
  18. attribute EventHandler oncuechange;
  19. attribute EventHandler oncut;
  20. attribute EventHandler ondblclick;
  21. attribute EventHandler ondrag;
  22. attribute EventHandler ondragend;
  23. attribute EventHandler ondragenter;
  24. attribute EventHandler ondragleave;
  25. attribute EventHandler ondragover;
  26. attribute EventHandler ondragstart;
  27. attribute EventHandler ondrop;
  28. attribute EventHandler ondurationchange;
  29. attribute EventHandler onemptied;
  30. attribute EventHandler onended;
  31. attribute OnErrorEventHandler onerror;
  32. attribute EventHandler onfocus;
  33. attribute EventHandler onformdata;
  34. attribute EventHandler oninput;
  35. attribute EventHandler oninvalid;
  36. attribute EventHandler onkeydown;
  37. attribute EventHandler onkeypress;
  38. attribute EventHandler onkeyup;
  39. attribute EventHandler onload;
  40. attribute EventHandler onloadeddata;
  41. attribute EventHandler onloadedmetadata;
  42. attribute EventHandler onloadstart;
  43. attribute EventHandler onmousedown;
  44. [LegacyLenientThis] attribute EventHandler onmouseenter;
  45. [LegacyLenientThis] attribute EventHandler onmouseleave;
  46. attribute EventHandler onmousemove;
  47. attribute EventHandler onmouseout;
  48. attribute EventHandler onmouseover;
  49. attribute EventHandler onmouseup;
  50. attribute EventHandler onpaste;
  51. attribute EventHandler onpause;
  52. attribute EventHandler onplay;
  53. attribute EventHandler onplaying;
  54. attribute EventHandler onprogress;
  55. attribute EventHandler onratechange;
  56. attribute EventHandler onreset;
  57. attribute EventHandler onresize;
  58. attribute EventHandler onscroll;
  59. attribute EventHandler onscrollend;
  60. attribute EventHandler onsecuritypolicyviolation;
  61. attribute EventHandler onseeked;
  62. attribute EventHandler onseeking;
  63. attribute EventHandler onselect;
  64. attribute EventHandler onslotchange;
  65. attribute EventHandler onstalled;
  66. attribute EventHandler onsubmit;
  67. attribute EventHandler onsuspend;
  68. attribute EventHandler ontimeupdate;
  69. attribute EventHandler ontoggle;
  70. attribute EventHandler onvolumechange;
  71. attribute EventHandler onwaiting;
  72. attribute EventHandler onwebkitanimationend;
  73. attribute EventHandler onwebkitanimationiteration;
  74. attribute EventHandler onwebkitanimationstart;
  75. attribute EventHandler onwebkittransitionend;
  76. attribute EventHandler onwheel;
  77. };
ElementContentEditable
  1. interface mixin ElementContentEditable {
  2. [CEReactions] attribute DOMString contentEditable;
  3. [CEReactions] attribute DOMString enterKeyHint;
  4. readonly attribute boolean isContentEditable;
  5. [CEReactions] attribute DOMString inputMode;
  6. };
HTMLOrSVGElement
  1. interface mixin HTMLOrSVGElement {
  2. [SameObject] readonly attribute DOMStringMap dataset;
  3. attribute DOMString nonce; // intentionally no [CEReactions]
  4.  
  5. [CEReactions] attribute boolean autofocus;
  6. [CEReactions] attribute long tabIndex;
  7. undefined focus(optional FocusOptions options = {});
  8. undefined blur();
  9. };
ARIA in HTML
暗黙的="combobox,listbox" ARIAロール="あり" aria-* 属性="GlobalAny"

暗黙的な ARIAセマンティクスは、role=combobox, listbox です。
multiple属性がなく、size属性の値が1以上でない場合は role=combobox multiple属性を持つまたはsize属性の値が1より大きい場合の場合は role=listbox

作成者が要素に指定してもよい ARIAロール値は、 menu, No です。
multiple属性がなく、size属性の値が1以上でない場合は role=menu multiple属性を持つまたはsize属性の値が1より大きい場合の場合は No role

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

レンダリング
インラインレベルボックス
フォームコントロール
  1. select {
  2. display: inline-block;
  3. letter-spacing: initial;
  4. word-spacing: initial;
  5. line-height: initial;
  6. text-transform: initial;
  7. text-indent: initial;
  8. text-shadow: initial;
  9. appearance: auto;
  10. text-align: initial;
  11. box-sizing: border-box;
  12. }

CSS を大雑把に読むと、 インラインレベルのブロックコンテナボックス(インラインブロック)を生成します。 などになります。

説明
select要素は、一連のオプションの中から選択するためのコントロールを表します。
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>select要素の例 - (Example of select element) | 離珠のHTMLでしぃ！</title>
  6. </head>
  7. <body>
  8. <h1>select要素の例</h1>
  9. <form action="../Html/fmreceive.htm">
  10. <select name="nseSelect">
  11. <option>ABC123</option>
  12. <option>DEF456</option>
  13. </select>
  14. <button name="nbtSender" value="../Html/exselect.htm">ボタン</button>
  15. <br>受信用の<br>ページへ
  16. </form>
  17. </body>
  18. </html>

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

参照元
参照元
JSONデータ
JSON形式での、データのイメージです。
  1. {
  2. "select": {
  3. "check": "2024-09-01",
  4. "group": "Form",
  5. "element": "- - ((option|optgroup|hr)*) +(%Script) -- option selector. (Normal elements.) [Flow|Phrasing|Interactive|Listed|Labelable|Submittable|Resettable|Autocapitalize|Form|Palpable] --",
  6. "attlist": {
  7. "%Global;": "",
  8. "autocomplete": "(on|off) on -- Hint for form autofill feature --",
  9. "disabled": "(disabled) #IMPLIED -- Whether the form control is disabled --",
  10. "form": "IDREF #IMPLIED -- Associates the element with a form element --",
  11. "multiple": "(multiple) #IMPLIED -- Whether to allow multiple values --",
  12. "name": "CDATA #IMPLIED -- Name of the element to use for form submission and in the form.elements API --",
  13. "required": "(required) #IMPLIED -- Whether the control is required for form submission --",
  14. "size": "CDATA #IMPLIED -- Size of the control --",
  15. },
  16. "comment": "選択肢の選択 (option selector)",
  17. "point": "一連のオプションの中から選択するためのコントロールを表します。",
  18. "kind": "Normal",
  19. "categories": [
  20. "Flow",
  21. "Phrasing",
  22. "Interactive",
  23. "Listed",
  24. "Labelable",
  25. "Submittable",
  26. "Resettable",
  27. "Autocapitalize",
  28. "Formassociated",
  29. "Palpable",
  30. ],
  31. "used": "parent (%Phrasing)*",
  32. "contentmodel": "select ((option|optgroup|hr)*) +(%Script)",
  33. "tag": [
  34. "-",
  35. "-",
  36. ],
  37. "attributes": {
  38. "autocomplete": "フォーム自動入力機能のヒント",
  39. "disabled": "フォームコントロールが無効かどうか",
  40. "form": "要素をフォーム要素に関連付けます",
  41. "multiple": "複数の値を許可するかどうか",
  42. "name": "フォーム送信および form.elements API で使用する要素の名前",
  43. "required": "フォーム送信にコントロールが必要かどうか",
  44. "size": "コントロールのサイズ",
  45. },
  46. "dominterface": "HTMLSelectElement",
  47. "rendering": "Form",
  48. "reference": [
  49. {
  50. "title": "HTML Living Standard. 4.10.7 The select element.",
  51. "href": "https://html.spec.whatwg.org/multipage/form-elements.html#the-select-element",
  52. "heading": "HTML Living Standard. 4.10.7 The select element",
  53. "sub": "Last Updated 27 August 2024",
  54. },
  55. {
  56. "title": "HTML Living Standard. 15 Rendering 15.3.10 Form controls.",
  57. "href": "https://html.spec.whatwg.org/multipage/rendering.html#form-controls",
  58. "heading": "HTML Living Standard. 15 Rendering 15.3.10 Form controls",
  59. "sub": "Last Updated 27 August 2024",
  60. },
  61. {
  62. "title": "HTML Living Standard. 15 Rendering 15.5.16 The select element.",
  63. "href": "https://html.spec.whatwg.org/multipage/rendering.html#the-select-element-2",
  64. "heading": "HTML Living Standard. 15 Rendering 15.5.16 The select element",
  65. "sub": "Last Updated 27 August 2024",
  66. },
  67. {
  68. "title": "HTML 5.2 W3C Recommendation. 4.10.7 The select element. W3C Recommendation, 14 December 2017.",
  69. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/sec-forms.html#the-select-element",
  70. "heading": "HTML 5.2 W3C 勧告. 4.10.7 The select element",
  71. "sub": "W3C勧告、2017年12月14日",
  72. },
  73. {
  74. "title": "HTML 5.2 W3C Recommendation. 10.3.11. Form controls.",
  75. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#form-controls",
  76. "heading": "HTML 5.2 W3C 勧告. 10.3.11. Form controls.",
  77. "sub": "W3C勧告、2017年12月14日",
  78. },
  79. {
  80. "title": "HTML 5.2 W3C Recommendation. 10.5.14. The select element.",
  81. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#the-select-element-rendering",
  82. "heading": "HTML 5.2 W3C 勧告. 10.5.14. The select element.",
  83. "sub": "W3C勧告、2017年12月14日",
  84. },
  85. {
  86. "title": "HTML 5.1 W3C Recommendation. 4.10.7 The select element. W3C Recommendation, 1 November 2016.",
  87. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/sec-forms.html#the-select-element",
  88. "heading": "HTML 5.1 W3C 勧告. 4.10.7 The select element",
  89. "sub": "W3C勧告、2016年11月1日",
  90. },
  91. {
  92. "title": "HTML 5.1 W3C Recommendation. 10.3.11. Form controls. W3C Recommendation, 1 November 2016.",
  93. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#form-controls",
  94. "heading": "HTML 5.1 W3C 勧告. 10.3.11. Form controls.",
  95. "sub": "W3C勧告、2016年11月1日",
  96. },
  97. {
  98. "title": "HTML 5.1 W3C Recommendation. 10.5.14. The select element. W3C Recommendation, 1 November 2016.",
  99. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#the-select-element-rendering",
  100. "heading": "HTML 5.1 W3C 勧告. 10.5.14. The select element.",
  101. "sub": "W3C勧告、2016年11月1日",
  102. },
  103. {
  104. "title": "HTML 5 W3C Recommendation. 4.10.7 The select element. W3C Recommendation, 28 October 2014.",
  105. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-select-element",
  106. "heading": "HTML 5 W3C 勧告. 4.10.7 The select element",
  107. "sub": "W3C勧告、2014年10月28日",
  108. },
  109. {
  110. "title": "HTML 5 W3C Recommendation. 10.3.11. Form controls. W3C Recommendation, 28 October 2014.",
  111. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/rendering.html#form-controls",
  112. "heading": "HTML 5 W3C 勧告. 10.3.11. Form controls.",
  113. "sub": "W3C勧告、2014年10月28日",
  114. },
  115. {
  116. "title": "HTML 5 W3C Recommendation. 10.5.13 The select element. W3C Recommendation, 28 October 2014.",
  117. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/rendering.html#the-select-element-0",
  118. "heading": "HTML 5 W3C 勧告. 10.5.13 The select element.",
  119. "sub": "W3C勧告、2014年10月28日",
  120. },
  121. {
  122. "title": "HTML 4.01 Specification W3C Recommendation. 17.6 The SELECT, OPTGROUP, and OPTION elements. W3C Recommendation 24 December 1999.",
  123. "href": "https://www.w3.org/TR/html401/interact/forms.html#h-17.6",
  124. "heading": "HTML 4.01 Specification W3C 勧告. 17.6 The SELECT, OPTGROUP, and OPTION elements",
  125. "sub": "W3C勧告1999年12月24日",
  126. },
  127. {
  128. "title": "HTML 3.2 Reference Specification. W3C Recommendation 14-Jan-1997.",
  129. "href": "https://www.w3.org/TR/2018/SPSD-html32-20180315/#select",
  130. "heading": "HTML 3.2 Reference Specification",
  131. "sub": "W3C勧告1997年1月14日",
  132. },
  133. {
  134. "title": "Hypertext Markup Language - 2.0. November 1995.",
  135. "href": "https://www.ietf.org/rfc/rfc1866.txt",
  136. "heading": "Hypertext Markup Language - 2.0",
  137. "sub": "November 1995",
  138. },
  139. {
  140. "title": "MDN Web Docs. HTML <select>: The HTML Select element.",
  141. "href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/select",
  142. "heading": "<select>: HTML 選択要素 - HTML: ハイパーテキストマークアップ言語 | MDN",
  143. },
  144. ],
  145. "version": {
  146. "first": "HTML2",
  147. "latest": "HTML Living Standard",
  148. },
  149. }
  150. }

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

最終確認日

2024-09-01

2.使用可能な箇所

フレージングコンテンツ を
受け入れる要素に
配置できます。

select要素を使用できる状態(コンテキスト・Context)は、フレージングコンテンツを受け入れる要素に配置できます。

フレージングコンテンツを受け入れる要素は、h1要素, h2要素, h3要素, h4要素, h5要素, h6要素, p要素, pre要素, output要素, progress要素, meter要素, label要素, datalist要素, body要素, section要素, nav要素, aside要素, article要素, header要素, footer要素, main要素, address要素, li要素, dt要素, dd要素, caption要素, th要素, td要素, form要素, fieldset要素, search要素, blockquote要素, figure要素, figcaption要素, div要素, dialog要素, abbr要素, b要素, bdi要素, bdo要素, cite要素, code要素, data要素, dfn要素, em要素, i要素, kbd要素, mark要素, q要素, s要素, samp要素, small要素, span要素, strong要素, sub要素, sup要素, u要素, var要素 です。

尚 厳密に言うと、コンテンツモデルがフレージングコンテンツ, フローコンテンツのいずれかである要素に配置できます。少なくとも現在は、カテゴリがフレージングコンテンツである要素はフローコンテンツでもあります。なので、コンテンツモデルがフローコンテンツである要素にはカテゴリがフレージングコンテンツである要素も配置できるのが現状です。

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

option要素,
optgroup要素を
配置できます。

selectは、子(内容・コンテンツ・Content)として、0 以上の option要素, optgroup要素, hr要素 および scriptコンテンツを配置できます。

scriptコンテンツである要素は、script要素, template要素 です。

4.属性

グローバル属性と、
autocomplete,
disabled, form,
multiple, name,
required, size を
設定できます。

selectは、グローバル属性とautocomplete属性, disabled属性, form属性, multiple属性, name属性, required属性, size属性を設定できます。

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect">
  3. <option value="">選択なし</option>
  4. <option>ABC123</option>
  5. <option>DEF456</option>
  6. </select>
  7. <button name="nbtSender" value="./foselect.htm#MAP4NEXT">ボタン</button>
  8. </form>

form要素を改めて提示していない限り、この雛型の 2 行目のselect要素の開始タグを置き換えてデモとしています。

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

autocomplete属性

  1. <select name="nseSelect" autocomplete="on">

autocompleteは、ユーザーエージェントが自動入力動作を提供する方法を制御します。

disabled属性

  1. <select name="nseSelect" disabled>

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

form属性

  1. <form action="./fmreceive.htm">
  2. <select name="nseSelect" form="ifoForm441">
  3. <option>ABC123</option>
  4. <option>DEF456</option>
  5. </select>
  6. <button name="nbtSender" value="./fotextarea.htm#MH3FORM">ボタン</button>
  7. </form>
  8. <form id="ifoForm441" action="./fmreceive.htm">
  9. <button name="nbtSender" value="./fotextarea.htm#MH3FORM">ボタン</button>
  10. </form>

formは、入力要素をそのフォーム所有者に明示的に関連付ける為に使用されます。

フォーム関連要素は、デフォルトでは、最も近い祖先form要素に関連付けられます。ただし、リストされている場合は、これを上書きする為にformを指定できます。つまりformを指定してフォーム所有者に関連付けした場合は、その要素の最も近い祖先への関連付けは上書きされるという事で、複数のフォーム所有者に関連付ける事は出来ないという事です。

multiple属性

  1. <select name="nseSelect" multiple>

multipleは、ユーザーが複数の値を指定できるかどうかを示すブール属性です。

送信時、同一名で複数の値を送るので、受け取り側もその対応が必要です。この例示での受け取り用ページはその対応をしていませんので、ご注意下さい。

name属性

  1. <select name="nseSelect">

nameは、要素の名前を表します。

nameは、フォームの送信時やformの elements オブジェクトで使用されるフォームコントロールの名前を指定します。属性が指定されている場合、その値は空の文字列またはisindexであってはなりません。
isindex以外では、name に空でない任意の値が許可されます。name_charset_の ASCII 大文字と小文字を区別しない一致は特別です。valueのない Hidden コントロールの名前として使用した場合、送信時にvalueに送信文字エンコーディングで構成される値が自動的に与えられます。

nameはフォームコントロールの名前となるので、他の属性名などと重複しないように命名規則を事前に内部規則などで決めておくのが良いです。

required属性

  1. <select name="nseSelect" required>

requiredは、フォーム送信にコントロールが必要かどうかを表します。requiredはブール属性です。指定されている場合、要素は必須です。

要素が必須であり、その値の IDL 属性が適用され、モード値にあり、要素が変更可能であり、要素の値が空の文字列である場合、要素は欠落している状態になります。

size属性

  1. <select name="nseSelect" size="2">

sizeは、ユーザーに表示するオプションの数を指定します。sizeが指定されている場合、その値は 0 より大きい有効な非負の整数である必要があります。

selectの表示サイズは、非負の整数を解析するためのルールを要素のsizeの値に適用した結果です (要素にsizeがあり、解析が成功した場合)。これらのルールを属性の値に適用できない場合、またはsizeがない場合、要素の表示サイズは、要素の multiple content 属性が存在する場合は 4、存在しない場合は 1 になります。

5.Web API

name属性を用いて
form要素
(HTMLFormElement
オブジェクト)の
プロパティとして
要素を取得する方法が
お勧めです。

select要素単体を表すプロパティはないですが、まずform要素を取得して、nameの属性値を名称とするそれのプロパティとして要素を取得する方法がお勧めです。 理由は、その名称が送信時のデータ名ともなり分かり易いと思うからです。

6.レンダリング

  1. select {
  2. display: inline-block;
  3. text-align: initial;
  4. box-sizing: border-box;
  5. }

select要素は、インラインレベルのブロックコンテナボックス(インラインブロック)を生成します。

select のラベルの幅は、最も広い optgroup をレンダリングするために必要な幅と、要素のオプションリストで最も広いoption要素をレンダリングするために必要な幅 (インデントがある場合はそれを含む) のうち、広い方の幅になります。

コードを見易くする為に要素毎に改行すると、改行コードがスペースと扱われて意図しない隙間が表れる事があります。 描画を重視するかコードの見易さを重視するか、折衷案でタグの内で改行するか、いろいろ配慮が必要です。

7.気を付ける点

フォームの所有者

select要素などのフォーム関連要素は、要素のフォーム所有者と呼ばれるform要素との関係を持つことができます。そしてフォーム関連要素は、デフォルトで、その最も近い祖先のform要素に関連付けられます。formを用いて、form要素に関連付ける事も出来ます。どのform要素がフォームの所有者であるか、分かり易くする事を意識するのが良いと思います。

名前

nameを用いて名前を付ける時に、プロパティの名称と同じだとアクセスに干渉する事が考えられます。故に命名には内部規則として命名規則を事前に決めておくのが良いと思います。
尚nameがなくて名前が付いていないと、送信対象とならないみたいです。

dirnameを用いる時にも、他のフォーム送信に於けるデータの名前と重複しない様に、命名には内部規則として命名規則を事前に決めておくのが良いと思います。

8.付記