はじめに
formタグのデータの扱いは、フレームワークがいろいろやってくれる部分ではあります。
例えば私が普段業務で使っているASP.NET Coreだと、コントローラー名やメソッド名をinputタグに属性として渡せば、どんなHTTPリクエストが送られているかなどはあまり意識しなくて済みます。
なので、根本的にはどうやってURIが作られ送信されているのか説明できませんでした。
私と同じような方のためになればと思いこの記事を書いています。
formタグによるGET
以下のような書籍検索フォームがあるとします。
題名を入力して検索をかける仕様です。
<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タグを追加することで対処します。
<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を指定します。
<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の形式でフォームの内容が入っています。
おわりに
基本に立ち返ることの重要性を実感する日々です。