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

form要素

1.仕様

FORM要素は、
フォームに関連付けられた
要素のコレクションを介して
操作できるハイパーリンクを
表します。
その一部は、処理の為に
サーバーに送信できる
編集可能な値を
表す事ができます。

FORM - - (%Flow)* -(form) -- interactive form. (Normal elements.) [Flow|Palpable] --

form

フォーム (interactive form)

種類

通常要素

カテゴリ

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

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

フローコンテンツを受け入れる要素は、<body>要素, <section>要素, <nav>要素, <aside>要素, <article>要素, <header>要素, <footer>要素, <main>要素, <address>要素, <li>要素, <dt>要素, <dd>要素, <caption>要素, <th>要素, <td>要素, <form>要素, <fieldset>要素, <search>要素, <blockquote>要素, <figure>要素, <figcaption>要素, <div>要素, <dialog>要素, <details>要素 です。

コンテンツモデル
0個以上のフローコンテンツ (<form>要素 を除く)

0個以上のフローコンテンツが配置できます。ですが、<form>要素は子孫に持てません。

<form>要素を除くフローコンテンツに分類される要素は、<header>要素, <footer>要素, <main>要素, <address>要素, <ol>要素, <ul>要素, <menu>要素, <dl>要素, <table>要素, <fieldset>要素, <search>要素, <hr>要素, <p>要素, <pre>要素, <blockquote>要素, <figure>要素, <div>要素, <dialog>要素, <section>要素, <nav>要素, <aside>要素, <article>要素, <h1>要素, <h2>要素, <h3>要素, <h4>要素, <h5>要素, <h6>要素, <hgroup>要素, <script>要素, <noscript>要素, <template>要素, <input>要素, <textarea>要素, <select>要素, <label>要素, <button>要素, <output>要素, <progress>要素, <meter>要素, <datalist>要素, <picture>要素, <object>要素, <img>要素, <iframe>要素, <embed>要素, <video>要素, <audio>要素, <canvas>要素, <map>要素, <area>要素, <a>要素, <details>要素, <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>要素, テキスト, <meta>要素, <link>要素 です。

form要素の子孫はありません。

タグの省略

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

コンテンツ属性
グローバル属性 他
accept-charset属性
フォーム送信に使用する文字エンコーディング
action属性
フォーム送信に使用するURL
autocomplete属性
フォーム内のコントロールの自動入力機能のデフォルト設定
enctype属性
フォーム送信に使用するエントリリストのエンコードタイプ
method属性
フォーム送信に使用するHTTPメソッド
name属性
document.forms API で使用するフォームの名前
novalidate属性
フォーム送信時のフォーム コントロールの検証をバイパスする
target属性
フォーム送信にナビゲート可能
rel属性
要素が作成するリンクの種類を制御
DOM インターフェイス
HTMLFormElement
  1. [Exposed=Window, LegacyOverrideBuiltIns, LegacyUnenumerableNamedProperties]
  2. interface HTMLFormElement : HTMLElement {
  3. [HTMLConstructor] constructor();
  4.  
  5. [CEReactions] attribute DOMString acceptCharset;
  6. [CEReactions] attribute USVString action;
  7. [CEReactions] attribute DOMString autocomplete;
  8. [CEReactions] attribute DOMString enctype;
  9. [CEReactions] attribute DOMString encoding;
  10. [CEReactions] attribute DOMString method;
  11. [CEReactions] attribute DOMString name;
  12. [CEReactions] attribute boolean noValidate;
  13. [CEReactions] attribute DOMString target;
  14. [CEReactions] attribute DOMString rel;
  15. [SameObject, PutForwards=value] readonly attribute DOMTokenList relList;
  16.  
  17. [SameObject] readonly attribute HTMLFormControlsCollection elements;
  18. attribute unsigned long length;
  19. getter Element (unsigned long index);
  20. getter (RadioNodeList or Element) (DOMString name);
  21.  
  22. undefined submit();
  23. undefined requestSubmit(optional HTMLElement? submitter = null);
  24. [CEReactions] undefined reset();
  25. boolean checkValidity();
  26. boolean reportValidity();
  27. };
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
暗黙的="form" ARIAロール="あり" aria-* 属性="GlobalAny"

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

作成者が要素に指定してもよい ARIAロール値は、 none, presentation, search です。

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

レンダリング
ブロックボックス
フローコンテンツ
  1. form {
  2. display: block;
  3. margin-block-end: 1em;
  4. unicode-bidi: isolate;
  5. }
  6. :is(table, thead, tbody, tfoot, tr) > form {
  7. display: none !important;
  8. }

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

説明
form要素は、フォーム関連要素のコレクションを通じて操作できるハイパーリンクを表します。その一部は、処理のためにサーバーに送信できる編集可能な値を表すことができます。
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>form要素の例 - (Example of form element) | 離珠のHTMLでしぃ！</title>
  6. </head>
  7. <body>
  8. <h1>form要素の例</h1>
  9. <form action="../Html/fmreceive.htm">
  10. <input name="nipInput" value="abc">
  11. <button name="nbtSender" value="../Html/exform.htm">ボタン</button>
  12. <br>受信用の<br>ページへ
  13. </form>
  14. </body>
  15. </html>

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

参照元
参照元
JSONデータ
JSON形式での、データのイメージです。
  1. {
  2. "form": {
  3. "check": "2024-09-01",
  4. "group": "Form",
  5. "element": "- - (%Flow)* -(form) -- interactive form. (Normal elements.) [Flow|Palpable] --",
  6. "attlist": {
  7. "%Global;": "",
  8. "accept-charset": "%Charsets; #IMPLIED -- Character encodings to use for form submission --",
  9. "action": "%URI; #IMPLIED -- URL to use for form submission --",
  10. "autocomplete": "(on|off) on -- Default setting for autofill feature for controls in the form --",
  11. "enctype": "%ContentType; application/x-www-form-urlencoded -- Entry list encoding type to use for form submission --",
  12. "method": "(get|post|dialog) get -- Variant to use for form submission--",
  13. "name": "CDATA #IMPLIED -- Name of form to use in the document.forms API --",
  14. "novalidate": "(novalidate) #IMPLIED -- Bypass form control validation for form submission --",
  15. "target": "%FrameTarget; #IMPLIED -- Navigable for form submission --",
  16. "rel": "%LinkTypes; #IMPLIED -- Relationship from the current document --",
  17. },
  18. "comment": "フォーム (interactive form)",
  19. "point": "フォーム関連要素のコレクションを通じて操作できるハイパーリンクを表します。その一部は、処理のためにサーバーに送信できる編集可能な値を表すことができます。",
  20. "kind": "Normal",
  21. "categories": [
  22. "Flow",
  23. "Palpable",
  24. ],
  25. "used": "parent (%Flow)*",
  26. "contentmodel": "form (%Flow)* -(form)",
  27. "contentmodelsupplement": "form要素の子孫はありません。",
  28. "tag": [
  29. "-",
  30. "-",
  31. ],
  32. "attributes": {
  33. "accept-charset": "フォーム送信に使用する文字エンコーディング",
  34. "action": "フォーム送信に使用するURL",
  35. "autocomplete": "フォーム内のコントロールの自動入力機能のデフォルト設定",
  36. "enctype": "フォーム送信に使用するエントリリストのエンコードタイプ",
  37. "method": "フォーム送信に使用するHTTPメソッド",
  38. "name": "document.forms API で使用するフォームの名前",
  39. "novalidate": "フォーム送信時のフォーム コントロールの検証をバイパスする",
  40. "target": "フォーム送信にナビゲート可能",
  41. "rel": "要素が作成するリンクの種類を制御",
  42. },
  43. "dominterface": "HTMLFormElement",
  44. "rendering": [
  45. "Flow",
  46. "Bidirectional",
  47. ],
  48. "reference": [
  49. {
  50. "title": "HTML Living Standard. 4.10.3 The form element.",
  51. "href": "https://html.spec.whatwg.org/multipage/forms.html#the-form-element",
  52. "heading": "HTML Living Standard. 4.10.3 The form element",
  53. "sub": "Last Updated 27 August 2024",
  54. },
  55. {
  56. "title": "HTML Living Standard. 15 Rendering 15.3.3 Flow content.",
  57. "href": "https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3",
  58. "heading": "HTML Living Standard. 15 Rendering 15.3.3 Flow content",
  59. "sub": "Last Updated 27 August 2024",
  60. },
  61. {
  62. "title": "HTML 5.2 W3C Recommendation. 4.10.3 The form element. W3C Recommendation, 14 December 2017.",
  63. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/sec-forms.html#the-form-element",
  64. "heading": "HTML 5.2 W3C 勧告. 4.10.3 The form element",
  65. "sub": "W3C勧告、2017年12月14日",
  66. },
  67. {
  68. "title": "HTML 5.2 W3C Recommendation. 10.3.3. Flow content.",
  69. "href": "https://www.w3.org/TR/2017/REC-html52-20171214/rendering.html#non-replaced-elements-flow-content",
  70. "heading": "HTML 5.2 W3C 勧告. 10.3.3. Flow content.",
  71. "sub": "W3C勧告、2017年12月14日",
  72. },
  73. {
  74. "title": "HTML 5.1 W3C Recommendation. 4.10.3 The form element. W3C Recommendation, 1 November 2016.",
  75. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/sec-forms.html#the-form-element",
  76. "heading": "HTML 5.1 W3C 勧告. 4.10.3 The form element",
  77. "sub": "W3C勧告、2016年11月1日",
  78. },
  79. {
  80. "title": "HTML 5.1 W3C Recommendation. 10.3.3. Flow content. W3C Recommendation, 1 November 2016.",
  81. "href": "https://www.w3.org/TR/2016/REC-html51-20161101/rendering.html#non-replaced-elements-flow-content",
  82. "heading": "HTML 5.1 W3C 勧告. 10.3.3. Flow content.",
  83. "sub": "W3C勧告、2016年11月1日",
  84. },
  85. {
  86. "title": "HTML 5 W3C Recommendation. 4.10.3 The form element. W3C Recommendation, 28 October 2014.",
  87. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/forms.html#the-form-element",
  88. "heading": "HTML 5 W3C 勧告. 4.10.3 The form element",
  89. "sub": "W3C勧告、2014年10月28日",
  90. },
  91. {
  92. "title": "HTML 5 W3C Recommendation. 10.3.3. Flow content. W3C Recommendation, 28 October 2014.",
  93. "href": "https://www.w3.org/TR/2014/REC-html5-20141028/rendering.html#flow-content-0",
  94. "heading": "HTML 5 W3C 勧告. 10.3.3. Flow content.",
  95. "sub": "W3C勧告、2014年10月28日",
  96. },
  97. {
  98. "title": "HTML 4.01 Specification W3C Recommendation. 17.3 The FORM element. W3C Recommendation 24 December 1999.",
  99. "href": "https://www.w3.org/TR/html401/interact/forms.html#h-17.3",
  100. "heading": "HTML 4.01 Specification W3C 勧告. 17.3 The FORM elements",
  101. "sub": "W3C勧告1999年12月24日",
  102. },
  103. {
  104. "title": "HTML 3.2 Reference Specification. W3C Recommendation 14-Jan-1997.",
  105. "href": "https://www.w3.org/TR/2018/SPSD-html32-20180315/#form",
  106. "heading": "HTML 3.2 Reference Specification",
  107. "sub": "W3C勧告1997年1月14日",
  108. },
  109. {
  110. "title": "Hypertext Markup Language - 2.0. November 1995.",
  111. "href": "https://www.ietf.org/rfc/rfc1866.txt",
  112. "heading": "Hypertext Markup Language - 2.0",
  113. "sub": "November 1995",
  114. },
  115. {
  116. "title": "MDN Web Docs. HTML <form>: The Form element.",
  117. "href": "https://developer.mozilla.org/ja/docs/Web/HTML/Element/form",
  118. "heading": "<form>: フォーム要素 - HTML: ハイパーテキストマークアップ言語 | MDN",
  119. },
  120. ],
  121. "version": {
  122. "first": "HTML2",
  123. "latest": "HTML Living Standard",
  124. },
  125. }
  126. }

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

最終確認日

2024-09-01

2.使用できるコンテキスト

form要素は、
フローコンテンツを
受け入れる要素に
配置できます。

<form>要素が使用できるコンテキスト(Context・文脈)は、フローコンテンツを受け入れる要素のコンテンツとしてです。ただし、祖先に<form>要素があってはいけません。

フローコンテンツをコンテンツの一部として配置できる要素(<form>要素除く)は、以下の各要素です。

body
form
  1. <body>
  2. <form action="../Html/fmreceive.htm">
  3. <input name="nipInput" value="abc">
  4. <button name="nbtSender" value="../Html/spform.htm">ボタン</button>
  5. </form>
  6. </body>

<body>要素のコンテンツの一部として、フローコンテンツである<form>要素を配置している例です。

3.コンテンツモデル

form要素は、
フローコンテンツを
配置できます。

<form>要素の子や子孫としてどのようなコンテンツ(Content・内容) が含まれなければならないかというと、0 以上のフローコンテンツです。ただし、子孫に<form>要素があってはいけません。

フローコンテンツに分類される要素(<form>要素除く)は、以下の各要素です。

form
Flow
content
  1. <body>
  2. <form action="../Html/fmreceive.htm">
  3. <input name="nipInput" value="abc">
  4. <button name="nbtSender" value="../Html/spform.htm">ボタン</button>
  5. </form>
  6. </body>

<form>要素のコンテンツの一部として、フローコンテンツである<input>要素, <button>要素を配置している例です。

フォーム関連要素は、デフォルトで、その最も近い祖先の<form>要素に関連付けられます。つまり、<form>要素の子孫に、それに関連付けるフォーム関連要素を配置すると、フォーム所有者とフォーム関連要素の関連が分かりやすいです。

配置に関係なくフォーム所有者とフォーム関連要素の関連付けをする方法もありますので、無理に<form>要素の子孫に、それに関連付けるフォーム関連要素を配置する必要はありません。

4.コンテンツ属性

form要素は、
グローバル属性と、
accept-charset属性,
action属性,
autocomplete属性,
enctype属性,
method属性,
name属性,
novalidate属性,
target属性,
rel属性 を
配置できます。

<form>要素に指定することができる属性は、グローバル属性と accept-charset属性, action属性, autocomplete属性, enctype属性, method属性, name属性, novalidate属性, target属性, rel属性 です。

accept-charset属性

  1. <form action="../Html/fmreceive.htm" accept-charset="UTF-8">
  2. <button name="nbtSender" value="../Html/spform.htm#MH3ACCEPTCHARSET">ボタン</button>
  3. </form>

accept-charset属性 は、送信に使用される文字エンコーディング(character encoding.)を指定します。指定する場合、値は ASCII 大文字と小文字を区別せずに指定します。

属性値の"UTF-8"の例示は推奨でもありますが、その文書や受信側都合で別のコードである必要もあります。その場合は、別途にお調べ下さい。というか、普段はこの属性は省略して、必要に応じて記述するべきかと思います。

※ ボタンを押すと、受信用のページへ送信します。

action属性

  1. <form action="../Html/fmreceive.htm">
  2. <button name="nbtSender" value="../Html/spform.htm#MH3ACTION">ボタン</button>
  3. </form>

action属性 は、フォーム送信に使用するURL(Uniform Resource Locator.)を指定します。指定する場合、値は スペースで囲まれる可能性がある有効な空でない URL の値を持たなければなりません。

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

属性値の"../Html/fmreceive.htm"の例示は当サイトで送信の例示用(受信用)に用意したページです。相対指定での記述を採用したので、配置が変わった場合などは書き換えが必要です。

※ ボタンを押すと、受信用のページへ送信します。

autocomplete属性

  1. <form action="../Html/fmreceive.htm" autocomplete="" id="JFO403">
  2. <input name="nipInput" value="abc">
  3. <button name="nbtSender" value="../Html/spform.htm#MH3AUTOCOMPLETE">ボタン</button>
  4. </form>

autocomplete属性 は、フォーム内のコントロールの自動入力フィールドのデフォルト値を指定します。

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

on
フォームコントロールでは、自動入力フィールド名がデフォルトで「オン」に設定されます。
off
フォームコントロールでは、自動入力フィールド名がデフォルトで「オフ」に設定されます。

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

例示として用意していますが、初期の状態で on にしても、提示する値がないので違いは判りません。また off はクリアではないので、その後で on にすると提示すべき値が再度表示されます。

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

enctype属性

  1. <form action="../Html/fmreceive.htm" enctype="" id="JFO404">
  2. <input name="nipInput" value="abc">
  3. <button name="nbtSender" value="../Html/spform.htm#MH3ENCTYPE">ボタン</button>
  4. </form>

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

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

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

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

要素の enctype は、これら 3 つの状態の 1 つです。要素が送信ボタンであり、formenctype属性を持つ場合、要素の enctype はその属性の状態になります。それ以外の場合は、フォーム所有者のenctype属性の状態です。

一応は例示としてデモを提示していますが、この記述では違いが現れないと思います。必要に応じて指定して下さい。

method属性

  1. <form action="../Html/fmreceive.htm" method="" id="JFO405">
  2. <input name="nipInput" value="abc">
  3. <button name="nbtSender" value="../Html/spform.htm#MH3METHOD">ボタン</button>
  4. </form>

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

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

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

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

要素の method は、これら 3 つの状態の 1 つです。要素が送信ボタンであり、formmethod属性を持つ場合、要素の method はその属性の状態になります。それ以外の場合は、フォーム所有者のmethod属性の状態です。

一応は例示としてデモを提示していますが、この例示で用意している送信先では受信データを処理していないので効果が分かり難いです。必要に応じて指定して下さい。一応は URL で送信データが見えるか否かの違いは判りますが。尚、post には受信側で対応していないので、どこから送信されたか判らない仕様です。「戻る」で戻るか上位ページへリンクを辿るかして下さい。

name属性

  1. <form action="../Html/fmreceive.htm" name="nfoForm406">
  2. <button name="nbtSender" value="../Html/spform.htm#MH3NAME">ボタン</button>
  3. </form>

name属性 は、document.forms API で使用するフォームの名前(Name of form.)を指定します。値は空の文字列であってはならず、値は、その値が含まれるフォームコレクション内のフォーム要素の中で一意である必要があります (存在する場合)。

novalidate属性

  1. <form action="../Html/fmreceive.htm" id="JFO407">
  2. <input name="nipInput" required="true">
  3. <button name="nbtSender" value="../Html/spform.htm#MH3NOVALIDATE">ボタン</button>
  4. </form>

novalidate属性 はブール属性で、存在する場合はフォーム送信時のフォームコントロールの検証をバイパスする事を指定します。

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

<input>要素にrequired属性を指定して、「入力必須」としています。

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

target属性

  1. <form action="../Html/fmreceive.htm" target="nifTarget">
  2. <button name="nbtSender" value="../Html/spform.htm#MH3TARGET">ボタン</button>
  3. </form>
  4. <iframe name="nifTarget" style="width: 95%"></iframe>

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

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

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

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

rel属性

  1. <form action="../Html/fmreceive.htm" rel="next">
  2. <button name="nbtSender" value="../Html/spform.htm#MH3REL">ボタン</button>
  3. </form>

rel属性 は、要素が作成するリンクの種類を制御します。属性の値は、スペースで区切られた一意のトークンの順序のないセットである必要があります。許可されるキーワードとその意味は、4.6.7 Link types(HTML Living Standard.)で定義されています。

一応は例示としてデモを提示していますが、動作に効果のある属性ではないと思います。なのでキーワードの動的指定の提示も行っていません。

id属性

  1. <form action="../Html/fmreceive.htm" id="FFO410"></form>
  2. <button form="FFO410" name="nbtSender" value="../Html/spform.htm#MH3ID">ボタン</button>

id属性 は、IDを表すグローバル属性です。属性値は要素のツリー内のすべての ID の中で一意である必要があり、少なくとも 1 つの文字が含まれている必要があります。値には ASCII 空白を含めることはできません。

例示では、<button>要素にform属性を指定して、<form>要素に関連付けます。

他の属性で提示している例示では、<form>要素の子孫として<button>要素等を配置する事で、関連付けをしています。

尚、id属性を<form>要素に指定したからといって、各フォーム関連要素にform属性を指定して、関連付けが必須となる訳ではありません。

5.DOM インターフェイス

documentの
プロパティである
formsは、
文書内の
form要素
(HTMLFormElement
オブジェクト)の
HTMLCollectionを
返します。

<form>要素単体を表すプロパティはないですが、<form>要素をフィルターとする Documentノードをルートとする HTMLCollection を返すformsがあります。document.forms[name]などと指定する事で、当該フォームを取得できます。document.forms[index]などと添え字を 0 から 件数 - 1 まで指定する事で、文書内のフォームを一通り取得できます。

formsプロパティ

  1. [Exposed=Window, LegacyUnenumerableNamedProperties]
  2. interface HTMLCollection {
  3. readonly attribute unsigned long lang;
  4. getter Element? item(unsigned long index);
  5. getter Element? namedItem(DOMString name);
  6. };
  1. <div>
  2. この文書のフォームは、
  3. <div id="JDV501">〇〇</div>
  4. </div>
  5. <script>
  6. document.addEventListener("DOMContentLoaded", function() {
  7. let _loJsForms501 = document.forms;
  8. let _loJsDemo501 = document.getElementById("JDV501");
  9. let _loJsList501 = document.createElement("ol");
  10. for (let _lnJsIdx = 0; _lnJsIdx < _loJsForms501.length; _lnJsIdx++) {
  11. let _loJsItem501 = document.createElement("li");
  12. let _loJsSpan501 = document.createElement("span");
  13. _loJsSpan501.textContent = 'index=' + _lnJsIdx + '. name="' + _loJsForms501[_lnJsIdx].name + (_loJsForms501[_lnJsIdx].nbtSender ? '" nbtSender=' + _loJsForms501[_lnJsIdx].nbtSender.value : (_loJsForms501[_lnJsIdx]?'" action="' + _loJsForms501[_lnJsIdx].action + '"':'"'));
  14. _loJsItem501.appendChild(_loJsSpan501);
  15. _loJsList501.appendChild(_loJsItem501);
  16. }
  17. if (_loJsList501.childElementCount) {
  18. _loJsDemo501.textContent = "";
  19. while (_loJsDemo501.firstChild) {
  20. _loJsDemo501.removeChild(_loJsDemo501.firstChild);
  21. }
  22. _loJsDemo501.appendChild(_loJsList501);
  23. }
  24. });
  25. </script>

コレクションは、ノードのリストを表すオブジェクトです。

例示では、この文書の<form>要素の一覧リストを出力するJavascriptコードとその実行結果を想定しています。
作成者の決め事として、送信ボタンに送信元が分かる値を nbtSender という名前で用意するという事にしているので、ついででそれを出力しています。

目的の為の手段の提示ではなく、この方法でこんな事が出来るという機能の提示です。これを元にいろいろ書き換える事を想定していて、ただ機能を提示しています。故に簡素化, 処理速度などは一切考えていません。

例示で表示する為に、HTML文書の読み込みと解析が終了した時に処理するコードとしています。 また見易さの為に、属性値の部分に対してスタイルシートで文字列の途中で折り返す様に指定しています。

document の querySelectorメソッド等を用いる事も考えられますが、このプロパティで充分でしょう。名前で特定したい場合でも、属性セレクタで同等の事は出来ますが。

この文書のフォームは、
〇〇

コンテンツ属性

コンテンツ属性 IDL属性 提備考
accept-charset acceptCharset
action action
autocomplete autocomplete IDL属性は、既知の値のみに制限されます。
enctype enctype
enctype encoding 既知の値のみに制限された enctypeコンテンツ属性を反映
method method
name name
novalidate noValidate
target target
rel rel
rel relList relコンテンツ属性を反映
  1. <form action="../Html/fmreceive.htm" accept-charset="UTF-8" autocomplete="on" enctype="application/x-www-form-urlencoded" method="get" name="nfoForm502" novalidate target="_top" rel="next">
  2. <input name="nipText" required>
  3. <button name="nbtSender" value="./spform.htm#MAP5NEXT">ボタン</button>
  4. </form>
  5. <div>
  6. このフォームの各値は、
  7. <div id="JDV502">〇〇</div>
  8. </div>
  9. <script>
  10. document.addEventListener("DOMContentLoaded", function() {
  11. let _loJsForm502 = document.forms["nfoForm502"];
  12. let _loJsDemo502 = document.getElementById("JDV502");
  13. _loJsDemo502.textContent = "";
  14. let _loJsList502 = document.createElement("ul");
  15. _loJsDemo502.appendChild(_loJsList502);
  16. _loJsList502.appendChild(document.createElement("li")).appendChild(document.createElement("span")).textContent = 'action="' + _loJsForm502.action + '"';
  17. _loJsList502.appendChild(document.createElement("li")).appendChild(document.createElement("span")).textContent = 'acceptCharset="' + _loJsForm502.acceptCharset + '"';
  18. _loJsList502.appendChild(document.createElement("li")).appendChild(document.createElement("span")).textContent = 'autocomplete="' + _loJsForm502.autocomplete + '"';
  19. _loJsList502.appendChild(document.createElement("li")).appendChild(document.createElement("span")).textContent = 'enctype="' + _loJsForm502.enctype + '"';
  20. _loJsList502.appendChild(document.createElement("li")).appendChild(document.createElement("span")).textContent = 'encoding="' + _loJsForm502.encoding + '"';
  21. _loJsList502.appendChild(document.createElement("li")).appendChild(document.createElement("span")).textContent = 'method="' + _loJsForm502.method + '"';
  22. _loJsList502.appendChild(document.createElement("li")).appendChild(document.createElement("span")).textContent = 'name="' + _loJsForm502.name + '"';
  23. _loJsList502.appendChild(document.createElement("li")).appendChild(document.createElement("span")).textContent = 'noValidate="' + _loJsForm502.noValidate + '"';
  24. _loJsList502.appendChild(document.createElement("li")).appendChild(document.createElement("span")).textContent = 'target="' + _loJsForm502.target + '"';
  25. _loJsList502.appendChild(document.createElement("li")).appendChild(document.createElement("span")).textContent = 'rel="' + _loJsForm502.rel + '"';
  26. });
  27. </script>

HTMLの要素に記述(設定)する属性を、コンテンツ属性と呼び、DOM インターフェイス での属性をIDL属性と呼んでいます。

この例示は、ひとつの<form>要素を特定してコンテンツ属性に対応するIDL属性の値を得る例示です。コンテンツ属性とIDL属性の対応表の実例のようなものです。

例示で表示する為に、HTML文書の読み込みと解析が終了した時に処理するコードとしています。 また見易さの為に、属性値の部分に対してスタイルシートで文字列の途中で折り返す様に指定しています。

尚、getAttributeメソッドなどを使って、コンテンツ属性の値を操作する事も出来ます。

このフォームの各値は、
〇〇

elementsプロパティ

  1. [Exposed=Window]
  2. interface HTMLFormControlsCollection : HTMLCollection {
  3. // inherits length and item()
  4. getter (RadioNodeList or Element)? namedItem(DOMString name);
  5. // shadows inherited namedItem()
  6. };
  1. [Exposed=Window]
  2. interface RadioNodeList : NodeList {
  3. attribute DOMString value;
  4. };
  1. <form action="../Html/fmreceive.htm" name="nfoForm503">
  2. <input name="nipInput" onchange="fuJsElements503();">
  3. <button name="nbtSender" value="../Html/spform.htm#MAP5NEXT">ボタン</button>
  4. </form>
  5. <div>
  6. このフォームのフォームコントロールは、
  7. <div id="JDV503">〇〇</div>
  8. </div>
  9. <script>
  10. var fuJsElements503 = function() {
  11. let _loJsElements503 = document.forms["nfoForm503"].elements;
  12. let _loJsDemo503 = document.getElementById("JDV503");
  13. let _loJsList503 = document.createElement("ul");
  14. _loJsDemo503.appendChild(_loJsList503);
  15. for (let _lnJsIdx = 0; _lnJsIdx < _loJsElements503.length; _lnJsIdx++) {
  16. _loJsList503.appendChild(document.createElement("li")).appendChild(document.createElement("span")).textContent = 'tagName="' + _loJsElements503[_lnJsIdx].tagName + ' name="' + _loJsElements503[_lnJsIdx].name + ' value="' + _loJsElements503[_lnJsIdx].value + '"';
  17. }
  18. if (_loJsList503.childElementCount) {
  19. _loJsDemo503.textContent = "";
  20. while (_loJsDemo503.firstChild) {
  21. _loJsDemo503.removeChild(_loJsDemo503.firstChild);
  22. }
  23. _loJsDemo503.appendChild(_loJsList503);
  24. }
  25. }
  26. document.addEventListener("DOMContentLoaded", function() {
  27. fuJsElements503();
  28. });
  29. </script>

elements IDL属性は、<form>要素をルートとする HTMLFormControlsCollection を返す必要があります。そのフィルターは、type属性がイメージボタン状態にあるinput要素を除き、form要素がフォーム所有者であるリストされた要素と一致します。歴史的な理由により、これは必須です。

例示では、form要素の子孫にフォーム関連要素を置いてフォーム所有者を関連付けて、そのリストとなる要素のname IDL属性, value IDL属性を取得しています。

目的の為の手段の提示ではなく、この方法でこんな事が出来るという機能の提示です。これを元にいろいろ書き換える事を想定していて、ただ機能を提示しています。故に簡素化, 処理速度などは一切考えていません。

例示で表示する為に、HTML文書の読み込みと解析が終了した時に処理するコードとしています。 また見易さの為に、属性値の部分に対してスタイルシートで文字列の途中で折り返す様に指定しています。

document の querySelectorメソッド等を用いる事も考えられますが、このプロパティで充分でしょう。名前で特定したい場合でも、属性セレクタで同等の事は出来ますが、

このフォームのフォームコントロールは、
〇〇

6.アクセシビリティ

form要素の
暗黙的な
ARIAセマンティクスは、
form role
(アイテムと
オブジェクトの集合を含む
ランドマーク領域。
これらの要素は全体として
フォームを形成します。)
です。

<form>要素の暗黙的なARIAセマンティクスは、role="form" です。
form role は、アイテムとオブジェクトの集合を含むランドマーク領域です。これらの要素は全体としてフォームを形成します。

フォームには、ホスト言語のフォームコントロール、スクリプトコントロール、ハイパーリンクが混在する場合があります。 作成者は、可能な限り、ネイティブホスト言語のセマンティクスを使用してフォームコントロールを作成するようにしてください。 フォームの目的が検索条件の送信である場合、作成者は汎用フォームロールではなく検索ロールを使用するべきです。

作成者は、ロール form を持つ各要素に、フォームの目的を説明する簡潔なラベルを付与しなければなりません。 可視ラベルが存在する場合、作成者は aria-labelledby で可視ラベルを参照すべきです。 作成者は、可能な限り、見出し内にラベルを含めるべきです。 見出しは、標準ホスト言語の見出し要素のインスタンス、またはロール header を持つ要素のインスタンスであっても構いません。

作成者がスクリプトを用いて、本来は onsubmit イベントをトリガーしないユーザーアクション（例えば、ユーザーがフォーム要素の値を変更することでトリガーされるフォーム送信など）に基づいてフォームを送信する場合、作成者はその動作について事前にユーザーに通知するべきです。

ユーザーエージェントは、form の役割を持つ要素をナビゲーションランドマークとして扱うべきです。

作成者が<form>要素に明示的に指定可能なARIA ロール（役割）は、none, presentation, search です。

ARIA の状態とプロパティについては、すべての要素で使用できるグローバルな`aria-*` 属性に加えて、上記のロールに応じて使用可能な`aria-*` 属性が許可されます。

7.レンダリング

  1. form {
  2. display: block;
  3. margin-block-end: 1em;
  4. }

<form>要素のユーザーエージェントレベルのスタイルシートデフォルトでは、displayプロパティの値は block であり、ブロックレベルのブロックコンテナボックス(ブロックボックス) を生成します。

<form>要素の包含ブロックはフローコンテンツを受け入れる要素です。フローコンテンツを受け入れる要素はブロックフォーマットコンテキストを確立しているので、<form>要素はそこに参加します。

フォーム関連要素を含むラッパーボックスとして<form>要素を無理に配置したり装飾する必要はありません。まぁ配置を意識する必要があるとすれば、複数の<form>要素がある場合で、フォーム関連要素の配置がフォーム所有者でまとめられず入り混じっている場合でしょう。 その場合は、フォーム関連要素を文書内の意味で配置して、フォーム所有者は属性で明示する方法を採れば良いでしょう。 そのような事から、<form>要素には、レンダリングの指定は避けた方が良いかと思います。

body要素ブロックフォーマット
コンテキスト
form要素ブロック
フォーマット
コンテキスト
(継続)
fieldset要素コンテンツ
  1. <body>
  2. <form action="../Html/fmreceive.htm">
  3. <fieldset>
  4. <label><input name="nipRadio" type="radio" value="Radio01" checked> Radio01</label>
  5. <label><input name="nipRadio" type="radio" value="Radio02"> Radio02</label>
  6. <button name="nbtSender" value="../Html/spform.htm#MAP7NEXT">ボタン</button>
  7. </fieldset>
  8. </form>
  9. </body>

<body>要素が存在して、その中に<form>要素が存在して、その中に<fieldset>要素がある例です。

<body>要素は、ブロックコンテナであるボックスを生成します。そこには、ブロックレベルのボックスを生成する<form>要素が存在する為、ブロックフォーマットコンテキストが継承, 確立されます。

<form>要素は、ブロックコンテナボックスを生成します。<fieldset>要素は、ブロックレベルのボックスを生成します。この例ではブロックレベルのボックスを生成する要素だけを配置しています。なので、ブロックフォーマットコンテキストを継続します。

尚、この説明は各要素のレンダリングに関する指定が既定値での話で、個々にスタイルを指定した場合はこの限りではありません。

body要素ブロックフォーマット
コンテキスト
form要素インライン
フォーマット
コンテキスト
ルート
インライン
ボックス
button要素コンテンツ
  1. <body>
  2. <form action="../Html/fmreceive.htm">
  3. <input name="nipInput" value="abc">
  4. <button name="nbtSender" value="../Html/spform.htm">ボタン</button>
  5. </form>
  6. </body>

<body>要素が存在して、その中に<form>要素が存在して、その中に<input>要素, <button>要素がある例です。

<body>要素は、ブロックコンテナであるボックスを生成します。そこには、ブロックレベルのボックスを生成する<form>要素が存在する為、ブロックフォーマットコンテキストが継承, 確立されます。

<form>要素は、ブロックコンテナボックスを生成します。<button>要素は、インラインレベルのボックスを生成します。この例ではインラインレベルのボックスを生成する要素だけを配置しています。なので、インラインフォーマットコンテキストを新たに確立します。次に、その要素は、すべてのインラインコンテンツを包むルートインラインボックスも生成します。

尚、この説明は各要素のレンダリングに関する指定が既定値での話で、個々にスタイルを指定した場合はこの限りではありません。

8.気を付ける点

フォームの送信

<form>要素には送信する機能がある訳ですが、フォームが HTTP POST メソッドを使用した場合など検証が面倒です。 それでも検証用に送信先を用意して HTTP GET メソッドに一時的に変えたりして、検証する事をお勧めします。 まぁその場合でも、検証用を本番用に戻す確認が重要になってしまいますが、検証環境の作成の容易さ, 失敗した時の安全性を考えると、送信に関する部分の検証は大事です。

フォームの所有者

フォーム関連要素は、要素のフォーム所有者と呼ばれる<form>要素との関係を持つことができます。そしてフォーム関連要素は、デフォルトで、その最も近い祖先の<form>要素に関連付けられます。その上で<form>要素のコンテンツモデルは、子孫に<form>要素を持たないフローコンテンツです。
この状況からして、<form>要素の子孫の位置に<form>要素を配置してしまった場合に、その子孫の(直近の)<form>要素はどの様に扱われるのか微妙です。

名前

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