サーブレット&JSPの基本｜フォームの作成とデータ送信

サーブレット&JSPの基本｜フォームの作成とデータ送信

フォームは入力データを送る小包。送信先と送り方を指定して、サーバへ正しく届けよう

フォームの部品には、テキストボックス、ラジオボタン、送信ボタンなどがあります。しかし、部品を画面に置くだけでは、入力されたデータをサーバへ送ることはできません。

フォームで大切なのは、部品をformタグの中にまとめ、送信先と送信方法を指定することです。

formタグは、入力部品をまとめる箱のような役割を持ちます。そして、action属性でどこへ送るのか、method属性でどの方法で送るのかを指定します。利用者が送信ボタンをクリックすると、フォーム内の入力値がリクエストパラメータとしてサーバ側のプログラムへ送信されます。

この記事では、formタグの基本的な書き方、action属性とmethod属性の役割、入力データがリクエストパラメータとして送られるしくみ、そしてGETリクエストとPOSTリクエストの違いを順番に解説します。

フォームは、Webアプリケーションが利用者から情報を受け取るための入口です。見た目を作るだけでなく、送信されるデータの形や送信方法まで理解しておくと、サーブレットやJSPとの連携がとても分かりやすくなります。

フォームはformタグで作成する

フォーム全体はformタグで作成します。

formタグの中には、テキストボックスやラジオボタン、送信ボタンなどのフォーム部品を配置します。送信ボタンをクリックすると、formタグの中にある部品の値がまとめて送信されます。

反対に、formタグの外に書かれた部品の値は、基本的にそのフォームの送信対象にはなりません。

formタグの基本的な役割

フォームは、単なる見た目の枠ではありません。どの入力部品を、どのプログラムへ、どの方法で送るのかを決める重要なまとまりです。

formタグの外にある部品は送信されない

フォーム部品は、formタグの中に書く必要があります。

たとえば、画面上ではテキストボックスが表示されていても、そのテキストボックスがformタグの外にある場合、送信ボタンをクリックしても値が送られません。

フォームを作成するときは、次のように考えると分かりやすいです。

入力欄が画面に見えていることと、データとして送信されることは別です。

フォームがうまく動かないときは、まず対象のinputタグがformタグの中に入っているかを確認しましょう。

また、1つのformタグの中に送信ボタンを複数入れると、どの操作で何を送るのかが分かりにくくなることがあります。学習の段階では、1つのformタグにつき送信ボタンは原則1つにしておくと、フォームの動きが理解しやすくなります。

図1：formタグで送信対象をまとめる

この図から分かること

formタグは、送信対象となる入力部品をまとめる役割を持っています。

テキストボックスやラジオボタンが画面に表示されていても、formタグの外にある場合は、そのフォームの送信対象にはなりません。送信ボタンをクリックしたときに送られるのは、formタグの中にある部品の値です。

また、formタグにはaction属性とmethod属性を指定します。action属性で送信先を決め、method属性でGETリクエストにするかPOSTリクエストにするかを指定します。

formタグの基本構文

formタグは、次のような形で記述します。

action属性には、送信先となるサーバ側プログラムを指定します。

method属性には、送信時に使用するリクエストメソッドを指定します。指定できる代表的な値はgetとpostです。

formタグで使う主な属性

フォームは、送るものを中に入れ、action属性で宛先を書き、method属性で送り方を書くものと考えると分かりやすいです。

小包でたとえるなら、formタグの中身が荷物、action属性が宛先、method属性が配送方法です。

action属性で送信先を指定する

action属性には、フォームの送信先を指定します。

送信先には、サーブレットクラスやJSPファイルを指定できます。送信ボタンをクリックすると、ブラウザはaction属性に書かれた送信先へリクエストを送ります。そのとき、フォームに入力されたデータも一緒に送信されます。

action属性に指定する内容

たとえば、送信先がサーブレットで、そのURLパターンがRegisterServletの場合は、action属性にRegisterServletを指定します。

送信先がJSPファイルで、src/main/webapp/result.jspに保存されている場合は、action属性にresult.jspを指定します。

このように、サーブレットへ送る場合とJSPへ送る場合では、指定する考え方が少し異なります。

method属性で送信方法を指定する

method属性には、フォームを送信するときのリクエストメソッドを指定します。

代表的な指定はgetとpostです。

method属性を省略した場合は、GETリクエストとして送信されます。

ただし、フォームを作成するときは、意図が伝わるようにmethod属性を明示するのがおすすめです。検索のように情報を取得する場合はget、登録や投稿のように情報を送って保存する場合はpostを使うのが基本です。

フォームを作成する例

ここでは、イベント参加申し込みフォームを作成します。

利用者が名前と年齢を入力し、参加区分を選んで送信するフォームです。送信先はEntryServletというサーブレットにします。登録系のデータ送信なので、method属性にはpostを指定します。

イベント参加申し込みフォームの例

<form action="EntryServlet" method="post">
名前：<input type="text" name="userName"><br>
年齢：<input type="text" name="userAge"><br>
参加区分：
学生<input type="radio" name="entryType" value="student">
社会人<input type="radio" name="entryType" value="worker"><br>
<input type="submit" value="申し込む">
</form>

このフォームでは、formタグの中に3種類の入力部品を配置しています。

送信ボタンをクリックすると、formタグの中にある入力データがEntryServletへ送信されます。

たとえば、名前に青山 直人、年齢に23、参加区分に学生を選んだ場合、userName、userAge、entryTypeという識別名に対応する値が送信されます。

送信されるデータはリクエストパラメータになる

フォームの送信ボタンをクリックすると、フォームに入力されたデータは、部品名=値の形式で送信されます。

この部品名=値の形式で送られるデータをリクエストパラメータと呼びます。

たとえば、event-entry.htmlで次のように入力したとします。

この場合、送信されるデータは次のような形になります。

userName=青山 直人&userAge=23&entryType=student

複数のリクエストパラメータは、&でつながれて送信されます。

リクエストパラメータの基本

ここでいう部品名は、inputタグのname属性の値です。画面上のラベルではありません。

名前という文字が画面に表示されていても、サーバ側で使う識別名はuserNameです。

図2：フォームデータがリクエストパラメータになるしくみ

この図から分かること

フォームに入力されたデータは、送信時に部品名=値の形へ変換されます。

部品名として使われるのは、inputタグのname属性です。テキストボックスに入力した文字や、ラジオボタンで選ばれたvalue属性の値が、name属性と組み合わされて送信されます。

複数の入力データがある場合は、&でつながれます。サーバ側のサーブレットやJSPは、このリクエストパラメータを受け取り、入力内容を使って処理を行います。

URLエンコードとは

フォームから送信されるリクエストパラメータは、そのままの見た目で送られるとは限りません。

日本語や空白、記号など、URLで扱いにくい文字はURLエンコードという変換処理が行われます。

たとえば、検索キーワードとしてJava入門を送信する場合、次のような形に変換されることがあります。

key=Java%E5%85%A5%E9%96%80

この例では、Javaの部分は半角英字なのでそのまま残っています。一方、入門の部分はURLで安全に送れる形へ変換されています。

URLエンコードの基本

URLエンコードは、ブラウザが使用する文字コードをもとに行われます。

そのため、サーバ側のプログラムでは、同じ文字コードを使って元の文字列へ戻す必要があります。UTF-8でURLエンコードされたデータであれば、サーバ側でもUTF-8として扱うことが大切です。

学習中の説明では読みやすさを優先して、userName=青山 直人のように変換前の形で表すことがあります。ただし、実際の通信ではURLエンコードされた形で送られることを覚えておきましょう。

URLエンコードが必要な理由

URLには、そのまま使える文字と、変換が必要な文字があります。

日本語や一部の記号をそのままURLに含めると、環境によって正しく扱えない場合があります。そのため、ブラウザは安全に送信できる形へ変換します。

たとえば、Java入門というキーワードを送る場合、入門のような日本語部分はUTF-8などの文字コードを使って変換されます。

URLエンコードの流れ

この流れを理解しておくと、日本語の入力値を扱うときに文字コードが重要であることが分かります。

GETリクエストとPOSTリクエスト

フォームのデータ送信では、GETリクエストまたはPOSTリクエストを使います。

どちらを使うかは、formタグのmethod属性で指定します。

GETとPOSTは、どちらもサーバへリクエストを送る方法ですが、使いどころとリクエストパラメータの送り方が異なります。

基本的な使い分け

検索のように、入力した条件を使って情報を取得する場合はGETを使うのが基本です。

一方、会員登録や掲示板への投稿、イベント申し込みのように、入力した内容をサーバ側へ登録する場合はPOSTを使うのが基本です。

今回のevent-entry.htmlは参加申し込みを送るフォームなので、method属性にはpostを指定しています。

GETリクエストで送信する場合

GETリクエストでは、リクエストパラメータがURLの末尾に付加されます。

たとえば、送信先がSearchServletで、検索キーワードとしてJava入門を送る場合、URLは次のような形になります。

http://localhost:8080/study/SearchServlet?key=Java入門

実際には、日本語部分はURLエンコードされるため、ブラウザのアドレスバーでは変換された形で表示されることがあります。

GETリクエストでは、アドレスバーにリクエストパラメータが見えるため、検索条件を含んだURLをブックマークしたり、ほかの人へ共有したりしやすいという特徴があります。

GETリクエストの特徴

ただし、入力内容がURLに表示されるため、パスワードや個人情報の送信には向いていません。

POSTリクエストで送信する場合

POSTリクエストでは、リクエストパラメータはURLの末尾ではなく、リクエストのボディ部に入れて送信されます。

そのため、ブラウザのアドレスバーには、基本的に送信先のURLだけが表示されます。

たとえば、event-entry.htmlでEntryServletへPOST送信する場合、アドレスバーには次のように表示されます。

http://localhost:8080/study/EntryServlet

名前や年齢などのリクエストパラメータは、アドレスバーには表示されません。

POSTリクエストの特徴

POSTは、登録や投稿など、サーバ側の状態を変える処理に使うのが基本です。

また、パスワードや個人情報など、アドレスバーに表示したくない情報を送る場合にもPOSTを使います。

図3：GETとPOSTでリクエストパラメータの見え方が変わる

この図から分かること

GETリクエストとPOSTリクエストでは、リクエストパラメータの送信方法が異なります。

GETリクエストでは、リクエストパラメータがURLの末尾に付きます。そのため、ブラウザのアドレスバーに送信内容が表示されます。

POSTリクエストでは、リクエストパラメータがリクエストのボディ部に入ります。そのため、アドレスバーには送信先のURLだけが表示され、入力データは表示されません。

この違いを理解すると、検索にはGET、登録や投稿にはPOSTを使うという基本的な使い分けが分かりやすくなります。

GETとPOSTの使い分け

GETとPOSTは、単に見えるか見えないかだけで決めるものではありません。

基本的には、リクエストパラメータを使って何をするのかで選びます。

HTTPの考え方に基づく使い分け

たとえば、検索フォームでは、入力したキーワードを使って情報を取得します。そのためGETが向いています。

一方、イベント申し込みフォームでは、入力内容をサーバ側に登録することが目的です。そのためPOSTが向いています。

URLに表示したくない情報はPOSTを使う

GETリクエストでは、リクエストパラメータがURLの末尾に表示されます。

そのため、パスワード、住所、電話番号、メールアドレス、個人情報、機密情報などをGETで送信するのは避けます。

ブラウザのアドレスバーは、自分だけが見るとは限りません。近くの人に画面を見られることもあります。会議室や授業中に画面を投影している場合、入力内容が周囲に見える可能性もあります。

さらに、リクエストに使われたURLはブラウザの履歴に残ることがあります。通信機器やサーバのログに記録されることもあります。

GETで送ると注意が必要な情報

このような情報を送る場合はPOSTを使用します。

ただし、POSTにすればすべて安全になるわけではありません。POSTはアドレスバーに表示されにくいだけで、通信内容そのものを暗号化する機能ではありません。

POSTでも通信が暗号化されるわけではない

POSTリクエストでは、リクエストパラメータがアドレスバーに表示されません。そのため、GETよりも入力内容が画面上で見えにくくなります。

しかし、POSTを使っただけで通信内容が完全に守られるわけではありません。

HTTP通信は暗号化されていないため、通信経路上で内容を盗み見られる危険があります。パスワードや個人情報などを安全に送信するには、HTTPSのように通信を暗号化する仕組みが必要です。

POSTとHTTPSの違い

POSTは、データをURLに表示しないための送信方法です。

HTTPSは、通信そのものを暗号化するための仕組みです。

この2つは役割が違います。個人情報やパスワードを扱うWebアプリケーションでは、POSTとHTTPSを組み合わせて使うことが大切です。

その他のリクエストメソッド

フォームでよく使うリクエストメソッドはGETとPOSTです。

ただし、HTTPにはほかにもリクエストメソッドがあります。代表的なものとして、PUTやDELETEがあります。

ただし、HTMLフォームだけでPUTやDELETEを直接扱う場面は多くありません。これらを使うには、JavaScriptやWeb APIなど、別の技術と組み合わせることがあります。

まずは、フォームの基本としてGETとPOSTの違いをしっかり理解しておきましょう。

フォーム作成で確認したいポイント

フォームを作成するときは、見た目だけでなく、送信に関わる設定を確認することが大切です。

フォームは、送るデータを部品として用意し、formタグでまとめ、action属性で宛先を決め、method属性で送り方を決めるしくみです。

この流れを押さえておくと、サーブレットやJSPでフォームデータを受け取る学習へ進んだときにも理解しやすくなります。