form要素

解説

form要素（<form>）は、HTMLでフォームを定義する要素です。form要素の中に置いた入力欄の値は、送信ボタンを押した時点でまとめて送信されます。フォームの送信先はaction属性で、送信方法（HTTPメソッド）はmethod属性で指定します。

仕組み

form要素は、次のように入力欄全体を囲んで使います。

<form action="/contact" method="post">
  …入力欄…
</form>

利用者が送信ボタンを押すと、ブラウザはform要素に属する入力欄の値をまとめ、action属性で指定したURLへ、method属性で指定した方法で送信します。

実務での使われ方

フォーム作成ツールを使う場合、form要素の部分はツール側が生成します。一方で、自社でフォームを実装する場合は、送信先の処理だけでなく、送信後の挙動まで決めておきます。たとえば、入力エラーのときにどの画面へ戻すか、二重送信をどう防ぐか、CSRF対策をどう組み込むかを含めて設計します。さらに、送信ボタンを連打されても問い合わせが重複しないようにしておくと、同じ内容の問い合わせに二重に対応する手間を減らせます。

注意点

form要素の外に置いた入力欄は、form属性で関連付けていない限り送信されません。画面上は同じ並びに見えても、値が送られないため注意が必要です。この問題は、あとから項目を追加したときに起きやすく、「特定の項目だけ空で届く」という形で表面化します。そのため、受け取ったデータに欠けがあるときは、まずHTMLの入れ子関係を確認します。

また、フォームが正しく動いていないとき、顧客は別の手段で連絡するか、そのまま離れてしまいます。したがって、問い合わせ件数が理由もなく減った場合、担当者はフォームの不具合を疑って確認します。改修のたびに実際に送信し、完了画面の表示と受信箱への到着の両方を確かめてください。