ラジオボタンやチェックボックスで選択した項目をjavaで受け取る方法についてまとめます．
前提
javaのSpringを前提に作業します．src/ 下のディレクトリ構成は以下の通りです．
src
├── main
│ ├── java
│ │ └── com
│ │ └── example
│ │ └── helloworld
│ │ ├── FormContents.java
│ │ ├── HelloController.java
│ │ └── HelloworldApplication.java
│ └── resources
│ └── templates
│ ├── Form.html上の3つのファイルを使います．
Springの簡単な環境構築手順については，以下のリンクなどをご参照ください．
ラジオボタンで値を受け取る方法
Content.java
ラジオボタンの項目を受け取るためのクラスを定義します．
package com.example.helloworld;
import lombok.Data;
//getter, setterの記述を省略
@Data
public class FormContents {
//フィールドの定義
private String content;
//コンストラクタ
public FormContents() {};
}FormController.java
package com.example.helloworld;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ModelAttribute;
@Controller
public class HelloController {
//フォーム画面の表示
@GetMapping("/form")
public String displayForm(Model model){
//選択肢
List<String> selectList = new ArrayList<>();
selectList.add("選択肢1");
selectList.add("選択肢2");
model.addAttribute("radioItems", selectList);
model.addAttribute("FormContent", new FormContents());
return "Form";
}
//送信ボタンがクリックされた時，フォームの内容をresult.htmlに渡して
//画面を表示する
@PostMapping("/form")
public String formResult(@ModelAttribute FormContents formContents,Model model){
System.out.println(formContents.getContent() + "が選択されました");
return "redirect:/form";
}
}
displayForm メソッドでラジオボタンの選択肢をリストで管理し，html側に渡します．
また，formResult メソッドでは，htmlで選択された項目を受け取ってコンソールに表示しています．
Form.html
<html xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
</head>
<body>
<form action="#" th:action="@{/form}" th:object="${FormContent}" method="post">
<div th:each="item : ${radioItems}">
<input type="radio" th:value="${item}" th:text="${item}"
th:field="*{content}" />
</div>
<p><input type="submit" value="送信" /> </p>
</form>
</body>
</html>formタグで th:object="${FormContent}" と指定することで，フォームに入力された内容をjavaの FormContents クラスに格納することができるようになります．
また，divタグで th:each="item : ${radioItems}" を指定することで，[“選択肢1”, “選択肢2”]を順番に表示できます．
選択肢1を選択して送信ボタンをクリックすると，ターミナルに以下の文字列が表示されます．
//FormController.javaのformResultメソッドが起動
選択肢1が選択されましたチェックボックスの複数選択を扱う方法
次はチェックボックスを用いて，複数選択に対応できるようにします．コードを変更するのは以下の2つのファイルです．
- Content.java
- radioForm.html
Content.java
package com.example.helloworld;
import lombok.Data;
//getter, setterの記述を省略
@Data
public class FormContents {
//フィールドの定義
private String content;
private String[] contents;
//コンストラクタ
public FormContents() {};
}変えたのは9行目の一箇所のみです．Stringの配列をフィールドとして追加しました．
Form.html
変えるのはinputタグの中の2箇所だけです．
type="radio"からtype="checkbox"へth:field="*{content}"からth:field="*{contents}"へ
<html xmlns:th="https://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
</head>
<body>
<form action="#" th:action="@{/form}" th:object="${FormContent}" method="post">
<div th:each="item : ${radioItems}">
<input type="radio" th:value="${item}" th:text="${item}"
th:field="*{contents}" /> <!-- content から contents へ変更.-->
</div>
<p><input type="submit" value="送信" /> </p>
</form>
</body>
</html>html画面は選択項目がチェックボックスになっていることを確認できます．
この画面で2つの選択肢をチェックして送信ボタンをクリックすると，ターミナルに以下の文字列が表示されます．java側でチェックボックスの項目を操れるようになりました．
//FormController.javaのformResultメソッドが起動
選択肢1,選択肢2が選択されましたまとめ
ラジオボタン，チェックボックスを使ったやり取りについてまとめました．
FromController.java の formResult メソッドに処理を追加することで，本記事のコードを土台にしてより多くのことを実装できるはずです．
