6月15日

投稿者: | 2020年6月15日
0件のコメント

その他の入力フォームを作ってみる。

IndexController.javaに以下のコードを追加する。

	@RequestMapping(value = "/form2", method = RequestMethod.GET)
	public ModelAndView form2(ModelAndView mav) {
		mav.setViewName("form2");
		return mav;
	}

templatesフォルダのform.htmlをコピーしてtemplatesに貼り付けるとform2.htmlが作られる。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム</title>
</head>
<body>
<h1>入力フォーム</h1>
<form method="post" action="/form">
  <p th:text="${msg}"></p>
  <input type="text" name="name" th:value="${value}" />
  <br />
  <input type="text" name="prop" th:value="${value}" />
  <input type="submit" value="Click" />
  <p th:text="${result}"></p>
</form>
</body>
</html>

Spring Bootを再起動して http://localhost:8080/form2 にアクセスすると、
入力フォームが表示される。

元のHTMLを修正してチェックボックスを追加する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム2</title>
</head>
<body>
<h1>入力フォーム2</h1>
<form method="post" action="/form2">
  <div>
    <input type="checkbox" name="check" id="check" />
    <label for="check">チェックしてください</label>
  </div>
</form>
</body>
</html>

次はラジオボタンを追加してみる。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム2</title>
</head>
<body>
<h1>入力フォーム2</h1>
<form method="post" action="/form2">
  <div>
    <input type="checkbox" name="check" id="check" />
    <label for="check">チェックしてください</label>
  </div>
  <div>
    <input type="radio" name="age" value="10〜19" id="age1" />
    <label for="age1">10〜19歳</label>
    <input type="radio" name="age" value="20〜29" id="age2" />
    <label for="age2">20〜29歳</label>
    <input type="radio" name="age" value="30〜39" id="age3" />
    <label for="age3">30〜39歳</label>
  </div>
</form>
</body>
</html>

年齢の選択肢を増やすと横に長くなるので、改行も追加する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム2</title>
</head>
<body>
<h1>入力フォーム2</h1>
<form method="post" action="/form2">
  <div>
    <input type="checkbox" name="check" id="check" />
    <label for="check">チェックしてください</label>
  </div>
  <div>
    <input type="radio" name="age" value="10〜19" id="age1" />
    <label for="age1">10〜19歳</label>
    <br />
    <input type="radio" name="age" value="20〜29" id="age2" />
    <label for="age2">20〜29歳</label>
    <br />
    <input type="radio" name="age" value="30〜39" id="age3" />
    <label for="age3">30〜39歳</label>
    <br />
    <input type="radio" name="age" value="40〜49" id="age4" />
    <label for="age4">40〜49歳</label>
    <br />
    <input type="radio" name="age" value="50〜59" id="age5" />
    <label for="age5">50〜59歳</label>
    <br />
    <input type="radio" name="age" value="60〜" id="age6" />
    <label for="age6">60歳〜</label>
  </div>
</form>
</body>
</html>

Select-Optionを追加してみる。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム2</title>
</head>
<body>
<h1>入力フォーム2</h1>
<form method="post" action="/form2">
  <div>
    <input type="checkbox" name="check" id="check" />
    <label for="check">チェックしてください</label>
  </div>
  <div>
    <input type="radio" name="age" value="10〜19" id="age1" />
    <label for="age1">10〜19歳</label>
    <br />
    <input type="radio" name="age" value="20〜29" id="age2" />
    <label for="age2">20〜29歳</label>
    <br />
    <input type="radio" name="age" value="30〜39" id="age3" />
    <label for="age3">30〜39歳</label>
    <br />
    <input type="radio" name="age" value="40〜49" id="age4" />
    <label for="age4">40〜49歳</label>
    <br />
    <input type="radio" name="age" value="50〜59" id="age5" />
    <label for="age5">50〜59歳</label>
    <br />
    <input type="radio" name="age" value="60〜" id="age6" />
    <label for="age6">60歳〜</label>
  </div>
  <div>
    <select id="select1" name="select1">
      <option value="Windows">Windows</option>
      <option value="MacOS">MacOS</option>
      <option value="Linux">Linux</option>
    </select>
  </div>
</form>
</body>
</html>

送信ボタンを追加する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム2</title>
</head>
<body>
<h1>入力フォーム2</h1>
<p th:text="${msg}"></p>
<form method="post" action="/form2">
  <div>
    <input type="checkbox" name="check" id="check" />
    <label for="check">チェックしてください</label>
  </div>
  <div>
    <input type="radio" name="age" value="10〜19" id="age1" />
    <label for="age1">10〜19歳</label>
    <br />
    <input type="radio" name="age" value="20〜29" id="age2" />
    <label for="age2">20〜29歳</label>
    <br />
    <input type="radio" name="age" value="30〜39" id="age3" />
    <label for="age3">30〜39歳</label>
    <br />
    <input type="radio" name="age" value="40〜49" id="age4" />
    <label for="age4">40〜49歳</label>
    <br />
    <input type="radio" name="age" value="50〜59" id="age5" />
    <label for="age5">50〜59歳</label>
    <br />
    <input type="radio" name="age" value="60〜" id="age6" />
    <label for="age6">60歳〜</label>
  </div>
  <div>
    <select id="select1" name="select1">
      <option value="Windows">Windows</option>
      <option value="MacOS">MacOS</option>
      <option value="Linux">Linux</option>
    </select>
  </div>
  <div>
    <input type="submit" value="送信" />
  </div>
</form>
</body>
</html>

送信ボタンをクリックすると405エラーが発生する。
これは、サーバー側でPOST送信を受け取る準備ができていないため。

サーバー側にPOSTメソッド送信を受け取る処理を追加する。

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexController {
	@RequestMapping("/")
	public String index() {
		return "index";
	}

	@RequestMapping("/sum/{num}")
	public String sum(@PathVariable int num, Model model) {
		int sum = 0;
		for (int i = 1; i <= num; i++) {
			sum += i;
		}
		model.addAttribute("msg", sum);
		return "index";
	}

	@RequestMapping(value = "/form", method = RequestMethod.GET)
	public ModelAndView form(ModelAndView mav) {
		mav.addObject("msg", "あなたのお名前と性格を入力してください。");
		mav.setViewName("form");
		return mav;
	}

	@RequestMapping(value = "/form", method = RequestMethod.POST)
	public ModelAndView post(@RequestParam("name") String name,
			@RequestParam("prop") String prop, ModelAndView mav) {
		mav.addObject("msg", "あなたのお名前と性格を入力してください。");
		int v = (name + prop).hashCode() % 101;
		v = Math.abs(v);
		mav.addObject("result", "こんにちは！　" + name + "さんの" + prop + "度は" + v + "％です！");
		mav.setViewName("form");
		return mav;
	}

	@RequestMapping(value = "/form2", method = RequestMethod.GET)
	public ModelAndView form2(ModelAndView mav) {
		mav.setViewName("form2");
		return mav;
	}

	@RequestMapping(value = "/form2", method = RequestMethod.POST)
	public ModelAndView post2(
			@RequestParam("check") boolean check,
			ModelAndView mav) {
		String msg = "check=" + check;
		mav.addObject("msg", msg);
		mav.setViewName("form2");
		return mav;
	}
}

チェックボックスをチェックしなかったら、ブラウザからそのデータが送信されないためにエラーが発生する。
チェックしない状態を受け付けるようにするために、RequestParamアノテーションにパラメータが必須ではないことを指定する。

	@RequestMapping(value = "/form2", method = RequestMethod.POST)
	public ModelAndView post2(
			@RequestParam(value="check", required=false) boolean check,
			ModelAndView mav) {
		String msg = "check=" + check;
		mav.addObject("msg", msg);
		mav.setViewName("form2");
		return mav;
	}

次はageパラメータの値を取得して表示する。

	@RequestMapping(value = "/form2", method = RequestMethod.POST)
	public ModelAndView post2(
			@RequestParam(value="check", required=false) boolean check,
			@RequestParam(value="age", required=false) String age,
			ModelAndView mav) {
		String msg = "check=" + check + ", age=" + age;
		mav.addObject("msg", msg);
		mav.setViewName("form2");
		return mav;
	}

HTMLのselectタグのname属性を、データの内容が分かりやすいように os に変更する。

  <div>
    <select id="select" name="os">
      <option value="Windows">Windows</option>
      <option value="MacOS">MacOS</option>
      <option value="Linux">Linux</option>
    </select>
  </div>

次はosパラメータの値を取得して表示する。

	@RequestMapping(value = "/form2", method = RequestMethod.POST)
	public ModelAndView post2(
			@RequestParam(value="check", required=false) boolean check,
			@RequestParam(value="age", required=false) String age,
			@RequestParam("os") String os,
			ModelAndView mav) {
		String msg = "check=" + check + ", age=" + age + ", os=" + os;
		mav.addObject("msg", msg);
		mav.setViewName("form2");
		return mav;
	}

サーバー側から送信したデータによってHTML側で条件分岐する。

	@RequestMapping(value = "/form2", method = RequestMethod.POST)
	public ModelAndView post2(
			@RequestParam(value="check", required=false) boolean check,
			@RequestParam(value="age", required=false) String age,
			@RequestParam("os") String os,
			ModelAndView mav) {
		String msg = "check=" + check + ", age=" + age + ", os=" + os;
		mav.addObject("msg", msg);
		mav.addObject("check", check);
		mav.setViewName("form2");
		return mav;
	}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム2</title>
</head>
<body>
<h1>入力フォーム2</h1>
<p th:text="${msg}"></p>
<p th:if="${check}" th:text="'trueが選択されています'"></p>
<p th:unless="${check}" th:text="'falseが選択されています'"></p>
<form method="post" action="/form2">
  <div>
    <input type="checkbox" name="check" id="check" />
    <label for="check">チェックしてください</label>
  </div>
  <div>
    <input type="radio" name="age" value="10〜19" id="age1" />
    <label for="age1">10〜19歳</label>
    <br />
    <input type="radio" name="age" value="20〜29" id="age2" />
    <label for="age2">20〜29歳</label>
    <br />
    <input type="radio" name="age" value="30〜39" id="age3" />
    <label for="age3">30〜39歳</label>
    <br />
    <input type="radio" name="age" value="40〜49" id="age4" />
    <label for="age4">40〜49歳</label>
    <br />
    <input type="radio" name="age" value="50〜59" id="age5" />
    <label for="age5">50〜59歳</label>
    <br />
    <input type="radio" name="age" value="60〜" id="age6" />
    <label for="age6">60歳〜</label>
  </div>
  <div>
    <select id="select" name="os">
      <option value="Windows">Windows</option>
      <option value="MacOS">MacOS</option>
      <option value="Linux">Linux</option>
    </select>
  </div>
  <div>
    <input type="submit" value="送信" />
  </div>
</form>
</body>
</html>