仕様

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

formフォーム (interactive Form)
カテゴリ
  • フローコンテンツ
  • パルパブルコンテンツ
種類通常要素
この要素を
使用できる
状態		フローコンテンツを受け入れる要素。
許可されて
いる内容		フローコンテンツ。ただし、form要素の子孫があってはなりません。
属性グローバル属性,
action
送信先
enctype
フォーム送信に使用するエントリリストのエンコーディングタイプ
method
HTTPメソッド
novalidate
検証しない
target
表示する場所
accept-charset
フォーム送信に使用する文字エンコード
autocomplete
自動入力機能
name
フォームの名前
rel
リンクの種類
text / html
での
タグの省略		省略できません。
許可されて
いるARIA		search, none, presentation.
[既定値 : form (要素にアクセス可能な名前がある場合）]
DOM
インター
フェイス
HTMLFormElement
  1. [Exposed=Window]
  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. readonly 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. };
レンダリング
フローコンテンツ
  1. form {
  2. display: block;
  3. margin-block-end: 1em;
  4. unicode-bidi: isolate;
  5. unicode-bidi: bidi-override;
  6. }
  7. :is(table, thead, tbody, tfoot, tr) > form {
  8. display: none !important;
  9. }

CSS を大雑把に読むと、 フローレイアウトに配置されたときにブロックレベルのボックスを生成します。 ボックスの下余白を１文字分空けます。 などになります。

参加
コンテキスト		ブロックフォーマットコンテキスト
確立
コンテキスト		ブロックフォーマットコンテキスト
form要素は、フォームに関連付けられた要素のコレクションを介して操作できるハイパーリンクを表します。

その一部は、処理のためにサーバーに送信できる編集可能な値を表すことができます。

  1. <div>
  2. <form action="./fmreceive.htm">
  3. <input name="nipInput" value="abc">
  4. <button name="nbtSender" value="./fmform.htm">ボタン</button>
  5. <br>受信用の<br>ページへ
  6. </form>
  7. </div>

受信用の
ページへ
参照元
  1. HTML Living Standard. 4.10.3 The form element
  2. HTML Living Standard. 15 Rendering 15.3.3 Flow content
  3. HTML 5.2 W3C 勧告. 4.10.3 The form element
  4. HTML 4.01 Specification W3C 勧告. 17.3 The FORM element
  5. MDN Web Docs. HTML <form>:

使用可能な箇所

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

form要素は、フローコンテンツを受け入れる要素に配置できます。
form要素は form要素の子孫があってはならないので、form要素および form要素を祖先に持つ要素には配置できません。

  1. <div>
  2. <form>フォーム</form>
  3. </div>

フローコンテンツを配置できる div要素のコンテンツの一部として、form要素を配置できます。

フォーム

配置できるコンテンツ

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

form要素は、フローコンテンツを配置できます。ただし、form要素の子孫があってはなりません。
フォーム関連要素を子孫に持つと、暗示的に form要素と関連付けられます。ただし明示的に関連付ける方法もあるので、子孫にフォーム関連要素を配置する事が必然ではありません。 子孫にフォーム関連要素もなく、フォーム関連要素との明示的な関連付けもない記述は、用途としては不適切です。 (このサイトでの例示では、送信等の安全の為に意図的に form要素とフォーム関連要素との関連付けを避けている箇所もあります。)

  1. <form><div>フォーム</div></form>

form要素のコンテンツの一部として、フローコンテンツである div要素を配置できます。

フォーム

属性

action属性

  1. <form action="./fmreceive.htm">
  2. <input name="nipInput" value="abc">
  3. <button name="nbtSender" value="./fmform.htm">ボタン</button>
  4. <br>受信用の<br>ページへ
  5. </form>

action属性は、URL を指定します。ブラウザーがフォーム情報をサーバーに送信する宛先です。
この値は、input要素, button要素の formaction属性によって上書きが可能です。


受信用の
ページへ

enctype属性

  1. <form enctype="application/x-www-form-urlencoded">フォーム</form>

enctype属性は、エンコード方法を指定します。ブラウザーがフォーム情報をサーバーに送信するために使用するフォームデータのエンコード方法です。
この値は、input要素, button要素の formenctype属性によって上書きが可能です。

method属性

  1. <form method="get">フォーム</form>

method属性は、HTTP メソッドを指定します。ブラウザーがフォーム情報を送信するために使用する HTTP メソッドです。既定値は "get" です。
この値は、input要素, button要素の formmethod属性によって上書きが可能です。

novalidate属性

  1. <form novalidate>フォーム</form>

novalidate属性は、検証しないように指定する論理属性です。フォームデータ送信時に内容を検証しないようにします。
この値は、input要素, button要素の formnovalidate属性によって上書きが可能です。

target属性

  1. <form action="./fmreceive.htm" target="_blank">
  2. <input name="nipInput" value="abc">
  3. <button name="nbtSender" value="./fmform.htm">ボタン</button>
  4. <br>新しい枠で<br>受信用の<br>ページへ
  5. </form>

target属性は、表示する場所を指定します。フォームの送信後に受信したレスポンスを表示する場所を示すユーザー定義の名前、もしくはアンダースコアから始まる標準化されたキーワードです。 既定値は、"_self" です。"_self" は、現在と同じ場所に表示します。
この値は、input要素, button要素の formtarget属性によって上書きが可能です。


新しい枠で
受信用の
ページへ

accept-charset属性

  1. <form accept-charset="UTF-8">フォーム</form>

accept-charset属性は、フォーム送信に使用する文字エンコーディングを指定します。

autocomplete属性

  1. <form action="./fmreceive.htm" autocomplete="on">
  2. <input name="nipInput">
  3. <button name="nbtSender" value="./fmform.htm">ボタン</button>
  4. <br>受信用の<br>ページへ
  5. </form>

autocomplete属性は、フォームのコントロールの自動入力機能のデフォルト設定を指定します。 既定値は on です。on はブラウザーはユーザーが以前入力した値を元に、値の自動補完を行うことができます。


受信用の
ページへ

name属性

  1. <form name="nfmName">フォーム</form>

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

rel属性

  1. <form rel="next">フォーム</form>

rel属性は、フォーム要素のrel属性は、要素が作成するリンクの種類を指定します。属性の値は、スペースで区切られた一意のトークンの順不同のセットである必要があります。

id属性

  1. <form action="./fmreceive.htm" id="ifmForm">
  2. </form>
  3. <input form="ifmForm" name="nipInput">
  4. <button form="ifmForm" name="nbtSender" value="./fmform.htm">ボタン</button>
  5. <br>受信用の<br>ページへ

id属性は、要素の一意の識別子（ID）を指定するグローバル属性です。
HTML要素で指定する場合、id属性値は要素のツリー内のすべてのIDの中で一意である必要があり、少なくとも1つの文字が含まれている必要があります。 値には、ASCII空白を含めないでください。 IDの形式には他の制限はありません。特に、IDは数字のみで構成することも、数字で開始することも、アンダースコアで開始することも、句読点のみで構成することもできます。
要素の一意の識別子は、さまざまな目的に使用できます。特に、フラグメントを使用してドキュメントの特定の部分にリンクする方法として、スクリプトで要素をターゲットにする方法として、 およびCSSから特定の要素のスタイルを設定する方法として使用できます。
フォームではフォーム関連要素が form属性に form要素の id属性の値(form要素の一意の識別子) を指定して、フォームに関連付けします。


受信用の
ページへ

気を付ける点

フォーム関連要素を内容として含んで送信が関わります。特に action属性は、フォーム送信に使用する URL ですので注意が必要です。さらにこの値は、button要素, input要素の formaction属性によって上書きが可能です。
送信する指示をする要素は type属性が submit である button要素か、type属性が submit, image である input要素が送信ボタンとなります。type属性の既定値は button要素が submit で、input要素が text です。