HTML <form>

ボタン等のフォーム部品を配置するのに使用します。

フォーム部品には、以下の種類があります。

<INPUT>
<SELECT>

フォーム部品は <FIELDSET> タグでグループ化することができます。

XML文書をXSLTスタイルシートでHTML文書に変換した場合、FORMからの送信データは UTF-8 でエンコーディングされます（エンコーディング方法を指定しても無視されます）。POST先（サーブレットやCGI）でエンコーディング方法を UTF-8 以外に指定すると文字化けしてしまいます。

フォームのデフォルトのボタンは、最初のサブミットボタンである。

ひとつのフォームに複数のサブミットボタンがある場合

<form action="http://itref.fc2web.com">
  <input type="submit" name="button1" value="value">
  <input type="submit" name="button2" value="value">
</form>

button1をクリックした場合、 button1=value というデータが送信される。button2をクリックした場合、 button2=value というデータが送信される。

<form action="http://itref.fc2web.com">
  <input type="submit" name="button" value="button1">
  <input type="submit" name="button" value="button2">
</form>

button1をクリックした場合、 button=button1 というデータが送信される。button2をクリックした場合、 button=button2 というデータが送信される。

書式

<form">
  <!-- form content -->
</form>

開始タグと終了タグは省略できません。

内容モデル

開始タグと終了タグの間にはブロック要素（ただし、FORM 要素を除く）または SCRIPT 要素が現れます。

formの中にformを入れることはできない。formの入れ子（ネスト）は禁じられている。

<!-- 間違ったHTML -->
<form action="foo.php">
  <input name="common" value="bar">
  <form action="bar.php">
    <input type="submit">
  </form>
  <input type="submit">
</form>

属性

accept-charset

フォーム送信に使用する文字エンコーディングを指定する。

<form accept-charset="utf-8">

action（必須属性）

サブミット（実行）されたときの動作を指定します。具体的には、実行する CGIやサーブレット、JSP などの URI を記述します。必須属性で省略できません。

action-xhr

AMP (Accelerated Mobile Pages) でフォームを使用するときに指定する。

AMPにおけるform要素の必須属性
method	必須属性
GET	action 又は action-xhr
POST	action-xhr

autocomplete

on (デフォルト)を指定した場合、フォーム内のinput要素でオートコンプリート(Webブラウザによる入力候補及び自動補完)が有効になる。 off を指定した場合、フォーム内のinput要素でオートコンプリートが無効になる。ただし、Webブラウザによっては、この指定が無視されることがある。

enctype

MIMEタイプを指定します。

enctype 属性
属性値	意味
application/x-www-form-urlencoded	エンコード（変換）された状態で送信します。（規定値）
multipart/form-data	添付ファイルとして送信します。フォームでファイルを送信する場合に指定します。
text/plain	プレーンテキストで送信します。フォームの内容をメールで送信する場合に指定します。

<form enctype="multipart/form-data">
  <label for="file">ファイル</label>
  <input type="file" id="file">
  <input type="submit">
</form>

method

サーバーにクエリ送信する形式を指定します。

method 属性値
値	意味
GET	送信するデータが URL 中に埋め込まれます。（規定値）
POST	送信するデータが URL とは別に送られます。

name

スクリプティングで使用するためのフォーム名

novalidate

フォーム送信時のフォームコントロールのバリデーションを回避する。属性名だけ指定すればよい。

<form novalidate>
  <label for="pw">Password</label>
  <input type="password" id="pw" minlength="8" maxlength="16">
</form>

ondblclick

要素がダブルクリックされたときに実行するJavaScriptを指定する。

onsubmit

Submitボタンを押したときに実行するスクリプトを記述します。

onreset

Resetボタンを押したときに実行するスクリプトを記述します。

target

リンク先のページを開くときに現在のウィンドウを使うか、新しいウィンドウを開くかを指定します。省略した場合は、現在のウィンドウを使います。

target 属性
属性値	意味
_blank	新しいウィンドウを開きます
_self	現在のウィンドウを使います
名前	指定した名前のフレームを使います
_top	フレーム分割している場合、フレームを解除して現在のウィンドウを使います

JavaScript

JavaScriptからは HTMLFormElement インタフェースを通じてform要素へアクセスできる。

<input>

<label>

<meter>

参考文献

Web Hypertext Application Technology Working Group (2022) "Forms" HTML Living Standard

OpenJS Foundation (2022) amp-form

HTML <form>

書式

内容モデル

属性

JavaScript

関連記事

参考文献