Web ページで入力した内容をサーバーに送る仕組みを、フォーム といいます。この章では、テキストの入力欄と送信ボタンのあるフォームを作り、入力した内容がどのように送られるかを、Chrome のアドレスバーで確かめます。送り方の GET と POST の違いも学びます。
この章で学ぶこと
- フォームを作る
<form>タグと、action・method属性 - テキストの入力欄
<input type="text">と送信ボタン<button type="submit"> - 入力した値に名前を付ける
name属性の役割 - 送り方の GET と POST の違い
8.1 この章で作るもの
この章では、ch08 フォルダーに、氏名と住所を入力する画面 input.html と、送信先のページ result.html を作ります。「送信」ボタンを押すと、入力した内容を付けて result.html がリクエストされます。
図8-1 入力画面（input.html）
| ファイル | 作業 | 内容 |
|---|---|---|
ch08/result.html |
新規 | フォームの送信先のページ |
ch08/input.html |
新規 | 氏名と住所を入力して送信する画面 |
8.2 送信先のページを作る
先に、フォームの送信先になるページを作ります。
-
webappフォルダーを右クリックし、新規 → フォルダー でch08フォルダーを作ります。 -
ch08フォルダーを右クリックし、新規 → HTML ファイル で、テンプレート「新規 HTML ファイル (5)」を使ってresult.htmlを作ります（第3章「hello.html を作る」）。 -
<title>を書き換え、<body>の中に緑の行を書きます。ch08/result.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>送信結果</title> </head> <body> <h1>送信結果</h1> <p>フォームから送信されたリクエストに、このページが返されました。</p> <p><a href="input.html">入力画面へ戻る</a></p> </body> </html> -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。
8.3 入力画面を作る
-
ch08フォルダーに、同じ手順でinput.htmlを作ります。 -
<title>を書き換え、<body>の中に緑の行を書きます。ch08/input.html<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>社員の入力</title> </head> <body> <h1>社員の入力</h1> <form action="result.html" method="get"> <table> <tr> <th>氏名</th> <td><input type="text" name="name"></td> </tr> <tr> <th>住所（都道府県）</th> <td><input type="text" name="address"></td> </tr> </table> <button type="submit">送信</button> </form> </body> </html>入力欄の項目の名前と入力欄を並べるために、第6章の表を使っています。Spring入門の社員の入力画面も、同じように表の中に入力欄を並べています。
-
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。 -
Chrome で
http://localhost/html/ch08/input.htmlを開き、入力欄と「送信」ボタンが表示されることを確認します（図8-1）。入力欄をクリックすると、文字を入力できます。
8.4 送信してみる（GET）
-
「氏名」に 山田 太郎、「住所（都道府県）」に 東京都 と入力します。
図8-2 氏名と住所を入力したところ -
「送信」ボタンをクリックします。
-
result.htmlが表示されます。アドレスバーの URL の末尾に、入力した内容が付いていることを確認します。
図8-3 GET で送信したときのアドレスバー（赤枠）
アドレスバーには、localhost/html/ch08/result.html?name=山田+太郎&address=東京都 のように表示されます。? から後ろが、フォームから送られた内容です。
| 部分 | 意味 |
|---|---|
result.html |
送信先のページ。<form> の action 属性に書いたもの |
? |
ここから後ろが、送られた内容であることを表す |
name=山田+太郎 |
name という名前の入力欄の値が「山田 太郎」であること。値の中の空白は + で表される |
& |
入力欄ごとの区切り |
address=東京都 |
address という名前の入力欄の値が「東京都」であること |
name= や address= の部分は、入力欄の name 属性に書いた名前です。フォームは、入力欄ごとに「名前=値」の組を作って送ります。
【知識メモ】送られた内容を、HTML だけでは表示できない
result.html には、入力した「山田 太郎」は表示されません。result.html はただの HTML のファイルで、Tomcat は送られた内容に関係なく、ファイルの中身をそのまま返すからです。送られた内容を読み取って、画面に表示したり、データベースに登録したりするには、サーバーの側でプログラムを動かす必要があります。Spring入門では、Java のプログラム（Spring Boot）で、この仕組みを作ります。
8.5 name 属性の役割
入力欄の name 属性を消すと、どうなるかを確かめます。
-
input.htmlの住所の入力欄から、name="address"を消して保存します。ch08/input.html（住所の行）<td><input type="text"></td> -
Chrome で
input.htmlを再読み込みし、氏名と住所を入力して「送信」をクリックします。 -
アドレスバーの URL の末尾が
?name=山田+太郎だけになり、住所が送られていないことを確認します。 -
確認したら、住所の入力欄に
name="address"を書き戻して保存します。
name 属性が無い入力欄の値は、送られません。name は、送った先のプログラムが「どの入力欄の値か」を見分けるための名前です。入力欄には、必ず name 属性を書きます。名前は、入力欄ごとに違うものにします。
8.6 POST で送る
フォームの送り方には、GET と POST の2つがあります。ここまでは GET で送りました。method 属性を変えて、POST で送ってみます。
-
input.htmlの<form>のmethod="get"を、method="post"に書き換えます。ch08/input.html（form の行）<form action="result.html" method="post"> -
保存ボタンか Ctrl + S で保存し、タブの
*が消えたことを確認します。 -
Chrome で
input.htmlを開き直し（「入力画面へ戻る」のリンクで戻り、再読み込みします）、氏名と住所を入力して「送信」をクリックします。 -
result.htmlが表示されます。アドレスバーの URL の末尾に、入力した内容が付いていないことを確認します。
図8-4 POST で送信したときのアドレスバー（赤枠）
POST で送ると、入力した内容は URL には付きません。内容は、リクエストの本体（URL とは別の部分）に入れて送られます。アドレスバーに表示されなくても、内容はサーバーに届いています。
【知識メモ】POST の結果のページで再読み込みすると
POST で表示したページで再読み込みすると、Chrome は「フォーム再送信の確認」という画面を表示します。再読み込みは、同じリクエストをもう一度送ることなので、POST では入力した内容がもう一度送られるためです。Spring入門では、同じ内容が二重に登録されないようにする工夫（PRG パターン）を学びます。
8.7 解説：フォームのタグ
| 書いたもの | 意味 |
|---|---|
<form> |
フォームの範囲を囲む。<form> と </form> の間にある入力欄の値が、送信ボタンを押したときに送られる |
action="result.html" |
送信先。ここに書いた URL に、入力した内容を付けてリクエストする。相対パスで書ける（第5章「相対パス」） |
method="get"method="post"
|
送り方。get か post を書く（8.8） |
<input type="text"> |
1行のテキストの入力欄。終了タグは書かない（第4章「終了タグを書かないタグ」） |
name="name" |
入力欄の名前。送るときに「名前=値」の組の名前になる。属性の名前も name、値（入力欄の名前）も name なので、読み間違えないようにする |
<button type="submit"> |
送信ボタン。押すと、そのボタンを囲んでいる <form> の内容が送られる。開始タグと終了タグの間の文字が、ボタンに表示される |
【ご注意】入力欄と送信ボタンは form の中に書く
送られるのは、<form> と </form> の間にある入力欄の値だけです。入力欄を </form> の後ろに書くと、その値は送られません。送信ボタンを <form> の外に書くと、押しても何も送られません。
8.8 解説：GET と POST
図8-5 GET と POST の送り方の違い
| GET | POST | |
|---|---|---|
| 入力した内容を入れる場所 | URL の ? の後ろ |
リクエストの本体 |
| アドレスバーに内容が表示されるか | 表示される | 表示されない |
| 主な使い方 | 検索のように、データを読み出すだけのとき。URL をブックマークしたり、人に送ったりできる | 登録・変更・削除のように、サーバーのデータを変えるとき |
リンクをクリックしたときや、アドレスバーに URL を入力したときのリクエストは、GET です。フォームの method を書かなかったときも、GET で送られます。
Spring入門の社員管理アプリでは、社員の登録・変更・削除のフォームは、すべて POST で送ります。データを変えるリクエストを GET にすると、URL を開いただけでデータが変わってしまうことがあるためです。
8.9 うまくいかないときは
| 症状 | 考えられる原因と対処 |
|---|---|
| 「送信」を押すと「HTTPステータス 404 – 見つかりません」と表示される |
action の送信先のつづりが違うか、result.html を作っていません。result.html が ch08 フォルダーの中にあるかを確かめてください。詳しくは付録A「ページが表示されない」を見てください。 |
| 「送信」を押しても何も起きない | 送信ボタンが <form> の外にあるか、type="submit" のつづりが違います。 |
| GET で送ったのに、URL に値が付かない入力欄がある | その入力欄に name 属性が無いか、入力欄が <form> の外にあります。 |
method="post" にしたのに、URL に値が付く |
input.html を保存していないか、Chrome で input.html を再読み込みしていません。古い input.html のまま送信しています。 |
ほかのつまずきは、付録A「よくあるつまずきと対処法」も参考にしてください。
8.10 まとめと確認問題
まとめ
- フォームは
<form action="送信先" method="送り方">で囲む。中の入力欄の値が、送信ボタンを押したときに送られる - 1行のテキストの入力欄は
<input type="text" name="名前">、送信ボタンは<button type="submit">で作る - 入力した内容は「
name 属性の名前=値」の組で送られる。name属性が無い入力欄の値は送られない - GET は内容を URL の
?の後ろに付けて送り、POST はリクエストの本体に入れて送る。データを変えるときは POST を使う - 送られた内容を読み取って表示したり登録したりするには、サーバーのプログラムが必要。Spring入門で作る
この章で使ったタグと属性は、付録B「タグの早見表」・付録B「属性の早見表」にまとめています。
確認問題
問1 入力した内容を、同じフォルダーの search.html に GET で送るフォームの開始タグを書いてください。
解答を見る
<form action="search.html" method="get"> です。
問2 次の入力欄に「総務部」と入力して GET で送信すると、URL の ? の後ろはどうなりますか。<input type="text" name="dept">
解答を見る
dept=総務部 になります。name 属性の名前と、入力した値が = でつながります。
問3 入力欄に name 属性を書かないと、どうなりますか。
解答を見る
その入力欄の値は送られません。
問4 GET と POST の違いを、アドレスバーの表示に注目して説明してください。また、社員の登録のように、サーバーのデータを変えるときはどちらを使いますか。
解答を見る
GET は入力した内容を URL の後ろに付けて送るので、アドレスバーに内容が表示されます。POST はリクエストの本体に入れて送るので、アドレスバーには表示されません。データを変えるときは POST を使います。
問5 この章の result.html に、入力した氏名が表示されないのはなぜですか。
解答を見る
result.html はただの HTML のファイルで、Tomcat は送られた内容に関係なく、ファイルの中身をそのまま返すからです。送られた内容を表示するには、サーバーの側のプログラムが必要です。