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

form要素

1.仕様

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

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要素, テキスト です。

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 { display: none !important; }

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要素を使用できる状態(コンテキスト・Context)は、 フローコンテンツを受け入れる要素に配置できます。ただし、祖先にform要素があってはいけません。

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

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

フローコンテンツ を
配置できます。

form要素の子(内容・コンテンツ・Content)として、0 以上のフローコンテンツを配置できます。ただし、子孫にform要素があってはいけません。

フローコンテンツである要素(form要素, form要素除く)は、header要素, footer要素, main要素, address要素, ol要素, ul要素, menu要素, dl要素, table要素, fieldset要素, search要素, hr要素, p要素, pre要素, blockquote要素, figure要素, div要素, dialog要素, slot要素, 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要素, br要素, cite要素, code要素, data要素, dfn要素, em要素, i要素, kbd要素, mark要素, q要素, ruby要素, s要素, samp要素, small要素, span要素, strong要素, sub要素, sup要素, time要素, u要素, var要素, wbr要素, text です。さらにその子孫にも form要素, form要素があってはいけません。

4.属性

グローバル属性と、
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="./fmreceive.htm" accept-charset="UTF-8">
  2. <button name="nbtSender" value="./foform.htm#MH3ACCEPTCHARSET">ボタン</button>
  3. </form>

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

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

action属性

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

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

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

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

autocomplete属性

  1. <form action="./fmreceive.htm" autocomplete="">
  2. <input name="nipText"><br>
  3. <button name="nbtSender" value="./foform.htm#MH3AUTOCOMPLETE">ボタン</button>
  4. </form>

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

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

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

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

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

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


enctype属性

  1. <form action="./fmreceive.htm" enctype="">
  2. <button name="nbtSender" value="./foform.htm#MH3ENCTYPE">ボタン</button>
  3. </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="./fmreceive.htm" method="">
  2. <button name="nbtSender" value="./foform.htm#MH3METHOD">ボタン</button>
  3. </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="./fmreceive.htm" name="nfoForm">
  2. <button name="nbtSender" value="./foform.htm#MH3NAME">ボタン</button>
  3. </form>

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

novalidate属性

  1. <form action="./fmreceive.htm" >
  2. <input name="nipText" required><br>
  3. <button name="nbtSender" value="./foform.htm#MH3NOVALIDATE">ボタン</button>
  4. </form>

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

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

inputにrequiredを指定して、「入力必須」としています。

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


target属性

  1. <form action="./fmreceive.htm" target="nifTarget">
  2. <button name="nbtSender" value="./foform.htm#MH3TARGET">ボタン</button>
  3. </form>
  4. <iframe name="nifTarget"></iframe>

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

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

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

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

rel属性

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

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

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

id属性

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

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

例示では、buttonにformを指定して、formに関連付けます。

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

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

5.Web API

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 length;
  4. getter Element? item(unsigned long index);
  5. getter Element? namedItem(DOMString name);
  6. };
  1. <div>この文書のフォームは、
  2. <div id="idvJsForms150">〇〇</div>
  3. </div>
  4. <script>
  5. document.addEventListener("DOMContentLoaded", function() {
  6. var voForms150 = document.forms;
  7. var voDemo150 = document.getElementById("idvJsForms150");
  8. var veUl = document.createElement("ul");
  9. var veLi = document.createElement("li");
  10. var veSpan = document.createElement("span");
  11. for (var i = 0; i < voForms150.length; i++){
  12. veLi = document.createElement("li");
  13. veSpan = document.createElement("span");
  14. veSpan.textContent = 'index=' + i + '. name="' + voForms150[i].name + '" nbtSender=' + voForms150[i].nbtSender.value;
  15. veLi.appendChild(veSpan);
  16. veUl.appendChild(veLi);
  17. }
  18. if(veUl.childElementCount) {
  19. voDemo150.textContent = "";
  20. while(voDemo150.firstChild){
  21. voDemo150.removeChild(voDemo150.firstChild);
  22. }
  23. voDemo150.appendChild(veUl);
  24. }
  25. });
  26. </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="./fmreceive.htm" accept-charset="UTF-8" autocomplete="on" enctype="application/x-www-form-urlencoded" method="get" name="nfoForm151" novalidate target="_top" rel="next" id="ifoId151">
  2. <input name="nipText" required><br>
  3. <button name="nbtSender" value="./foform.htm#MAP5NEXT">ボタン</button>
  4. </form>
  5. <div>このフォームの各値は、
  6. <ul>
  7. <li>action=&quot;<span id="ispJsAction">〇〇</span>&quot;</li>
  8. <li>accept-charset=&quot;<span id="ispJsAccept">〇〇</span>&quot;</li>
  9. <li>autocomplete=&quot;<span id="ispJsAutocomplete">〇〇</span>&quot;</li>
  10. <li>enctype=&quot;<span id="ispJsEnctype">〇〇</span>&quot;</li>
  11. <li>encoding=&quot;<span id="ispJsEncoding">〇〇</span>&quot;</li>
  12. <li>method=&quot;<span id="ispJsMethod">〇〇</span>&quot;</li>
  13. <li>name=&quot;<span id="ispJsName">〇〇</span>&quot;</li>
  14. <li>novalidate=&quot;<span id="ispJsNovalidate">〇〇</span>&quot;</li>
  15. <li>target=&quot;<span id="ispJsTarget">〇〇</span>&quot;</li>
  16. <li>rel=&quot;<span id="ispJsRel">〇〇</span>&quot;</li>
  17. <li>id=&quot;<span id="ispJsId">〇〇</span>&quot;</li>
  18. </ul>
  19. </div>
  20. <script>
  21. document.addEventListener("DOMContentLoaded", function() {
  22. var voForm151 = document.forms["nfoForm151"];
  23. document.getElementById("ispJsAction").textContent = voForm151.action;
  24. document.getElementById("ispJsAccept").textContent = voForm151.acceptCharset;
  25. document.getElementById("ispJsAutocomplete").textContent = voForm151.autocomplete;
  26. document.getElementById("ispJsEnctype").textContent = voForm151.enctype;
  27. document.getElementById("ispJsEncoding").textContent = voForm151.encoding;
  28. document.getElementById("ispJsMethod").textContent = voForm151.method;
  29. document.getElementById("ispJsName").textContent = voForm151.name;
  30. document.getElementById("ispJsNovalidate").textContent = voForm151.noValidate;
  31. document.getElementById("ispJsTarget").textContent = voForm151.target;
  32. document.getElementById("ispJsRel").textContent = voForm151.rel;
  33. document.getElementById("ispJsId").textContent = voForm151.id;
  34. });
  35. </script>

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

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

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

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

このフォームの各値は、
  • action="〇〇"
  • accept-charset="〇〇"
  • autocomplete="〇〇"
  • enctype="〇〇"
  • encoding="〇〇"
  • method="〇〇"
  • name="〇〇"
  • novalidate="〇〇"
  • target="〇〇"
  • rel="〇〇"
  • relList="〇〇"
  • id="〇〇"

elementsプロパティ

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

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

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

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

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

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


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

6.レンダリング

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

form要素は、ブロックレベルのブロックコンテナであるブロックボックスを生成します。

フォーム関連要素を含むラッパーボックスとしてform要素を無理に配置したり装飾する必要はありません。まぁ配置を意識する必要があるとすれば、複数のform要素がある場合で、フォーム関連要素の配置がフォーム所有者でまとめられず入り混じっている場合でしょう。

7.気を付ける点

フォームの送信

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

フォームの所有者

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

名前

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

8.付記