フォーム送信の仕組み｜POSTとGETの違いと基本的な使い方

Webフォームでまず押さえたい結論はシンプルです。検索や絞り込みのように「結果を取りにいく」操作は GET、登録や送信のように「状態を変える」操作は POST が基本です。

問い合わせフォーム、ログイン画面、商品検索、管理画面の登録処理。これらは見た目は似ていても、送信方法を間違えると URL に値が出たり、再読み込みで意図しない再送信が起きたりします。フォームの method を理解すると、HTML の書き方だけでなく、API やサーバー側の処理も読みやすくなります。

ここがポイント: GET は URL に載せて取得する、POST は本文に載せて送る。 ただし、POST だから安全という意味ではなく、機密性は HTTPS の有無やサーバー側の実装で決まります。

• 何ができる記事か: フォーム送信の基本、GET と POST の使い分け、最小の HTML 例、よくある失敗をまとめて確認できます
• どんな場面で使うか: 検索フォーム、問い合わせフォーム、ログイン、登録画面、API テストの前提理解に向いています
• 前提: HTML フォームの基本をこれから学ぶ人、または実務で送信方式の選び方に迷っている人向けです

フォーム送信の基本

HTML のフォームは、入力欄に入れた値をまとめて指定先へ送る仕組みです。中心になるのは次の 2 つです。

• action: 送信先 URL
• method: 送信方法

最小の例は次のようになります。

<form action="/search" method="get">
  <input type="text" name="q" placeholder="キーワード">
  <button type="submit">検索</button>
</form>

このフォームでは、q という名前で入力値が送られます。たとえば python と入力すると、GET なら次のような形になりやすいです。

/search?q=python

name 属性が重要なのはここです。name がない入力欄は、送信時に値として含まれません。

GET と POST の違い

ここは実務で最も重要なポイントです。違いを抽象語で覚えるより、実際にどう見えるかで押さえるほうが早いです。

GET は URL に付けて送る

GET は、フォームの値を URL のクエリ文字列として付けて送ります。

• 送信内容が URL に見える
• ブックマークしやすい
• 検索条件の共有がしやすい
• データ取得向き
• HTML フォームでは method を省略すると既定値は get

たとえば社内ツールの検索画面なら、次の挙動が便利です。

• 商品名で検索した結果ページをそのまま共有できる
• フィルター条件付きの URL を再訪しやすい
• ページ再読み込みしても意味が変わりにくい

一方で、URL に値が出るため、次の用途には向きません。

• パスワード入力
• 問い合わせ本文の送信
• 会員登録の確定
• 在庫更新や削除処理

POST はリクエスト本文で送る

POST は、フォームデータを HTTP リクエストの本文として送ります。

• URL に値がそのまま出ない
• 作成、登録、更新などの処理で使いやすい
• 長めの入力や複数項目を扱いやすい
• ファイル送信では multipart/form-data と組み合わせる

たとえば問い合わせフォームでは、名前、メールアドレス、本文を POST で送るのが自然です。検索 URL のように値を見せて共有する意味がなく、むしろ本文が URL に出ると扱いにくいからです。

ただし、POST は暗号化ではありません。 ブラウザとサーバー間の保護は HTTPS で行います。社内向けでも本番環境では HTTPS 前提で考えるべきです。

まずはこれで判断できる使い分け

迷ったときは、「その送信でサーバー側の状態が変わるか」を先に見ます。

• GET を選ぶ場面
• 検索
• 絞り込み
• 一覧の並び替え

• ページ移動条件の保持

• POST を選ぶ場面

• 問い合わせ送信
• ログイン
• 会員登録
• コメント投稿
• 注文確定
• 管理画面での追加や更新

この切り分けにすると、画面設計と API 設計がそろいやすくなります。検索画面なのに POST を使うと URL 共有がしづらくなり、登録処理なのに GET を使うと誤操作や情報露出の原因になります。

基本の書き方

H2 のここでは、最小例で GET と POST を並べて見ます。

GET のフォーム例

<form action="/search" method="get">
  <label>
    キーワード
    <input type="text" name="q">
  </label>
  <button type="submit">検索</button>
</form>

入力例:

q=javascript

送信後のイメージ:

/search?q=javascript

検索結果ページ、記事一覧、商品一覧のような画面ではこの形が扱いやすいです。

POST のフォーム例

<form action="/contact" method="post">
  <label>
    お名前
    <input type="text" name="name">
  </label>

  <label>
    メールアドレス
    <input type="email" name="email">
  </label>

  <label>
    お問い合わせ内容
    <textarea name="message"></textarea>
  </label>

  <button type="submit">送信</button>
</form>

入力例:

name=Yamada
email=test@example.com
message=見積もりをお願いしたいです

POST では、これらの値は URL の末尾ではなくリクエスト本文に入ります。ブラウザの開発者ツールの Network タブを見ると、実際の送信内容を確認できます。

入力例と出力イメージ

コードだけだと動きが見えにくいので、GET と POST の見え方を並べます。

GET の見え方

フォーム:

<form action="/products" method="get">
  <input type="text" name="keyword">
  <select name="sort">
    <option value="price">価格順</option>
    <option value="new">新着順</option>
  </select>
  <button type="submit">表示</button>
</form>

入力:

keyword=ssd
sort=price

URL:

/products?keyword=ssd&sort=price

この形なら、検索条件付きの URL をそのまま保存できます。EC サイトや管理画面の一覧でよく使われる理由はここにあります。

POST の見え方

フォーム:

<form action="/signup" method="post">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">登録</button>
</form>

入力:

username=masa
password=secret123

送信時のイメージ:

POST /signup
Body:
username=masa&password=secret123

ここで大事なのは、「URL に見えない = 何をしても安全」ではないことです。サーバーログ、保存先、通信の暗号化、バリデーションまで含めて設計する必要があります。

実務での使いどころ

実際の画面に落とすと、使い分けはかなり明確です。

検索フォーム

GET が基本です。

理由は次の通りです。

• 検索条件を URL に残せる
• ブラウザの戻る操作と相性がよい
• チーム内で URL を共有しやすい
• サーバー側でも「取得系」として整理しやすい

問い合わせフォーム

POST が基本です。

問い合わせ内容は URL に出す必要がなく、送信によって受付やメール送信などの副作用が起こるからです。

ログインフォーム

POST を選ぶのが一般的です。

認証情報は URL に出したくなく、ログイン処理はセッション発行などサーバー側の状態変化を伴います。あわせて HTTPS、CSRF 対策、サーバー側の入力検証も必要です。

ファイルアップロード

POST に加えて enctype="multipart/form-data" が必要です。

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file">
  <button type="submit">アップロード</button>
</form>

ファイルを含むのに application/x-www-form-urlencoded のまま送ろうとして詰まるケースは初心者に多いポイントです。

よくある失敗

フォーム送信は見た目が簡単なぶん、つまずく場所が似ています。先に知っておくと修正が早いです。

name を付け忘れる

id だけ付いていて name がないと、その値は送信されません。

NG 例:

<input type="text" id="username">

改善例:

<input type="text" id="username" name="username">

検索なのに POST を使う

動作自体はしますが、URL 共有や再検索がしづらくなります。検索・絞り込み・一覧表示はまず GET を検討したほうが自然です。

登録処理なのに GET を使う

ユーザー情報や送信内容が URL に現れやすくなります。ブックマークや履歴にも残りやすいため、登録・更新・削除系には不向きです。

POST なら安全だと思い込む

POST は送信位置が違うだけです。安全性を決めるのは次の要素です。

• HTTPS で送っているか
• サーバー側で入力検証しているか
• CSRF 対策があるか
• パスワードを適切に保存しているか
• ログに機微情報を残していないか

ファイル送信で enctype を忘れる

<input type="file"> を使うのに multipart/form-data を付けないと、サーバー側で期待通りに受け取れません。

GET と POST の比較

ざっくり比較したいときは次を基準にすると判断が速くなります。

項目	GET	POST
主な用途	取得、検索、絞り込み	登録、送信、更新
データの置き場所	URL のクエリ文字列	リクエスト本文
URL 共有	しやすい	しにくい
フォーム既定値	はい	いいえ
副作用のある処理	不向き	向いている
ファイル送信	不可	可能（multipart/form-data）

関連ツールや代替手段

フォーム送信の理解は、HTML だけで終わりません。次のツールにもそのままつながります。

• curl: GET と POST の違いをターミナルから再現しやすい
• Postman: API リクエストの body や query を視覚的に確認しやすい
• ブラウザ開発者ツール: 実際に送られた URL、ヘッダー、本文を確認できる
• JavaScript の fetch: フォーム送信を非同期化するときの基礎になる

特に、フォームでつまずいたらブラウザの Network タブを見る習慣が有効です。HTML の書き方だけを見ていても、送信先 URL や本文の実体は分かりません。

迷ったときのチェックリスト

最後に、実務での判断を短く整理します。

• 検索や絞り込みなら GET を検討する
• 登録や送信なら POST を選ぶ
• パスワードや本文を GET に載せない
• ファイル送信なら multipart/form-data を付ける
• name 属性があるか確認する
• POST でも HTTPS とサーバー側検証は別途必要と考える

フォーム送信は小さな機能に見えますが、ここを正しく選べると画面設計、API 設計、セキュリティの判断が一気につながります。次に見るべきポイントは、ブラウザの開発者ツールで実際の GET と POST を見比べることです。見える形で理解すると、HTML の 1 行が何を変えているかがはっきり分かります。

参照リンク

• MDN: <form> 要素
• MDN: HTMLFormElement.method
• MDN: HTTP request methods
• MDN: HTMLFormElement.enctype
• MDN: Request.formData()