Thymeleafでラジオボタン(radio)の処理を実装

Java Thymeleaf

Thymeleafでラジオボタン(radio)の処理を実装

ラジオボタンを使ったフォームの実装例を以下に示します。
ThymeleafとSpringBootを用いて、フォームを作成し、ラジオボタンの選択をサーバーに送信するまでの一連の処理を含んでいます。

1. フォームクラス (Form Class)

package com.example.demo;

public class Form {
  private String selectedOption;

  public String getSelectedOption() {
    return selectedOption;
  }

  public void setSelectedOption(String selectedOption) {
    this.selectedOption = selectedOption;
  }
}

2. コントローラ (Controller)

package com.example.demo;

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 FormController {

  @GetMapping("/form")
  public String showForm(Model model) {
    model.addAttribute("form", new Form());
    return "form";
  }

  @PostMapping("/submit")
  public String submitForm(@ModelAttribute Form form, Model model) {
    model.addAttribute("selectedOption", form.getSelectedOption());
    return "result";
  }
}

3. フォームのHTML (form.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>ラジオボタンフォーム</title>
</head>
<body>
  <form th:action="@{/submit}" th:object="${form}" method="post">
    <p>オプションを選択してください:</p>
    <label>
      <input type="radio" th:field="*{selectedOption}" value="option1"/> オプション 1
    </label><br/>
    <label>
      <input type="radio" th:field="*{selectedOption}" value="option2"/> オプション 2
    </label><br/>
    <label>
      <input type="radio" th:field="*{selectedOption}" value="option3"/> オプション 3
    </label><br/>
    <button type="submit">送信</button>
  </form>
</body>
</html>

4. 結果のHTML (result.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>結果</title>
</head>
<body>
  <h1>選択されたオプション:</h1>
  <p th:text="${selectedOption}">ここに選択されたオプションが表示されます</p>
  <a href="/form">戻る</a>
</body>
</html>

この例では、Formクラスがラジオボタンの選択値を保持し、FormControllerがフォームを表示および送信されたデータを処理します。
form.htmlにはラジオボタンの選択肢があり、result.htmlでは選択されたオプションが表示されます。