Thymeleafでtextareaを使用した実装

Java Thymeleaf

Thymeleafでtextareaを使用した実装

Thymeleafでtextareaを使用する場合の実装例を紹介します。
ここでは、textareaの内容をフォームで送信するための基本的なコードと、コントローラの処理を含めた例を示します。

1. HTML（Thymeleafテンプレート）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Textarea Example</title>
</head>
<body>
  <form th:action="@{/submit}" th:object="${form}" method="post">
    <label for="description">Description:</label>
    <textarea id="description" name="description" th:field="*{description}" rows="4" cols="50"></textarea>
    <br/>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

2. コントローラ

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.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller
@RequestMapping("/submit")
public class TextareaController {

  @GetMapping
  public String showForm(Model model) {
    // フォーム用のオブジェクトをモデルに追加
    model.addAttribute("form", new FormData());
    return "textarea"; // Thymeleafテンプレートの名前
  }

  @PostMapping
  public String submitForm(@RequestParam String description, Model model) {
    // 送信されたデータを処理
    System.out.println("Received description: " + description);
    // フォーム用のオブジェクトをモデルに追加
    model.addAttribute("form", new FormData(description));
    return "result"; // 結果表示用のテンプレートにリダイレクト
  }
}

3. FormDataクラス

public class FormData {

  private String description;

  public FormData() {}

  public FormData(String description) {
    this.description = description;
  }

  public String getDescription() {
    return description;
  }

  public void setDescription(String description) {
    this.description = description;
  }
}

この例では、textareaの内容を送信するためのフォームを作成しています。
textareaの内容はdescriptionという名前で送信されます。
コントローラでは、その内容を受け取り、処理しています。
フォームのデータはFormDataというクラスにマッピングされ、HTMLテンプレートではThymeleafのth:fieldを使ってバインディングしています。