Webアプリケーション作成に欠かせないHTMLフォームの基礎 #Java

フォームについて

Webアプリケーションを作成する上で重要な技術の一つである「フォーム」についての記事です。
フォームを使うことでユーザーがWebアプリケーションにデータを入力できるようになります。

フォームの基礎(フォームの構造、部品、作成、データ送信の仕組み)
リクエストパラメータの取得
フォームを使ったプログラムの作成方法

以上の3点について順を追って解説していきます。

先に全体のコードを読んでおくと最初の説明が分かりやすくなると思います。→フォームを使ったプログラムの作成方法

フォームの基礎

フォームを使うと、Webページに入力したデータをサーバサイドプログラムに送信することができます。

ここからはフォームの基礎である4つの項目を1つずつ説明していきます。

フォームの構造
フォームの部品
フォームの作成
データ送信の仕組み

1. フォームの構造

フォームはHTMLの複数のタグを組み合わせて作成します。
入力項目のひとまとまりがフォームです。

1,テキストボックス
(inputタグ:type属性="text")
2,ラジオボタン
(inputタグ:type属性="radio")
3,登録ボタン
(inputタグ:type属性="submit")

<form action="/example/FormSampleServlet" method="post">
名前:<br>
<input type="text" name="name"><br>//テキストボックス
性別:<br>
男<input type="radio" name="gender" value="0">//ラジオボタン
女<input type="radio" name="gender" value="1">//ラジオボタン
<input type="submit" value="登録">//登録ボタン
</form>

2. フォームの部品

フォームの中にはデータ入力や送信のための部品(コントロール)を入れます。
例：

名前

<input type="text" name="name">

部品名:name
部品の作成自体はタグを書くだけです。気を付けるところは、部品の名前です。各部品には識別のために固有の名前を付ける必要があります。

3. フォームの作成

フォームはformタグで作成します。
formタグの外に部品を書くと、その部品の値は送信されないので注意が必要。

名前

<form action="/example/FormSampleServlet" method="post">
//部品
</form>

フォームの構文

<form action="送信先" method="リクエストメソッド(get/post)">
//部品
</form>

action属性：送信先を指定する
サーブレットクラスの場合→＜アプリケーション名＞/＜URLパターン＞
JPSファイルの場合→＜アプリケーション名＞/＜WebContentパス＞

method属性：リクエストメソッドを指定する
get(GETリクエスト)かpost(POSTリクエスト)

4. データ送信の仕組み

フォームの登録ボタンをクリックすると、フォームの部品に入力したデータは「部品名＝値」の形式で登録kされます。この「部品名＝値」のことをリクエストパラメータといいます。
リクエストパラメータを送信するリクエストのメソッドには、GETまたはPOSTを使用します。
ではどちらを使用していくか？GETリクエスト、POSTリクエストの違いを見ていきましょう。

GETリクエスト	POSTリクエスト
新しい情報を取得(検索)	フォームに入力したデータを登録(ユーザー登録)
送信した結果を保存共有	データをアドレスバーに表示したくない

リクエストパラメータの取得

リクエストパラメータは、アプリケーションサーバによって「HttpServletRequest」インスタンスに格納され、リクエスト先のサーブレットクラスまたはJSPファイルに渡されます。

リクエストパラメータを取得するサーブレットクラス

@WebServlet("/FormSampleServlet")
public class FormSampleServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //リクエストパラメータの文字コードを指定
        request.setCharacterEncoding("UTF-8");

　　　　　//リクエストパラメータの取得
        String name=request.getParameter("name");
        String gender=request.getParameter("gender");

フォームを使ったプログラムの作成方法

以下のユーザー登録を行うようなプログラムを作成します。

コードは以下の通りです。

JSPファイル

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ユーザー登録もどき</title>
</head>
<body>

<form action="/example/FormSampleServlet" method="post">
名前:<br>
<input type="text" name="name"><br>
性別:<br>
男<input type="radio" name="gender" value="0">
女<input type="radio" name="gender" value="1">
<input type="submit" value="登録">
</form>
</body>
</html>

サーブレットクラス

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class FormSampleServlet
 */
@WebServlet("/FormSampleServlet")
public class FormSampleServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //リクエストパラメータの取得
        request.setCharacterEncoding("UTF-8");
        String name=request.getParameter("name");
        String gender=request.getParameter("gender");

        //リクエストパラメータをチェック
        String errorMsg="";
        if (name==null||name.length()==0) {
            errorMsg+="名前が入力されていません<br>";
        }
        if (gender==null||gender.length()==0) {
            errorMsg+="性別が選択されていません<br>";
        }else {
            if (gender.equals("0")) {gender="男性";}
            else if (gender.equals("1")) {gender="女性";}
        }
        //表示するメッセージ設定
        String msg=name+"さん("+gender+")を登録しました";
        if (errorMsg.length()!=0) {
            msg=errorMsg;
        }
        //HTML出力
        response.setContentType("text/html; charset=UTF-8");
        PrintWriter out=response.getWriter();
        out.println("<!DOCTYPE html>");
        out.println("<html>");
        out.println("<head>");
        out.println("<meta charset=\"UTF-8\">");
        out.println("<title>ユーザー登録もどき</title>");
        out.println("</head>");
        out.println("<body>");
        out.println("<p>"+msg+"<p>");
        out.println("</body>");
        out.println("</html>");
    }

}