search
LoginSignup
0

posted at

updated at

formタグからGET, POSTされるとき何が起こっているのか

はじめに

formタグのデータの扱いは、フレームワークがいろいろやってくれる部分ではあります。
例えば私が普段業務で使っているASP.NET Coreだと、コントローラー名やメソッド名をinputタグに属性として渡せば、どんなHTTPリクエストが送られているかなどはあまり意識しなくて済みます。

なので、根本的にはどうやってURIが作られ送信されているのか説明できませんでした。
私と同じような方のためになればと思いこの記事を書いています。

formタグによるGET

以下のような書籍検索フォームがあるとします。
題名を入力して検索をかける仕様です。

index.html
<form method="GET" action="http://example.jp/article">
    <label>題名:<input type="text" id="title" name="title"></label>
    <input type="submit" name="submit" value="検索">
</form>

formタグには、リクエストを送るために以下の二つの属性を指定する必要があります。

  • method属性:HTTPメソッドを指定(GETかPOST)
  • action属性:ターゲットとなるURIを指定

クエリパラメータの名前は、inputタグのid(上記の例ではtitle)になります。
したがって、id=titleのテキスト入力に"test-title"という文字列を入れて送信した場合、
http://example.jp/article?title=test-title というURIが生成されます。

ここで、サーバー側で著者名での検索処理が追加されたとします。
すると、クライアントはさらに著者名のパラメータをサーバーに渡す必要があります。
その場合、以下のようにformタグ中に新たにinputタグを追加することで対処します。

index.html
<form method="GET" action="http://example.jp/article">
    <div><label>題名:<input type="text" id="title" name="title"></label></div>
    <div><label>著者:<input type="text" id="author" name="author"></label></div>
    <input type="submit" name="submit" value="検索">
</form>

id=titleのinputタグに"test-title"、id=authorのinputタグに"test-author"を入力して送信した場合、
http://example.jp/article?title=test-title&author=test-author というURIが生成されます。

このように、クライアントが入力した内容によってURIが生成されますが、
あくまでクライアントはサーバー側が用意するフォームに従ってURIを構築しています。

サーバー側の実装を変更して新たなクエリパラメータが必要になった場合でも、
フォームに新たなパラメータを埋め込むことで解決します。

formタグによるPOST

aタグやlinkタグではGETしか送れませんが、formタグはPOSTも送ることができます。
formタグのmethod属性に、POSTを指定します。

index.html
<form method="POST" action="http://example.jp/article">
    <div><label>題名:<input type="text" id="title" name="title"></label></div>
    <div><label>著者:<input type="text" id="author" name="author"></label></div>
    <input type="submit" name="submit" value="検索">
</form>

id=titleのinputタグに"test-title"、id=authorのinputタグに"test-author"を入力して送信した場合、
リクエストは以下のようになります。

POST /articleHTTP/1.1
Host: example.jp
ContentType: application/xwwwformurlencoded

title=test-title&author=test-author

リクエストメッセージのボディには、
application/xwwwformurlencodedの形式でフォームの内容が入っています。

おわりに

基本に立ち返ることの重要性を実感する日々です。

参照

Webを支える技術

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
0