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

button要素

1.仕様

BUTTON要素は、
その内容によって
ラベル付けされたボタンを
表します。

button

押すボタン (push button)

種類

通常要素

カテゴリ

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

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

フレージングコンテンツを受け入れる要素は、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要素 です。

コンテンツモデル
0個以上のフレージングコンテンツ (インタラクティブコンテンツ を除く)

0個以上のフレージングコンテンツが配置できます。ですが、インタラクティブコンテンツは子孫に持てません。

インタラクティブコンテンツを除くフレージングコンテンツに分類される要素は、script要素, noscript要素, template要素, input要素, output要素, progress要素, meter要素, datalist要素, picture要素, object要素, img要素, video要素, audio要素, canvas要素, map要素, area要素, a要素, ins要素, del要素, abbr要素, b要素, bdi要素, bdo要素, cite要素, code要素, data要素, dfn要素, em要素, i要素, kbd要素, mark要素, q要素, s要素, samp要素, small要素, span要素, strong要素, sub要素, sup要素, u要素, var要素, time要素, ruby要素, br要素, wbr要素, slot要素, テキスト です。

インタラクティブコンテンツの子孫や tabindex属性が指定された子孫があってはなりません。

タグの省略

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

コンテンツ属性
グローバル属性 他
disabled属性
フォームコントロールが無効かどうか
form属性
要素をフォーム要素に関連付けます
formaction属性
フォーム送信に使用するURL
formenctype属性
フォーム送信に使用するエントリリストのエンコードタイプ
formmethod属性
フォーム送信に使用するHTTPメソッド
formnovalidate属性
フォーム送信時のフォームコントロールの検証をバイパスする
formtarget属性
フォーム送信にナビゲート可能
name属性
フォーム送信および form.elements API で使用する要素の名前
popovertarget属性
ポップオーバー要素を切り替え、表示、または非表示にする対象とします。
popovertargetaction属性
ターゲットのポップオーバー要素を切り替えるか、表示するか、非表示にするかを示します。
type属性
ボタンの種類
value属性
フォーム送信に使用される値
DOM インターフェイス
HTMLButtonElement
  1. [Exposed=Window]
  2. interface HTMLButtonElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute boolean disabled;
  6. readonly attribute HTMLFormElement? form;
  7. [CEReactions] attribute USVString formAction;
  8. [CEReactions] attribute DOMString formEnctype;
  9. [CEReactions] attribute DOMString formMethod;
  10. [CEReactions] attribute boolean formNoValidate;
  11. [CEReactions] attribute DOMString formTarget;
  12. [CEReactions] attribute DOMString name;
  13. [CEReactions] attribute DOMString type;
  14. [CEReactions] attribute DOMString value;
  15.  
  16. readonly attribute boolean willValidate;
  17. readonly attribute ValidityState validity;
  18. readonly attribute DOMString validationMessage;
  19. boolean checkValidity();
  20. boolean reportValidity();
  21. undefined setCustomValidity(DOMString error);
  22.  
  23. readonly attribute NodeList labels;
  24. };
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
暗黙的="button" ARIAロール="あり" aria-* 属性="GlobalAny"

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

作成者が要素に指定してもよい ARIAロール値は、 checkbox, combobox, gridcell, link, menuitem, menuitemcheckbox, menuitemradio, option, radio, separator, slider, switch, tab, treeitem です。

グローバル aria-* 属性と、許可されたロールに適用される任意の aria-* 属性が記述できます。

レンダリング
インラインレベルボックス
フォームコントロール
  1. button {
  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: center;
  11. box-sizing: border-box;
  12. }

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

説明
button要素は、その内容によってラベル付けされたボタンを表します。
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>button要素の例 - (Example of button element) | 離珠のHTMLでしぃ！</title>
  6. </head>
  7. <body>
  8. <h1>button要素の例</h1>
  9. <form action="../Html/fmreceive.htm">
  10. <input name="nipInput" value="abc">
  11. <button name="nbtSender" value="../Html/exbutton.htm">ボタン</button>
  12. <br>受信用の<br>ページへ
  13. </form>
  14. </body>
  15. </html>

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

参照元
参照元
JSONデータ
JSON形式での、データのイメージです。
  1. {
  2. "button": {
  3. "check": "2024-09-01",
  4. "group": "Form",
  5. "element": "- - (%Phrasing)* -(%Interactive) -- push button. (Normal elements.) [Flow|Phrasing|Interactive|Listed|Labelable|Submittable|Autocapitalize|Form|Palpable] --",
  6. "attlist": {
  7. "%Global;": "",
  8. "disabled": "(disabled) #IMPLIED -- Whether the form control is disabled --",
  9. "form": "IDREF #IMPLIED -- Associates the element with a form element --",
  10. "formaction": "%URI; #IMPLIED -- URL to use for form submission --",
  11. "formenctype": "%ContentType; #IMPLIED -- Entry list encoding type to use for form submission --",
  12. "formmethod": "(get|post|dialog) #IMPLIED -- Variant to use for form submission --",
  13. "formnovalidate": "(formnovalidate) #IMPLIED -- Bypass form control validation for form submission --",
  14. "formtarget": "%FrameTarget; #IMPLIED -- Navigable for form submission --",
  15. "name": "CDATA #IMPLIED -- Name of the element to use for form submission and in the form.elements API --",
  16. "popovertarget": "IDREF #IMPLIED -- Targets a popover element to toggle, show, or hide --",
  17. "popovertargetaction": "(toggle|show|hide) #IMPLIED -- Indicates whether a targeted popover element is to be toggled, shown, or hidden --",
  18. "type": "(submit|reset|button) submit -- Type of button --",
  19. "value": "CDATA #IMPLIED -- Value to be used for form submission --",
  20. },
  21. "comment": "押すボタン (push button)",
  22. "point": "その内容によってラベル付けされたボタンを表します。",
  23. "kind": "Normal",
  24. "categories": [
  25. "Flow",
  26. "Phrasing",
  27. "Interactive",
  28. "Listed",
  29. "Labelable",
  30. "Submittable",
  31. "Autocapitalize",
  32. "Formassociated",
  33. "Palpable",
  34. ],
  35. "used": "parent (%Phrasing)*",
  36. "contentmodel": "button (%Phrasing)* -(%Interactive)",
  37. "contentmodelsupplement": "インタラクティブコンテンツの子孫や tabindex属性が指定された子孫があってはなりません。",
  38. "tag": [
  39. "-",
  40. "-",
  41. ],
  42. "attributes": {
  43. "disabled": "フォームコントロールが無効かどうか",
  44. "form": "要素をフォーム要素に関連付けます",
  45. "formaction": "フォーム送信に使用するURL",
  46. "formenctype": "フォーム送信に使用するエントリリストのエンコードタイプ",
  47. "formmethod": "フォーム送信に使用するHTTPメソッド",
  48. "formnovalidate": "フォーム送信時のフォームコントロールの検証をバイパスする",
  49. "formtarget": "フォーム送信にナビゲート可能",
  50. "name": "フォーム送信および form.elements API で使用する要素の名前",
  51. "popovertarget": "ポップオーバー要素を切り替え、表示、または非表示にする対象とします。",
  52. "popovertargetaction": "ターゲットのポップオーバー要素を切り替えるか、表示するか、非表示にするかを示します。",
  53. "type": "ボタンの種類",
  54. "value": "フォーム送信に使用される値",
  55. },
  56. "dominterface": "HTMLButtonElement",
  57. "rendering": "Form",
  58. "reference": [
  59. {
  60. "title": "HTML Living Standard. 4.10.6 The button element.",
  61. "href": "https://html.spec.whatwg.org/multipage/form-elements.html#the-button-element",
  62. "heading": "HTML Living Standard. 4.10.6 The button element",
  63. "sub": "Last Updated 27 August 2024",
  64. },
  65. {
  66. "title": "HTML Living Standard. 15 Rendering 15.3.10 Form controls.",
  67. "href": "https://html.spec.whatwg.org/multipage/rendering.html#form-controls",
  68. "heading": "HTML Living Standard. 15 Rendering 15.3.10 Form controls",
  69. "sub": "Last Updated 27 August 2024",
  70. },
  71. {
  72. "title": "HTML Living Standard. 15 Rendering 15.5.3 Button layout.",
  73. "href": "https://html.spec.whatwg.org/multipage/rendering.html#button-layout",
  74. "heading": "HTML Living Standard. 15 Rendering 15.5.3 Button layout",
  75. "sub": "Last Updated 27 August 2024",
  76. },
  77. {
  78. "title": "HTML Living Standard. 15 Rendering 15.5.4 The button element.",
  79. "href": "https://html.spec.whatwg.org/multipage/rendering.html#the-button-element-2",
  80. "heading": "HTML Living Standard. 15 Rendering 15.5.4 The button element",
  81. "sub": "Last Updated 27 August 2024",
  82. },
  83. {
  84. "title": "HTML Living Standard. 4.11 Interactive elements 4.11.3.3 Using the button element to define a command.",
  85. "href": "https://html.spec.whatwg.org/multipage/interactive-elements.html#using-the-button-element-to-define-a-command",
  86. "heading": "HTML Living Standard. 4.11 Interactive elements 4.11.3.3 Using the button element to define a command",
  87. "sub": "Last Updated 27 August 2024",
  88. },
  89. {
  90. "title": "HTML 5.2 W3C Recommendation. 4.10.6 The button element. W3C Recommendation, 14 December 2017.",
  91. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/sec-forms.html#the-button-element",
  92. "heading": "HTML 5.2 W3C 勧告. 4.10.6 The button element",
  93. "sub": "W3C勧告、2017年12月14日",
  94. },
  95. {
  96. "title": "HTML 5.2 W3C Recommendation. 10.3.11. Form controls.",
  97. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#form-controls",
  98. "heading": "HTML 5.2 W3C 勧告. 10.3.11. Form controls.",
  99. "sub": "W3C勧告、2017年12月14日",
  100. },
  101. {
  102. "title": "HTML 5.1 W3C Recommendation. 4.10.6 The button element. W3C Recommendation, 1 November 2016.",
  103. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/sec-forms.html#the-button-element",
  104. "heading": "HTML 5.1 W3C 勧告. 4.10.6 The button element",
  105. "sub": "W3C勧告、2016年11月1日",
  106. },
  107. {
  108. "title": "HTML 5.1 W3C Recommendation. 10.3.11. Form controls. W3C Recommendation, 1 November 2016.",
  109. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#form-controls",
  110. "heading": "HTML 5.1 W3C 勧告. 10.3.11. Form controls.",
  111. "sub": "W3C勧告、2016年11月1日",
  112. },
  113. {
  114. "title": "HTML 5 W3C Recommendation. 4.10.6 The button element. W3C Recommendation, 28 October 2014.",
  115. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-button-element",
  116. "heading": "HTML 5 W3C 勧告. 4.10.6 The button element",
  117. "sub": "W3C勧告、2014年10月28日",
  118. },
  119. {
  120. "title": "HTML 5 W3C Recommendation. 10.3.11. Form controls. W3C Recommendation, 28 October 2014.",
  121. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/rendering.html#form-controls",
  122. "heading": "HTML 5 W3C 勧告. 10.3.11. Form controls.",
  123. "sub": "W3C勧告、2014年10月28日",
  124. },
  125. {
  126. "title": "HTML 4.01 Specification W3C Recommendation. 17.5 The BUTTON element. W3C Recommendation 24 December 1999.",
  127. "href": "https://www.w3.org/TR/html401/interact/forms.html#h-17.5",
  128. "heading": "HTML 4.01 Specification W3C 勧告. 17.5 The BUTTON element",
  129. "sub": "W3C勧告1999年12月24日",
  130. },
  131. {
  132. "title": "MDN Web Docs. HTML <button>: The Button element.",
  133. "href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/button",
  134. "heading": "<button>: ボタン要素 - HTML: ハイパーテキストマークアップ言語 | MDN",
  135. },
  136. ],
  137. "version": {
  138. "first": "HTML4",
  139. "latest": "HTML Living Standard",
  140. },
  141. }
  142. }

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

最終確認日

2024-09-01

2.使用可能な箇所

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

button要素を使用できる状態(コンテキスト・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.配置できるコンテンツ

フレージングコンテンツを
配置できます。

button要素の子(内容・コンテンツ・Content)として、0 以上のフレージングコンテンツを配置できます。ただし、子孫にインタラクティブコンテンツがあってはいけません。

フレージングコンテンツである要素(インタラクティブコンテンツ除く)は、script要素, noscript要素, template要素, input要素, output要素, progress要素, meter要素, datalist要素, picture要素, object要素, img要素, video要素, audio要素, canvas要素, map要素, area要素, a要素, ins要素, del要素, abbr要素, b要素, bdi要素, bdo要素, br要素, cite要素, code要素, data要素, dfn要素, em要素, i要素, kbd要素, mark要素, q要素, ruby要素, s要素, samp要素, small要素, span要素, strong要素, sub要素, sup要素, time要素, u要素, var要素, wbr要素, slot要素, text です。

条件付きでインタラクティブコンテンツとなるa要素, input要素, img要素, video要素, audio要素も、子孫にあってはいけない場合があります。

tabindexが指定された要素も、子孫にあってはいけません。

4.属性

グローバル属性と、
disabled,
form,
formaction,
formenctype,
formmethod,
formnovalidate,
formtarget,
name,
popovertarget,
popovertargetaction,
type,
value を
設定できます。

buttonは、グローバル属性とdisabled属性, form属性, formaction属性, formenctype属性, formmethod属性, formnovalidate属性, formtarget属性, name属性, popovertarget属性, popovertargetaction属性, type属性, value属性を設定できます。

  1. <form action="./fmreceive.htm">
  2. <button>ボタン</button>
  3. <input name="nbtSender" type="hidden" value="./fobutton.htm#MAP4NEXT">
  4. </form>

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

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

disabled属性

  1. <button disabled>

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

form属性

  1. <form action="./form.htm">
  2. <button form="ifoForm741">ボタン</button>
  3. </form>
  4. <form id="ifoForm741" action="./fmreceive.htm">
  5. <input name="nbtSender" type="hidden" value="./fobutton.htm#MH3FORM">
  6. </form>

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

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

formaction属性

  1. <form action="./form.htm">
  2. <button formaction="./fmreceive.htm">ボタン</button>
  3. <input name="nbtSender" type="hidden" value="./fobutton.htm#MH3FORMACTION">
  4. </form>

formactionは、送信されたデータを処理するサービスのURLを表します。

formactionが指定されている場合、その値は、スペースで囲まれた可能性のある有効な空でない URL である必要があります。

要素のアクションは、要素が送信ボタンであり、そのような属性がある場合は要素のformactionの値、フォーム所有者のactionがある場合はその値、ない場合は空の文字列です。

typeがsubmitの時に、その要素は送信ボタンであり、typeの欠落値のデフォルトと無効な値のデフォルトは、どちらも送信ボタンの状態です。

typeがsubmitの時に、その要素は送信ボタンであり、typeの欠落値のデフォルトと無効な値のデフォルトは、どちらも送信ボタンの状態です。

formenctype属性

  1. <button formenctype="application/x-www-form-urlencoded">

formenctypeは、フォーム送信に使用するエントリリストのエンコードタイプを指定します。

formenctypeが指定されている場合、その値は、次のキーワードと状態です。

  • 「application/x-www-form-urlencoded」キーワードと対応する状態。
  • 「multipart/form-data」キーワードと対応する状態。
  • 「text/plain」キーワードと対応する状態。

列挙属性と呼ばれる一部の属性は、有限の状態セットを取ります。このような属性の状態は、属性の値、各属性の仕様で指定されたキーワード/状態マッピングのセット、および属性の仕様で指定できる 2 つの特殊な状態を組み合わせることによって生成されます。これらの特殊な状態は、無効な値のデフォルトと欠落した値のデフォルトです。
この属性には欠損値のデフォルトはなく、無効値のデフォルトは application/x-www-form-urlencoded 状態です。

要素の enctype は、要素が送信ボタンであり、そのような属性がある場合は要素のformenctypeの状態になります。それ以外の場合は、フォーム所有者のenctypeの値(状態)です。

typeがsubmitの時に、その要素は送信ボタンであり、typeの欠落値のデフォルトと無効な値のデフォルトは、どちらも送信ボタンの状態です。

formmethod属性

  1. <button formmethod="get">

formmethodは、フォーム送信に使用するHTTPメソッドを指定します。

formmethodは、次のキーワード(keywords)と状態(states)を持つ列挙属性(enumerated attribute)です。

get
フォームが HTTP GET メソッドを使用することを示します。
post
フォームが HTTP POST メソッドを使用することを示します。
dialog
フォームが存在するダイアログボックスがあればそれを閉じ、それ以外の場合は送信しないことをフォームが意図していることを示します。

列挙属性と呼ばれる一部の属性は、有限の状態セットを取ります。このような属性の状態は、属性の値、各属性の仕様で指定されたキーワード/状態マッピングのセット、および属性の仕様で指定できる 2 つの特殊な状態を組み合わせることによって生成されます。これらの特殊な状態は、無効な値のデフォルトと欠落した値のデフォルトです。
この属性には欠損値のデフォルトはなく、無効値のデフォルトは get 状態です。

要素の method は、要素が送信ボタンであり、そのような属性がある場合は要素のformmethodの状態になります。それ以外の場合は、フォーム所有者のmethodの値(状態)です。

typeがsubmitの時に、その要素は送信ボタンであり、typeの欠落値のデフォルトと無効な値のデフォルトは、どちらも送信ボタンの状態です。

formnovalidate属性

  1. <input name="nipText" required><br>
  2. <button formnovalidate>

formnovalidateは、ブール属性です。存在する場合、フォームは送信時に検証されないことを示します。

要素が送信ボタンであり、formnovalidateがある場合、または要素のフォーム所有者のnovalidateが存在する場合は、要素の no-validate 状態は true になり、それ以外の場合は false になります。

typeがsubmitの時に、その要素は送信ボタンであり、typeの欠落値のデフォルトと無効な値のデフォルトは、どちらも送信ボタンの状態です。

例示に於いて、typeがtextのinputにrequiredを指定して、「入力必須」としています。また見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。


formtarget属性

  1. <form action="./fmreceive.htm" target="_top">
  2. <button formtarget="nifTarget">
  3. </form>
  4. <iframe name="nifTarget"></iframe>

formtargetは、フォーム送信に有効なナビゲーション可能なターゲット名またはキーワードを指定します。

target および formtargetコンテンツ属性が指定されている場合、その値は有効なナビゲート可能なターゲット名またはキーワードである必要があります。キーワードは ASCII 大文字と小文字を区別せずに、

  • _blank: new
  • _self: current
  • _parent: parent
  • _top: top
などがあります。

例示ではiframeにnameを指定して、「ターゲット名」としています。また見易さの為に、iframeにスタイルシートで装飾(幅)の指定をしています。

name属性

  1. <button name="nbtName" value="ButtonName">

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

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

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

例示では見易さの為に、inputにスタイルシートで装飾(幅)の指定をしています。

popovertarget属性

  1. <form action="./fmreceive.htm">
  2. <button type="button" popovertarget="idvPopover41">ボタン</button>
  3. <input name="nbtSender" type="hidden" value="./fobutton.htm#MH3POPOVERTARGET">
  4. </form>
  5. <div id="idvPopover41" popover>Pop41</div>

popovertargetは、ポップオーバー要素を切り替え、表示、非表示にする対象とする。

指定されている場合、popovertargetの属性値は、popovertargetを持つボタンと同じツリー内のpopoverを持つ要素の ID である必要があります。

例示ではdivにidを指定して、ID としています。

Pop41

popovertargetaction属性

  1. <form action="./fmreceive.htm">
  2. <button type="button" popovertarget="idvPopover42" popovertargetaction="show">開く</button><br>
  3. <button type="button" popovertarget="idvPopover42" popovertargetaction="hide">閉じる</button>
  4. <input name="nbtSender" type="hidden" value="./fobutton.htm#MH3POPOVERTARGETACTION">
  5. </form>
  6. <div id="idvPopover42" popover>Pop42</div>

popovertargetactionは、対象となるポップオーバー要素を切り替えるか、表示するか、非表示にするかを示します。

popovertargetactionは、次のキーワードと状態を持つ列挙属性です。

toggle
対象となるポップオーバー要素を表示または非表示にします。
show
対象となるポップオーバー要素を表示します。
hide
対象のポップオーバー要素を非表示にします。

列挙属性と呼ばれる一部の属性は、有限の状態セットを取ります。このような属性の状態は、属性の値、各属性の仕様で指定されたキーワード/状態マッピングのセット、および属性の仕様で指定できる 2 つの特殊な状態を組み合わせることによって生成されます。これらの特殊な状態は、無効な値のデフォルトと欠落した値のデフォルトです。
この属性の欠落値のデフォルトと無効値のデフォルトは、どちらも切り替え状態(toggle)です。

例示ではdivにidを指定して、ID としています。


Pop42

type属性

  1. <form action="./fmreceive.htm">
  2. <input name="nipText"><br>
  3. <button type="submit">送信</button>
  4. <button type="reset">リセット</button>
  5. <button type="button">何もしない</button>
  6. <input name="nbtSender" type="hidden" value="./fobutton.htm#MH3TYPE">
  7. </form>

typeは、要素のデータ型 (および関連するコントロール) を制御します。これは、次のキーワードと状態を持つ列挙属性です。

submit
Submit Button フォームを送信します。
reset
Reset Button フォームをリセットします。
button
Button 何もしません。

列挙属性と呼ばれる一部の属性は、有限の状態セットを取ります。このような属性の状態は、属性の値、各属性の仕様で指定されたキーワード/状態マッピングのセット、および属性の仕様で指定できる 2 つの特殊な状態を組み合わせることによって生成されます。これらの特殊な状態は、無効な値のデフォルトと欠落した値のデフォルトです。
この属性の欠落値のデフォルトと無効値のデフォルトは、どちらも送信ボタン状態です。




value属性

  1. <button name="nbtValue" value="ButtonValue">

valueは、フォーム送信の目的で要素の値を指定します。要素の値は、要素のvalueがある場合はその値になり、ない場合は空の文字列になります。

5.Web API

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

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

6.レンダリング

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

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

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

7.気を付ける点

ボタン

ボタンはinput要素でも表せます。なのでbutton要素を用いる事を意識した方が良いと思います。一番の問題は同一のサイトでボタンを表すのにinput要素, button要素を混在してしまう事だと思います。それにより変更などでの取りこぼしなど発生しやすくなります。

8.付記