HTML5

：

タグ（要素）

：

FORM

　 編集：2022.06.24 by T.A.

→● mdn

ユーザー送信可能フォーム。

この要素を使用できる文脈

フロー内容が期待される場所。

内容モデル

フロー内容、ただし FORM 要素を除く。

text/htmlにおけるタグ省略

どちらのタグも省略不可。

内容属性
解説

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

例

この例は、21つの検索フォームを示す： 

<FORM action="https://www.google.com/search" method="get">
 <LABEL>Google: <INPUT type="search" name="q"></LABEL> <INPUT type="submit" value="Search...">
</FORM>
accept-charset属性

送信に対して使用される文字エンコーディングを提供する。属性が存在する場合、その値は "UTF-8" に一致する ASCII 大文字・小文字不区別でなければならない。[ENCODING]

<FORM accept-charset=utf-8 action="○○.cgi" method=post style="border:1px solid black;">
 …
</FORM>

action属性

フォーム送信に使用する URL。→フォーム送信に対する属性。

<FORM action="○○.cgi" method=post style="border:1px solid black;">
 …
</FORM>

autocomplete属性

フォーム内の制御のオールフィル機能に対するデフォルト設定。列挙属性。

※オートフィル： ¶一般的には自動的に埋め込ませる…だが、ここでは、前回入力された内容が入力候補になるようだ。

値オートフィル状態
on on状態
off off状態

属性は省略されてもよい。欠損値のデフォルトおよび不正値のデフォルトは on 状態である。

off 状態はデフォルトで、フォーム内のフォーム制御がオートフィル フィールド名を "off" に設定されることを示し、on 状態はデフォルトで、フォーム内のフォーム制御がオートフィル フィールド名を "on" に設定されることを示す。

<FORM autocomplete=off>
 入力1：<INPUT name=autocomplete0Input1><BR>
 入力2：<INPUT name=autocomplete0Input2><BR>
</FORM>


<FORM autocomplete>
 入力1：<INPUT name=autocompleteInput1><BR>
 入力2：<INPUT name=autocompleteInput2><BR>
</FORM>

enctype属性

フォーム送信に使用するエントリー リストのエンコーディング タイプ。

キーワード 備考
application/x-www-form-urlencoded 既定値。属性を指定していない場合、この値が使用される。
multipart/form-data フォームが <INPUT> の type=file を含む場合に使用する。
text/plain HTML5 でデバッグ用に導入された。
method属性

フォーム送信に使用する変形。

post POST メソッド。フォームのデータはリクエスト本文 (en-US)として送信される。
get GET メソッド。フォームのデータは action 属性の URL に「?」で区切って追加されます。このメソッドはフォームに副作用がない場合に使用してください。
dialog フォームが <DIALOG> 要素の中にある場合に使用し、送信の操作を行うと、ダイアログが閉じて submit イベントを発行しますが、データを送信したりフォームをクリアしたりはしません。 
<DIALOG id=IddialogDialog open>
 <FORM action="○○.cgi" method=post target=Test>
  入力1：<INPUT name=dialogInput><BR>
  <BUTTON type=submit>送信</BUTTON><BR>
 </FORM>
</DIALOG>
<BUTTON onclick="IddialogDialog.open=false">閉じる</BUTTON><BR>
<BUTTON onclick="IddialogDialog.open=true">表示</BUTTON>

name属性

document.forms API で使用するためのフォーム名。

forms コレクション内のフォームの名前を表す。値は空文字列であってはならず、いかなる場合も、値は forms コレクションの FORM 要素の中で一意でなければならない。

novalidate属性

フォーム送信のためのフォーム制御検証を回避する。

target属性

フォーム送信に対するブラウジング コンテキスト。→フォーム送信に対する属性→A。 

<FORM action="○○.cgi" method=post target=Test>
 入力1：<INPUT name=targetInput><BR>
 <BUTTON type=submit>送信</BUTTON><BR>
</FORM>

rel属性

要素が作成するリンクの種類を制御する。その属性値は、順不同の一意な空白区切りトークンの集合でなければならない。→A。

rel 属性のサポートされるトークンは、FORM 要素で許可される HTML リンク タイプで定義されるキーワードであり、処理モデルに影響を与え、ユーザー エージェントによってサポートされる。可能なサポート トークンは、noreferrer、noopener、opener である。

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：