<form> - フォーム
目次
概要
- 形式
<form action="...">～</form>- サポート
- https://caniuse.com/mdn-html_elements_form
- カテゴリ
- フローコンテンツ
-
- パルパブルコンテンツ
- 親要素
- フローコンテンツ を子要素に持てるもの
- 子要素
- フローコンテンツ (ただし、form要素を子孫に持つことはできない)
- タグの省略
- 開始タグ:必須 / 終了タグ:必須
- 属性
- グローバル属性
- accept-charset
- action
- autocomplete
- enctype
- method
- name
- novalidate
- rel
- target
説明
入力フォームを表示します。<form>～</form> がひとつのフォームとなります。フォームの中には <input>、<select>、<textarea> などのフォーム部品を配置します。
フォームは通常サブミット(実行)ボタンを持ちます。各入力部品に値を入力した後サブミットボタンを押すと、method 属性で指定した転送方法(POST or GET)で、action 属性で指定したアクション(URL)を呼び出します。
アクションには CGI や Webアプリケーションの URL を指定します。CGI についての詳細は 「とほほのCGI入門」 を参照してください。
属性
共通属性
- グローバル属性
- 詳細は グローバル属性 を参照してください。
重要属性
- action=action
- LS/H2/e2/Ch/Fx/Sa/Op/N2/i1
- サブミット(実行)された時の動作を指定します。具体的には、CGI や Webアプリケーションの URL を指定します。HTML4.01 では必須の属性として定義されています。
- method=method
- LS/H2/e2/Ch/Fx/Sa/Op/N2/i1
- サーバーにデータを送る形式を GET または POST で指定します。GET を指定するとフォームの入力パラメータは、URL の引数として渡されます。POST を指定するとフォームの入力パラメータは、HTTP 通信のボディデータとして送信されます。
- target=target
- LS/H4T/e3/Ch/Fx/Sa/Op/N2
- 表示ターゲットを指定します。HTML4.01 Strict には採用されませんでしたが、iframe要素を指定することは有効だとして、HTML5 には採用される予定です。
- name=name
- LS/H4/e3/Ch/Fx/Sa/Op/N2
- フォーム名を指定します。JavaScript などから参照されます。
- rel=rel
- LS
- この文書から見たリンク先の文書との関係を記述します。(→ 詳細)
固有属性
- accept-charset=char
- LS/H4
- "UTF-8" など、このフォームで使用可能なキャラクタセットのリストをカンマ(,)かスペースで区切って指定します。
- autocomplete=onoff
- LS/H5/e5
- 過去に入力した値を候補として表示するオートコンプリート機能を有効・無効にします。
- on
- 有効にする(H5/e5)(規定値)
- off
- 無効にする(H5/e5)
HTML5 や HTML Living Standard では、on/off 以外にも様々な指定が可能ですが、説明は省略します。詳細は MDN(↗) を参照してください。
- enctype=enctype
- LS/H2/e2/Ch/Fx/Sa/Op/N2
- フォームのエンコードタイプを指定します。
- novalidate
- LS/H5/e/Ch/Fx/Op
- input 要素の required 属性などの入力値のバリデーションチェックを行わないことを指定します。
- accept=accept
- [非推奨] H4
- サーバがこのフォームデータを処理する際に参考となる MIME タイプのリストをカンマ(,)で区切って指定します。HTML5 では廃止されました。
- urn
- [非推奨] i3
- i-mode で使用されていた属性で、データと一緒に固体識別番号を送信します。
使用例
HTML
<form method="POST" action="cgi/sample.cgi">
<div>名前：<input type="text" name="name"></div>
<div>住所：<input type="text" name="addr"></div>
<input type="submit" value="送信">
<input type="reset" value="取消">
</form>
表示
リンク
Copyright (C) 1996-2017 杜甫々
初版:1996年9月10日 最終更新:2017年12月31日
https://www.tohoho-web.com/html/form.htm