動的Webプロジェクト④色々なForm

前回から続く動的Webプロジェクトについての連載です。
①サーブレット
②JSP
③Get/Post
④色々なForm(今回)

今回のテーマは、色々なFormについてです。

Formは、HTMLの仕様になるので、若干Javaとは話がそれますが、
Webアプリ開発においては、HTMLの知識も必要となるので、説明させて頂きます。

機能記載例補足説明
テキスト入力<input type="text" name="①" value="②">①名前、②デフォルト表示
テキストエリア<textarea rows="①" cols="②" name="③">①列数、②文字数、③名前
ラジオボタン<input type="radio" name="①" value="②">③①名前、②送信される内容、③表示させる内容
チェックボックス<input type="checkbox" name="①" value="②">③①名前、②送信される内容、③表示させる内容
セレクト<select name="①" size="②">
<option value="③">④
</select>
①名前、②行数、③送信される内容、④表示させる内容
隠し項目<input type="hidden" name="①" value="②">①名前、②送信される内容
送信ボタン<input type="submit" name="①">①ボタンに表示する文字
リセットボタン<input type="reset" value="①">①ボタンに表示する文字

実装手順 ①Webプロジェクトの作成(前回のものを流用のため不要)
②JSP側で、色々なフォームを作成
③サーブレット側で、doPostを作成
④Webプロジェクトのサーバー構成に追加(前回のものを流用のため不要)

①Webプロジェクトの作成(前回のものを流用のため不要)

②JSP側で、色々なフォームを作成

ServletGetPost/src/main/webapp/jspで右クリックして、新規→JSPを選択
JSPのファイル名をVariousForm.jspにします。

ここは、特に変更は不要です。完了ボタンを押下します。

JSPのひな型が作成できました。

以下のように、<body>~</body>部分のJSPを実装します。

formタグで、ServletVariousFormを宛先に指定して、postでリクエストします。

③サーブレット側でdoPostメソッドを作成

以下のように、doPostメソッドを実装します。
行数説明
41ひな形の行でしたが、不要なのでコメントにしています。
42文字コードをUTF-8に設定しています。
43Webページ出力用のオブジェクトを生成しています。
45リクエストに含まれる入力パラメータ名をすべて取得しています。
46パラメータ名が存在していれば、繰り返す条件です。
47パラメータ名を順番に取得します。
48パラメータの値を取得します。同じパラメータ名で複数値を持っている場合もあります。
49値の個数分繰り返します。
50Webページに、パラメータ名+値を出力します。

④Webプロジェクトのサーバー構成に追加(前回のものを流用のため不要)

これで、準備は整いました。では、サーバーを起動しましょう。
以下のURLを打ってください。

http://localhost:8080/ServletGetPost/jsp/VariousForm.jsp

以下の初期画面が表示します。では、実験してみましょう。

実際に入力して、送信ボタンを押してみましょう。

以下のように、結果をWebページに表示すれば成功です。

☆まとめ☆ 色々なFormについて学びました。
Fomrは、HTMLの仕様となります。
JSPは、HTML上に記述するので、HTMLの知識も必要となります。
Webアプリ開発には必要な知識になると思います。
少しづつでも慣れていただければと思います。

■ソースコードのコピーペースト用に記載します。

ServletVariousForm.java

package app;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Enumeration;

import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

/**
* Servlet implementation class ServletVariousForm
*/
public class ServletVariousForm extends HttpServlet {
  private static final long serialVersionUID = 1L;

  /**
  * @see HttpServlet#HttpServlet()
  */
  public ServletVariousForm() {
    super();
    // TODO Auto-generated constructor stub
  }

  /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doGet(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    // TODO Auto-generated method stub
    response.getWriter().append("Served at: ").append(request.getContextPath());
  }

  /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
  protected void doPost(HttpServletRequest request, HttpServletResponse response)
      throws ServletException, IOException {
    // TODO Auto-generated method stub
    //doGet(request, response);
    response.setContentType("text/plain; charset=UTF-8");
    PrintWriter out =response.getWriter();

    Enumeration nameList = request.getParameterNames();
    while(nameList.hasMoreElements()) {
      String name = nameList.nextElement();
      String[] value = request.getParameterValues(name);
      for(int i=0; i        out.println(name+"="+value[i]);
      }
    }
    
    
  }

}

VariousForm.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%--JSPコメント POSTメソッドで送信 --%>
<form action="../ServletVariousForm" method="post">
テキストボックス<br>
<input type="text" name="message"><br>
テキストエリア<br>
<textarea rows="3" cols="20" name="textarea">テキストエリアデフォルト</textarea><br>
ラジオボタン<br>
<input type="radio" name="radio" value="radio1">男
<input type="radio" name="radio" value="radio2">女<br>
チェックボックス<br>
<input type="checkbox" name="check1" >テレビ
<input type="checkbox" name="check2" >音楽
<input type="checkbox" name="check3" >スポーツ<br>
セレクト<br>
<select name="select" size="3" multiple=true>
  <option value="sel1">お寿司
  <option value="sel2">焼肉
  <option value="sel3">ハンバーグ
</select><br>
<input type="hidden" name="hidden" value="隠し項目">
<input type="submit" value="フォームでpost送信">
<input type="reset">
</form>
</body>
</html>

Follow me!