ぼんの備忘録

【Spring MVC】さまざまなフォーム部品の使用方法その１

Spring 【Spring MVC】さまざまなフォーム部品の使用方法その１
目次

概要

Spring MVCにてさまざまなフォーム部品を扱う方法についてまとめた。
テキストボックス、ラジオボタン、チェックボックスなどを画面表示⇒POST送信⇒取得する方法について紹介する。

 

前提

Mavenプロジェクトの作成方法と基本的な画面疎通については以下を参照。

あわせて読みたい
【Spring MVC】Mavenプロジェクトのセットアップ

概要 Spring MVCフレームワークを使用して開発を進める際、Mavenプロジェクトの基本的なセットアップ方法についてまとめた。   前提 プロジェクトの具体的な作成方法については以下に記載。 [siteca[…]

【Spring MVC】Mavenプロジェクトのセットアップ

 

あわせて読みたい
【Spring】Spring MVCでHello Worldする方法（XMLベース）

概要 Springを学びなおすにあたり、Spring MVCでHello Worldしたのでその基本的な方法についてまとめた。 前回はBean定義ファイルをJavaのアノテーションベースで作成したが、今回はXMLベースで作成する。 […]

【Spring】Spring MVCでHello Worldする方法（XMLベース）アイキャッチ画像

 

事前準備

フォーム部品を表示する画面、コントローラー、フォームを作成する。

 

FooController.java


package com.example.prototype.web.controller.foo;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;

import com.example.prototype.web.form.foo.FooForm;

@Controller
@RequestMapping(value = "foo") // ①
public class FooController {
	/** ロガー */
	private static final Logger logger = LoggerFactory.getLogger(FooController.class);
	
	// フォーム入力画面へリダイレクト
	@GetMapping("/") // ②
	public String top() {
		return "redirect:/foo/input"; // ③
	}
	// フォーム入力画面表示
	@GetMapping(value = "input") // ④
	public String input(Model model) {
		model.addAttribute("fooForm", new FooForm());
		return "foo/input";
	}
}

 

@RequestMapping(value = “foo”) // ①

「http://コンテキストパス/foo」から始まるURLと紐づけるURLマッピング設定。

 

@GetMapping(“/”) // ②

「http://コンテキストパス/foo/」にGETリクエストした際に紐づけるURLマッピング設定。

 

return “redirect:/foo/input”; // ③

「http://コンテキストパス/foo/input」にリダイレクトする。

 

@GetMapping(value = “input”) // ④

「http://コンテキストパス/foo/input」にGETリクエストした際に紐づけるURLマッピング設定。
FooFormインスタンスを作成して画面に渡している。

 

FooForm.java


package com.example.prototype.web.form.foo;

import java.io.Serializable;

import lombok.Data;

@Data
public class FooForm implements Serializable{
	// フォーム部品を追加していく
}

 

FooFormのフィールドに画面に表示させたいフォーム部品と紐づく変数を宣言していく。

 

input.jsp


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<%@ include file="/WEB-INF/common/header_common.jsp"%>
<title>さまざまなフォーム部品</title>
</head>
<body>
	<div class="container mt-5">
		<h2 class="text-center">さまざまなフォーム部品</h2>
		<form:form modelAttribute="fooForm" class="mt-4">
			<table class="table table-bordered">
				<tr>
					<!-- ここにフィールドをバインドさせる -->
				</tr>
			</table>
			<div class="form-group text-center">
				<button type="submit" name="send" class="btn btn-primary">送信</button>
			</div>
		</form:form>
	</div>
</body>
</html>

 

<button type=”submit” name=”send” class=”btn btn-primary”>送信</button>
name属性に”send”と指定することで、POSTのリクエストボディにsendを追加する。
※後述する@PostMappingアノテーションに紐づける

 

さまざまなフォーム部品

さまざまなフォーム部品の使用方法について紹介する。

 

テキストフィールド

テキストフィールドを表示してフォームにバインドする。

 

フォーム

String型のnameフィールドを追加する。

FooForm.java


// 名前
private String name;

 

画面

jspにテキストボックスを追加する。

input.jsp


<table class="table table-bordered">
	<tr>
		<th class="col-3">名前</th>
		<td class="col-7">
			<form:input path="name" cssClass="form-control" />
		</td>
	</tr>
</table>

 

<form:input path=”name” cssClass=”form-control” />

上記の<form>タグを指定しjspを作成すると、HTML出力時には以下のように出力される。

<input id=”name” name=”name” class=”form-control” type=”text” value=””>

 

コントローラー

送信された値はフォームにバインドされる。

FooController.java


// 送信パラメータの取得
@PostMapping(value = "input", params = "send") // ①
public String send(@ModelAttribute("fooForm") FooForm form) { // ②
	logger.info("★★★name：" + form.getName() + "★★★\n");
	return "redirect:/foo/input";
}

 

@PostMapping(value = “input”, params = “send”) // ①

画面側にてPOST送信且つ、<button>タグのname属性に”send”と指定したことによりハンドラメソッドと紐づくマッピング設定。

 

public String send(@ModelAttribute(“fooForm”) FooForm form) { // ②

画面から送信された”fooForm”（<form>タグに設定）をFooFormオブジェクトに紐づけている。
上記を記載することで、画面入力値がフォームオブジェクトのフィールドにバインドされる。

 

数値フィールド

数値フィールドを表示してフォームにバインドする。

 

フォーム

Integer型のageフィールドを追加する。
※プリミティブのint型にするとデフォルトで0を保持するため、数値フィールドに「0」が表示されるので注意

FooForm.java


// 年齢
private Integer age;

 

画面

jspに数値フィールドを追加する。

input.jsp


<tr>
	<th class="col-3">年齢</th>
	<td class="col-7">
		<form:input path="age" type="number" cssClass="form-control" />
	</td>
</tr>

 

<form:input path=”age” type=”number” cssClass=”form-control” />

上記の<form>タグを指定しjspを作成すると、HTML出力時には以下のように出力される。

<input id=”age” name=”age” class=”form-control” type=”number” value=””>

 

パスワードフィールド

パスワードフィールドを表示してフォームにバインドする。

 

フォーム

String型のpasswordフィールドを追加する。

FooForm.java


// パスワード
private String password;

 

画面

jspにパスワードフィールドを追加する。

input.jsp


<tr>
	<th class="col-3">パスワード</th>
	<td class="col-7">
		<form:password path="password" cssClass="form-control" />
	</td>
</tr>

 

<form:password path=”password” cssClass=”form-control” />

上記の<form>タグを指定しjspを作成すると、HTML出力時には以下のように出力される。

<input id=”password” name=”password” class=”form-control” type=”password” value=””>

 

日付フィールド

日付フィールドを表示してフォームにバインドする。

 

フォーム

Date型のbirthdayフィールドを追加する。

FooForm.java


// 生年月日
@DateTimeFormat(pattern = "yyyy-MM-dd") // ①
private Date birthday;

 

@DateTimeFormat(pattern = “yyyy-MM-dd”) // ①

画面から送られた文字列の日付パラメータをDate型に変換するためのフォーマット。

 

画面

jspに日付フィールドを追加する。

input.jsp


<tr>
	<th class="col-3">生年月日</th>
	<td class="col-7">
		<form:input type="date" path="birthday" cssClass="form-control" />
	</td>
</tr>

 

<form:input type=”date” path=”birthday” cssClass=”form-control” />

上記の<form>タグを指定しjspを作成すると、HTML出力時には以下のように出力される。

<input id=”birthday” name=”birthday” class=”form-control” type=”date” value=””>

 

 テキストエリア

テキストエリアを表示してフォームにバインドする。

 

フォーム

String型のbikouフィールドを追加する。

FooForm.java


// 備考
private String bikou;

 

画面

jspにテキストエリアを追加する。

input.jsp


<tr>
	<th class="col-3">備考</th>
	<td class="col-7">
		<form:textarea path="bikou" cssClass="form-control" rows="5" />
	</td>
</tr>

 

<form:textarea path=”bikou” cssClass=”form-control” rows=”5″ />

上記の<form>タグを指定しjspを作成すると、HTML出力時には以下のように出力される。

<textarea id=”bikou” name=”bikou” class=”form-control” rows=”5″></textarea>

 

チェックボックス

チェックボックスを表示してフォームにバインドする。

 

単体の場合

1つのチェックボックスを表示してフォームにバインドする。

 

フォーム

String型のisAcceptフィールドを追加する。

FooForm.java


// 同意確認
private String isAccept;

 

画面

jspにチェックボックスを追加する。

input.jsp


<tr>
	<th class="col-3">同意確認</th>
	<td class="col-7">
		<div class="form-check">
			<form:checkbox path="isAccept" cssClass="form-check-input" value="1" label="同意する" />
		</div>
	</td>
</tr>

 

<form:checkbox path=”isAccept” cssClass=”form-check-input” value=”1″ label=”同意する” />

上記の<form>タグを指定しjspを作成すると、HTML出力時には以下のように出力される。

<input id=”isAccept1″ name=”isAccept” class=”form-check-input” type=”checkbox” value=”1″>
<label for=”isAccept1″>同意する</label>
<input type=”hidden” name=”_isAccept” value=”on”>

 

複数の場合

複数のチェックボックスを表示してフォームにバインドする。

 

フォーム

List<String>型のrolesを定義する。

<FooForm.java


// 認証者確認
private List<String> roles;

 

画面

<form>タグで意図したCSSをきかせることができなかったため、以下のように実装した。

input.jsp


<tr>
	<th class="col-3">認証者確認</th>
	<td class="col-7">
		<div class="form-group">
			<div class="form-check">
				<form:checkbox path="roles" cssClass="form-check-input" value="1" />
				<label class="form-check-label" for="roles1">利用者</label>
			</div>
			<div class="form-check">
				<form:checkbox path="roles" cssClass="form-check-input" value="2" />
				<label class="form-check-label" for="roles2">管理者</label>
			</div>
			<div class="form-check">
				<form:checkbox path="roles" cssClass="form-check-input" value="3" />
				<label class="form-check-label" for="roles3">承認者</label>
			</div>
		</div>
	</td>
</tr>

 

ラジオボタン

ラジオボタンを表示してフォームにバインドする。

 

フォーム

String型のgenderフィールドを追加する。

FooForm.java


// 性別
private String gender;

 

画面

jspにラジオボタンを追加する。

input.jsp


<tr>
	<th class="col-3">性別</th>
	<td class="col-7">
		<div class="form-check">
			<form:radiobutton path="gender" value="1" cssClass="form-check-input" label="男性"/>
		</div>
		<div class="form-check">
			<form:radiobutton path="gender" value="2" cssClass="form-check-input" label="女性"/>
		</div>
	</td>
</tr>

 

<form:radiobutton path=”gender” value=”1″ cssClass=”form-check-input” label=”男性”/>

上記の<form>タグを指定しjspを作成すると、HTML出力時には以下のように出力される。

<input id=”gender1″ name=”gender” class=”form-check-input” type=”radio” value=”1″>
<label for=”gender1″>男性</label>

 

セレクトボックス

セレクトボックスを表示してフォームにバインドする。

 

フォーム

String型のhobbyフィールドを追加する。

FooForm.java


// 趣味
private String

 

コントローラー

コントローラーにて例えば以下のようにMapオブジェクトを渡すと動的にセレクトボックスを作成できる。

FooController.java


// フォーム入力画面表示
@GetMapping(value = "input")
public String input(Model model) {
	model.addAttribute("fooForm", new FooForm());
	var hobbies = new HashMap<String, String>();
	hobbies.put("", "選択してください");
	hobbies.put("1", "映画鑑賞");
	hobbies.put("2", "読書");
	hobbies.put("3", "ハイキング");
	model.addAttribute("hobbies", hobbies); // ①
	
	return "foo/input";
}

 

model.addAttribute(“hobbies”, hobbies); // ①

作成したMapオブジェクトのhobbiesを画面に渡す。

 

画面

jspにセレクトボックスを追加する。

input.jsp


<tr>
	<th class="col-3">趣味</th>
	<td class="col-7">
		<div class="form-group">
			<form:select path="hobby" cssClass="form-control" items="${hobbies}" />
		</div>
	</td>
</tr>

 

<form:select path=”hobby” cssClass=”form-control” items=”${hobbies}” />

上記の<form>タグを指定しjspを作成すると、HTML出力時には以下のように出力される。

<select id=”hobby” name=”hobby” class=”form-control”>
<option value=””>選択してください</option>
<option value=”1″>映画鑑賞</option>
<option value=”2″>読書</option>
<option value=”3″>ハイキング</option>
</select>

 

「items=”${hobbies}”」としていることで、サーバーから渡されたhobbiesマップをもとにセレクトボックスを作成している。

 

スポンサーリンク