サーブレット&JSPの基本｜HTMLフォーム入門

サーブレット&JSPの基本｜HTMLフォーム入門

入力して、選んで、送信する。フォームのしくみを理解して、Webアプリケーションを利用者とつながる画面にしよう

これまでのWebページでは、サーバ側で作成した結果をブラウザへ表示する流れを学んできました。サーブレットやJSPを使えば、アクセスするたびに内容が変わるページを作ることもできます。

ただし、それだけではWebアプリケーションとしてはまだ一方通行です。サーバから利用者へ情報を返すことはできますが、利用者が画面に入力した内容をサーバへ送るしくみがなければ、検索、ログイン、会員登録、問い合わせ、注文などの機能は作れません。

そこで重要になるのがフォームです。

フォームを使うと、ブラウザ上にテキストボックス、ラジオボタン、送信ボタンなどの入力部品を配置できます。利用者が入力した内容は、送信ボタンをクリックすることで、リクエストと一緒にサーバ側のプログラムへ送られます。

この記事では、フォームの基本的なしくみ、フォーム全体の構造、代表的な入力部品、そして部品に付ける識別名について解説します。まずは、HTMLでフォームの見た目を作り、どのようにデータが送られるのかを理解していきましょう。

フォームとは

フォームとは、利用者がWebページ上でデータを入力し、その内容をサーバへ送信するためのしくみです。

たとえば、検索サイトでは検索キーワードを入力して検索ボタンを押します。ショッピングサイトでは、商品数や配送先を入力して注文します。ログイン画面では、ユーザーIDやパスワードを入力して送信します。

これらはすべて、フォームのしくみを使っています。

フォームが使われる主な場面

フォームがあることで、Webページは単に表示するだけの画面ではなく、利用者から情報を受け取れる画面になります。

サーブレットやJSPを使ったWebアプリケーションでは、フォームから送られてきたデータを受け取り、その内容に応じて処理を行います。

フォームの基本的な流れ

フォームの動きは、次のような流れで考えると分かりやすくなります。

たとえば、利用者がランチ検索フォームにカレーと入力して送信した場合、カレーというデータがサーバへ送られます。

サーバ側のプログラムは、そのカレーという値を使って検索処理を行い、検索結果をHTMLとして返します。

図1：フォームで入力データをサーバへ送信する流れ

この図から分かること

フォームでは、利用者が入力したデータをリクエストと一緒にサーバへ送信します。

ブラウザで送信ボタンをクリックすると、入力欄に入っていた値がサーバへ送られます。サーバ側では、サーブレットクラスやJSPファイルがその値を受け取り、検索や登録などの処理に利用します。

フォームは、利用者の操作とサーバ側の処理をつなぐ入口です。Webアプリケーションを本格的に作るためには、このフォームの流れを理解することがとても大切です。

フォームの構造

フォームは、複数のHTMLタグを組み合わせて作成します。

フォーム全体を表すのがformタグです。その中に、テキストボックス、ラジオボタン、送信ボタンなどの部品を配置します。

フォーム自体は、画面上に大きな枠として必ず見えるわけではありません。実際に見えるのは、フォームの中に配置した入力部品やボタンです。

フォームを構成する主な部品

フォームの見た目だけであれば、HTMLタグを書くことで作成できます。

ただし、フォームは見た目ができれば完成というわけではありません。データを正しく送信するには、送信先、送信方法、部品の識別名などを正しく指定する必要があります。

図2：基本的なフォームの構造

この図から分かること

フォームは、formタグで作る入力欄のまとまりです。

formタグの中に、テキストボックス、ラジオボタン、送信ボタンなどの部品を配置します。利用者はそれらの部品を操作してデータを入力し、送信ボタンをクリックしてサーバへ送ります。

入力部品の多くはinputタグで作成します。同じinputタグでも、type属性の値を変えることで、テキストボックス、ラジオボタン、送信ボタンなど、異なる部品として表示できます。

3つの部品を持つフォームの例

ここでは、研修参加フォームを例にします。

利用者が名前を入力し、参加したいコースを選び、送信ボタンを押すシンプルなフォームです。

研修参加フォームの例

<form action="TrainingServlet" method="post">
名前：<input type="text" name="userName"><br>
参加コース：
基礎コース<input type="radio" name="course" value="basic">
実践コース<input type="radio" name="course" value="practice"><br>
<input type="submit" value="申し込む">
</form>

このフォームには、次の3種類の部品が含まれています。

formタグのaction属性には、送信先となるサーバ側プログラムを指定します。ここではTrainingServletへ送信する形にしています。

method属性には、送信方法を指定します。ここではpostを指定しています。

このように、フォームはHTMLタグだけで見た目を作れます。しかし、正しく送信するには、各部品にname属性を付けることが大切です。

formタグの役割

formタグは、入力部品をまとめるためのタグです。

テキストボックスやラジオボタンだけを画面に置いても、それだけではどこへ送信するのかが分かりません。formタグを使うことで、どの部品をまとめて送信するのか、どのサーバ側プログラムへ送るのかを指定できます。

formタグで指定する主な属性

今回の例では、次のように記述しています。

formタグのaction属性でTrainingServletを指定し、method属性でpostを指定しています。

この設定により、フォーム内の入力データは、送信ボタンを押したときにTrainingServletへ送信されます。

入力部品には識別名が必要

フォームの部品には、サーバ側で値を取り出すための識別名を付けます。

この識別名として使うのがname属性です。

たとえば、次のテキストボックスでは、name属性にuserNameを指定しています。

inputタグのname属性がuserNameであれば、サーバ側ではuserNameという名前を使って、入力された値を取り出せます。

識別名の考え方

フォームでは、見た目のラベルとname属性を区別して考える必要があります。

画面上に名前と表示されていても、サーバ側で値を取り出すときに使うのはname属性の値です。name属性を付け忘れると、サーバ側でデータを扱えない原因になります。

図3：フォーム部品と識別名の関係

この図から分かること

フォームの各部品には、送信データを区別するための名前が必要です。

テキストボックスに入力された値は、name属性で指定した識別名と一緒に送信されます。ラジオボタンの場合も、選択されたvalue属性の値が、name属性の識別名と一緒に送られます。

サーバ側のプログラムは、name属性の値を手がかりにして送信データを取り出します。そのため、部品の識別名を正しく付けることが、フォーム作成ではとても重要です。

フォームの部品

HTMLには、データ入力や送信のための部品が用意されています。

これらの部品は、コントロールとも呼ばれます。テキストボックス、ラジオボタン、パスワードボックス、チェックボックス、テキストエリア、ドロップダウンメニュー、送信ボタンなどがあります。

今回の範囲では、基本的なフォームでよく使うテキストボックス、ラジオボタン、送信ボタンを中心に見ていきます。

主なフォーム部品

フォーム部品はタグを書けば表示できます。ただし、どの値をどの名前で送るのかを意識しないと、サーバ側で正しく受け取れません。

部品① テキストボックス

テキストボックスは、1行の文字を入力するための部品です。

名前、メールアドレス、検索キーワード、件名など、短い文字列を入力するときによく使います。

基本形は次のとおりです。

type属性にtextを指定すると、1行入力用のテキストボックスになります。

name属性には、サーバ側でデータを取り出すための識別名を指定します。

テキストボックスの例

テキストボックスに入力された文字列は、送信時にname属性の値と一緒にサーバへ送られます。

たとえば、name属性がuserNameのテキストボックスに青山 直人と入力した場合、サーバ側ではuserNameという名前に対応する値として青山 直人を受け取れます。

部品② ラジオボタン

ラジオボタンは、複数の選択肢の中から1つだけを選ぶための部品です。

たとえば、会員種別、参加コース、支払い方法、性別、満足度など、1つだけ選んでほしい項目に使います。

基本形は次のとおりです。

type属性にradioを指定すると、ラジオボタンになります。

ラジオボタンで特に重要なのは、同じグループにしたい選択肢のname属性を同じ値にすることです。

ラジオボタンの例

この2つのラジオボタンは、どちらもname属性がcourseです。そのため、同じ選択肢グループとして扱われます。

利用者は、基礎コースまたは実践コースのどちらか一方だけを選べます。

送信されるのは、画面に表示されている文字そのものではなく、選択されたラジオボタンのvalue属性の値です。

たとえば、実践コースを選んだ場合、courseという名前でpracticeという値が送信されます。

ラジオボタンではname属性を同じにする

通常、フォーム部品のname属性は重複させないことが大切です。

しかし、ラジオボタンでは例外があります。同じ質問に対する選択肢は、同じname属性を使って1つのグループにします。

正しいグループ化の例

このように同じname属性にすると、ブラウザは2つのラジオボタンを1つのグループとして扱います。

間違いやすい例

name属性が異なると、別々のグループとして扱われます。その結果、複数のラジオボタンを同時に選べてしまうことがあります。

ラジオボタンでは、1つの質問に対する選択肢のname属性をそろえることが大切です。

部品③ 送信ボタン

送信ボタンは、フォームに入力されたデータをサーバへ送信するための部品です。

基本形は次のとおりです。

type属性にsubmitを指定すると、送信ボタンになります。

value属性の値は、ボタン上に表示される文字になります。

送信ボタンの例

送信ボタンをクリックすると、formタグの中にある入力部品の値がまとめて送信されます。

送信ボタン自体には、必ずしもname属性は必要ありません。重要なのは、フォーム内に送信ボタンがあり、利用者が送信操作を行えることです。

name属性を付け忘れるとどうなるか

フォーム部品にname属性を付け忘れると、サーバ側でその値を取り出せなくなることがあります。

たとえば、テキストボックスに名前を入力できるようにしていても、name属性がなければ、サーバ側でどの名前のデータとして扱えばよいのか分かりません。

name属性の有無による違い

フォームの見た目だけを確認していると、name属性の付け忘れに気づきにくいことがあります。テキストボックスやラジオボタンが画面に表示されていても、送信データとして正しく扱えるとは限りません。

フォームを作成するときは、入力部品を配置するだけでなく、name属性が適切に付いているかを確認しましょう。

フォーム作成で最初に意識したいこと

フォームは、HTMLタグを書けば見た目を作ることはできます。

しかし、Webアプリケーションとして正しく動かすには、入力されたデータをどのような名前で、どこへ送るのかを理解する必要があります。

最初に確認したいポイント

フォームは、利用者がWebアプリケーションへデータを渡すための入口です。

見た目だけでなく、データがどの名前で送られるのかを意識して作ることで、サーブレットやJSPと連携しやすいフォームになります。