<form></form>
| 更新日 | |
|---|---|
| 仕様 | HTML Living Standard |
| 分類 | フロー・コンテンツ / パルパブル・コンテンツ |
| 利用場所 | フロー・コンテンツが置ける場所 |
| 内容 | フロー・コンテンツ（ただし、form要素は含められない） |
form要素は、入力フォームを表します。この要素内には、フォームを構成する各部品を配置していくことになります。
<form></form>
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性 | |||
action="" |
送信先の指定 | URL | 送信先のURL |
method="" |
フォームの送信方法 | get |
URLの形式でデータを送信（既定値） |
post |
本文としてデータを送信 | ||
dialog |
送信時に祖先のdialog要素を閉じる | ||
enctype="" |
送信時のデータ形式 | application/x-www-form-urlencoded |
URLエンコード（既定値） |
multipart/form-data |
マルチパート | ||
text/plain |
プレーンテキスト | ||
accept-charset="" |
送信時の文字エンコーディング | UTF-8 |
UTF-8を指定（Shift_JIS、EUC-JP などは非標準） |
name="" |
フォームの名前 | 文字列 | 固有のフォーム名 |
target="" |
送信結果の表示方法 | _blank |
新規のブラウジング・コンテキストに表示 |
_self |
現在のブラウジング・コンテキストに表示 | ||
_parent |
親のブラウジング・コンテキストに表示 | ||
_top |
最上位のブラウジング・コンテキストに表示 | ||
| ブラウジング・コンテキスト名 | 任意のブラウジング・コンテキストに表示 | ||
autocomplete="" |
オートコンプリート | on |
オートコンプリートを有効にする（既定値） |
off |
オートコンプリートを無効にする | ||
novalidate |
妥当性をチェックしない | （novalidate） |
値は省略可能 |
rel="" |
 フォームから見た送信先の関係 |
リンクタイプ | 半角スペース区切りで複数指定可能 |
method="dialog"は、form要素がdialog要素の中に置かれている場合に指定することができます。- enctypec属性は、
method="post"の場合に指定することができます。 - HTML Living Standardの仕様に準拠する場合は、accept-charset属性の値には
UTF-8しか指定できません。（大文字と小文字は区別されません） - form要素におけるrel属性の値は、実質的には
noreferrer、noopener、openerの3つが効果をもたらすようです。
action属性、method属性、enctype属性、target属性、autocomplete属性、novalidate属性の詳細については、下記のページを参考にしてください。
フォーム部品の配置について
通常、フォームを構成する各部品（入力欄や送信ボタン等）は、form要素の中に配置することになります。
- 特別な理由がない場合は、この方法でフォームを作成することをお勧めします。
<form method="post" action="example.cgi">
<p>お名前：<input type="text" name="name"></p>
<p><input type="submit" value="送信する"></p>
</form>
HTML5以降では、次の方法を使用することで、form要素の外にもフォーム部品を配置できるようになりました。
- form要素にid属性を指定します。
- フォーム部品にform属性を指定して、form要素に付けたID名を記述します。
<p>お名前：<input type="text" name="name" form="example"></p>
<form method="post" action="example.cgi" id="example">
<p><input type="submit" value="送信する"></p>
</form>
上記のように指定することで、form要素とフォーム部品とが関連付けられるようになります。
- 旧HTMLからの変更点
-
- HTML5：accept属性が廃止され、autocomplete属性とnovalidate属性が追加されました。
- HTML5：enctype属性の値に
text/plainが追加されました。 - HTML5：action属性が必須ではなくなりました。
- HTML5.2：method属性の値に
dialogが追加されました。 - HTML LS：rel属性が追加されました。
使用例
- サンプルのため送信できません。
- 動作確認のため、送信先としてHTMLファイル（現在のページ）を指定しています。この機能に対応しているブラウザでは、送信ボタンを押すとアドレスバーのURLに
?name=EXAMPLEが追加されます。
<p>お名前：<input type="text" name="name" value="EXAMPLE" form="example"></p>
<form method="get" action="form.html" id="example">
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
-
お名前：
- エンコーディング名（
UTF-8）は、大文字と小文字は区別されません。 - 通常、この指定は必要ありませんが、文字化けするような時には試してみると良いかもしれません。
<form method="post" action="example.cgi" accept-charset="UTF-8">
<p>お名前：<input type="text" name="name"></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
-
お名前：
- サンプルのため送信できません。
- フォームの名前は、スクリプトから参照する際に使用する場合があります。
<form method="post" action="example.cgi" name="example">
<p>お名前：<input type="text" name="name"></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
-
お名前：
- サンプルのため送信できません。
- 次の例では、フォームの送信時にリファラーを送信しません。
<form method="post" action="example.cgi" rel="noreferrer">
<p>お名前：<input type="text" name="name"></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
-
お名前：
- サンプルのため送信できません。