ブラウザは、type="submit"の要素（以下、submitボタンと呼びます）がクリックされると、<form>タグのaction属性で指定されたURLへPOSTリクエストを送信します。

action属性で指定するURLについて、ホストやポートを省略すると、現在開いているページと同じホスト/ポートへ送信されます。
つまり、今回のように

• 現在開いているページが http://localhost:8080/form.html である
• <form action="/show_requests">である

という場合では、POSTリクエストはhttp://localhost:8080/show_requests へ送信されます。

では、下図のようにフォームに値を入力して、送信ボタンを押してみましょう。

先程説明した通り、このフォームの入力内容は、POSTリクエスト/show_requestsへ送られます。
/show_requestsは前章でHTTPリクエストの内容が表示されるようにしておいたはずですので、これでPOSTリクエストの内容が見れるだろう、という算段です。

実際、送信ボタンを押すと、次の画面で下記のように表示されるはずです。

単にURLバーに/show_requestsと入力してページ遷移した場合と違って、リクエストボディに値が含まれていることが分かります。

また、

Content-Type: application/x-www-form-urlencoded

というヘッダーも新たに追加されていることにも注目しておいてください。
後ほど、このヘッダーが大きな意味を持つことを説明します。

POSTリクエストのボディを観察する

さて、POSTリクエストのボディの具体的な中身が見れたことですので、観察してお勉強していきましょう。
リクエストボディを見てみると、テキストボックスやパスワードなどの個々の入力フォームの値が決まったフォーマットで連結されて渡されてきているのが分かります。

そのフォーマットとは、1つの入力フォームに対して
[HTML要素のname属性の値]=[フォームに入力された値]
というペアがあり、別々のフォームの値同士は&で連結されているようなフォーマットです。

また、半角スペースは+という記号に置き換えられ、改行コードや日本語は%で始まる謎の文字列に変換されていることが分かります。
（日本語の入力値は、hidden_valueの値を見てください）

また、<select>要素のように複数選択を許可する入力フォームでは、同じnameで複数の値が送られてきているようです。
例）check_name=check2&check_name=check3

また、アップロードしたファイルを見てみるとファイル名だけしか送られておらず、ファイルの内容は送信されていません。

POSTパラメータのフォーマットについて

POSTリクエストで送りたいデータ（以下、POSTパラメータ）をリクエストボディを使ってサーバーへ送る際、どのようなフォーマットで送るかは重要です。
ここでフォーマットと言っているのは、リクエストボディの中でパラメータのnameとvalueを表すのになんの記号を使うのか、複数のデータを分けるのになんの記号を使うのか、マルチバイト文字をどのように表現するのか、画像ファイルのようなバイナリデータをどのように表現するのか、などです。

フォーマットは様々な種類が考えられますが、このフォーマット方式の認識がクライアント側とサーバー側で違うと、送ったパラメータをサーバ側で正しく認識できません。
（クライアント側は=という記号は「nameとvalueを分ける記号」だと思って使っているのに、サーバー側ではこれを「改行コード」だと思って解釈してしまうと、訳の分からない事になってしまうわけです。）

そこで、POSTリクエストを送る時は、必ずリクエストボディのフォーマットを示すContent-Typeというヘッダーをつけてフォーマットを明示してあげる必要があります。

今回でいうと、
http
Content-Type: application/x-www-form-urlencoded

がそれに当たるというわけです。

以下では、よく使われるフォーマット(Content-Type)について3つ紹介しておきます。

application/x-www-form-urlencoded

こちらは、ブラウザが<form>タグでenctype属性を指定しなかった場合に使われるデフォルトのフォーマットです。
別名「URLエンコーディング」や「パーセントエンコーディング」とも呼ばれ、URLとして利用可能な文字のみを使って様々なデータを表せるようにフォーマットが決められています。

既にさきほど見た通り、

1. 項目のnameとvalueは=で連結する
2. 複数の項目を送る際は&で連結する
3. 半角スペースは+を使う
4. その他のURLに使えない文字は、UTF-8で符号化した上で、そのバイト列を%XXで表す
5. UTF-8で符号化できないバイナリデータは扱えない（ファイルアップロージ時、ファイルの中身は送信しない）

などが特徴です。

multipart/form-data

こちらは、<form enctype="multipart/form-data">のように、enctype属性で明示的に指定することで利用できます。
説明する前に実際に中身を見てみましょう。

さきほど作成したform.htmlの<form>要素に、enctypeを指定して、フォームを送信してみてください。

注意

ファイルアップロードした時の表示を確認したい場合は、ChromeではなくFirefoxというブラウザを使い、小さいデータ（数KBの画像など）を送るようにしてください。

ChromeやSafariは、ファイルデータを送る際にkeep-aliveを使って複数回に分けてリクエストを送信する挙動となっていますが、私たちのWebサーバーはkeep-aliveに対応しておらずデータを正常に受け取れないためです。

Firefoxは小さいデータであれば1リクエストで送ってきますので、正常にデータを受け取ることができます。

下記ではFirefoxで挙動確認した画面を掲載しますが、Firefoxをインストールするのが面倒な方は、Chromeでファイルはアップロードせずに動作確認してみてください。
テキストフォームなど、ファイル以外のフォームであればデータが受け取れるはずです。

まず最初に注目するのは、フォームデータの各項目が特殊なセパレータによって分割されている点です。
(今回でいうとセパレータは---------------------------10847194838586372301567045317)

続きはBookで！