Thymeleafでth:fieldを使用した実装

Thymeleaf Java

Thymeleafでth:fieldを使用した実装

th:field は、Thymeleaf でフォームの入力フィールドを自動的にバインドするために使用します。
これにより、フォームフィールドの名前、ID、値が自動的に設定されます。
以下は、th:field を使用した実装例です。

1. フォームのクラス

まず、フォームデータを保持するためのクラスを作成します。

// FormData.java
public class FormData {
  private String name;
  private int age;
  
  // ゲッターとセッター
  public String getName() {
    return name;
  }

  public void setName(String name) {
    this.name = name;
  }

  public int getAge() {
    return age;
  }

  public void setAge(int age) {
    this.age = age;
  }
}

2. コントローラの処理

次に、コントローラを作成してフォームデータを処理します。

// FormController.java
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("formData", new FormData());
    return "form";
  }

  @PostMapping("/submitForm")
  public String submitForm(@ModelAttribute FormData formData, Model model) {
    // フォームデータを処理するロジック
    model.addAttribute("formData", formData);
    return "result";
  }
}

3. Thymeleaf テンプレート

フォームを作成し、th:field を使ってフォームの入力フィールドをバインドします。

<!-- form.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>フォーム</title>
</head>
<body>
  <form th:action="@{/submitForm}" th:object="${formData}" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" th:field="*{name}" />
    
    <label for="age">年齢:</label>
    <input type="number" id="age" th:field="*{age}" />
    
    <button type="submit">送信</button>
  </form>
</body>
</html>

4. 結果表示テンプレート

送信後に結果を表示するためのテンプレートです。

<!-- result.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>結果</title>
</head>
<body>
  <h1>送信されたデータ</h1>
  <p>名前: <span th:text="${formData.name}"></span></p>
  <p>年齢: <span th:text="${formData.age}"></span></p>
</body>
</html>

この構成により、フォームで入力したデータが自動的にバインドされ、th:field 属性によって適切な値が送信されます。