前の記事では、
HTMLフォームの基本構造と input タグの使い方を学びました。
フォームを作れるようになると、
次に必ず出てくる疑問があります。
・送信ボタンを押すと、裏側で何が起きているのか
・GET と POST は何が違うのか
・URLに文字が付くのはなぜか
この仕組みを理解せずに進んでしまうと、
PHPの学習で確実につまずきます。
この記事では、
HTMLフォーム送信の仕組みを「概念レベル」で整理し、
GET / POST の違いを初心者向けに解説します。
この記事で学べること
・フォーム送信時に起きていること
・GETとPOSTの役割の違い
・URLとデータの関係
・PHP学習につながる考え方
フォーム送信時に何が起きているのか
フォーム送信とは、
ブラウザからサーバーへデータを送る処理です。
流れを大まかに整理すると、次のようになります。
・ユーザーが入力する
・送信ボタンを押す
・ブラウザがデータをまとめる
・サーバーにリクエストを送る
HTMLは、
この「送るきっかけ」を作っているだけです。
formタグの役割を思い出す
formタグは、
次の情報をブラウザに伝えています。
・どこに送るか（action）
・どうやって送るか（method）
この2つによって、
送信の動作が決まります。
actionとは何か
actionは、
送信先のURL を指定する属性です。
送信ボタンが押されると、
ブラウザは action に指定されたURLへ
データを送信します。
この送信先で、
PHPなどのサーバー処理が行われます。
methodとは何か
methodは、
データの送り方 を指定する属性です。
HTMLフォームでは、
主に次の2種類が使われます。
・GET
・POST
この違いを理解することが、
この記事の最大の目的です。
GETとは何か
GETは、
URLにデータを付けて送信する方法です。
特徴としては、
・送信内容がURLに表示される
・ブックマークや共有が可能
・データ量に制限がある
といった点があります。
GETが使われる場面
GETは、
次のような場面で使われます。
・検索フォーム
・ページ切り替え
・条件指定
「データを取得するだけ」
という用途に向いています。
POSTとは何か
POSTは、
URLとは別にデータを送信する方法です。
特徴としては、
・URLに内容が表示されない
・大量のデータを送れる
・セキュリティ面で有利
という点があります。
POSTが使われる場面
POSTは、
次のような場面で使われます。
・お問い合わせフォーム
・ログイン処理
・登録・更新処理
「データを送って処理する」
場面で使われます。
GETとPOSTの違いまとめ
ここで、
両者の違いを整理します。
・GET
URLにデータが付く
取得・検索向き
・POST
URLに表示されない
送信・登録向き
迷った場合は、
個人情報や重要なデータを含むならPOST
と覚えておけば問題ありません。
なぜURLにデータが見えるのか
GETで送信すると、
URLの後ろに
「?」や「&」を含む文字列が付きます。
これは、
クエリ文字列 と呼ばれる仕組みです。
この文字列には、
name属性と入力値の組み合わせが含まれています。
name属性が重要な理由
フォーム送信では、
name属性がデータのキー になります。
サーバー側では、
・どの入力欄の値か
・どの名前で送られてきたか
を name を元に判断します。
nameがなければ、
入力されていても
データとして認識されません。
HTMLは「送る」までが役割
ここで重要な考え方です。
HTMLは、
・入力画面を作る
・データを送る
ここまでが役割です。
・受け取る
・処理する
・保存する
これらは、
PHPなどのサーバー側言語の役割になります。
PHP学習への橋渡し
ここまで理解できていれば、
次のステップは明確です。
・サーバーは何を受け取っているのか
・送られたデータはどこにあるのか
・どうやって表示・処理するのか
これらを扱うのが、
次章の PHP基礎 です。
よくある勘違い
最後に、
初心者がよく混乱する点を整理します。
・GETが危険、POSTが安全というわけではない
・POSTでも暗号化されるわけではない
・セキュリティは別途対策が必要
GET / POST は、
用途による使い分け が重要です。
まとめ
HTMLフォーム送信は、
ブラウザとサーバーをつなぐ重要な仕組みです。
・action：送信先
・method：送り方
・GET：取得向き
・POST：送信向き
この仕組みを理解できれば、
PHPの学習が「意味の分からない作業」ではなく
つながりのある理解 に変わります。
これで、
3章 HTML基礎は完全に終了です。
次に読むべき記事
▶ 次の記事
4-1 CSSとは何か｜HTMLとCSSの役割分担
▶ 関連記事
3-6 フォームの基本構造とinputタグの使い方
コメント