まず結論
フォーム送信とは、ユーザーが入力した値を、ブラウザがHTTPリクエストとしてサーバへ送る仕組みです。
HTMLでは、form、input、button を組み合わせて入力欄を作ります。
<form action="/contact" method="post">
<input name="email" type="email" />
<textarea name="message"></textarea>
<button type="submit">送信</button>
</form>
送信ボタンを押すと、ブラウザは action に指定されたURLへ、入力値を送ります。
name属性が重要
フォームでは、name 属性が送信されるデータのキーになります。
<input name="email" value="user@example.com" />
送信されるデータは、考え方としては次のようになります。
email=user@example.com
id や class はCSSやJavaScriptで使うことが多いですが、フォーム送信で値の名前になるのは主に name です。
GETとPOST
フォームの method には、よく get と post が使われます。
| method | 特徴 | 主な用途 |
|---|---|---|
| GET | URLに条件が付く | 検索、絞り込み |
| POST | リクエスト本文に値を入れる | 問い合わせ、登録、更新 |
GETの例:
/search?q=javascript
POSTでは、URLではなくリクエスト本文に値が入ります。
ブラウザ標準のバリデーション
HTMLには、簡単なバリデーション機能があります。
<input type="email" required />
この場合、未入力やメール形式でない値をブラウザが止めてくれます。
ただし、ブラウザ側のバリデーションだけでは不十分です。ユーザーはDevToolsや直接リクエストで回避できます。サーバ側でも必ず検証します。
JavaScriptで送る場合
現代のWebアプリでは、フォーム送信をJavaScriptで処理することもあります。
const form = document.querySelector("form");
form.addEventListener("submit", async (event) => {
event.preventDefault();
const formData = new FormData(form);
await fetch("/api/contact", {
method: "POST",
body: formData,
});
});
event.preventDefault() は、ブラウザ標準のページ遷移を止める処理です。その代わりに fetch でAPIへ送っています。
サーバ側でやること
サーバは、受け取った値を確認して処理します。
やること:
- 必須項目の確認
- 文字数の確認
- メール形式の確認
- 不正な文字や形式の確認
- DB保存やメール送信
- 成功/失敗レスポンスを返す
フォームはユーザー入力を受け取る入口なので、セキュリティ上も重要です。
注意: フォームの入力値は信用しません。ブラウザでチェックしていても、サーバ側で必ず検証します。
まとめ
フォーム送信は、HTMLの入力値をHTTPリクエストとして送る仕組みです。name、action、method が基本になります。
JavaScriptで送る場合も、最終的にはHTTP通信です。DevTools Networkで、どのURLに、どのmethodで、何が送られたかを確認できます。
