フォームについて
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");
フォームを使ったプログラムの作成方法
以下のユーザー登録を行うようなプログラムを作成します。
コードは以下の通りです。
<%@ 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>");
}
}