Thymeleafでテキストボックス(input)の処理を実装

Thymeleafでテキストボックス(input)の処理を実装

以下に、Thymeleafでテキストボックス(input)の処理を実装するための例を示します。
コントローラの処理とformのクラスも含めています。

1. Formクラス

package com.example.demo.model;

public class TextBoxForm {
  private String inputText;

  // ゲッターとセッター
  public String getInputText() {
    return inputText;
  }

  public void setInputText(String inputText) {
    this.inputText = inputText;
  }
}

2. コントローラ

package com.example.demo.controller;

import com.example.demo.model.TextBoxForm;
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 TextBoxController {

  @GetMapping("/text-box")
  public String showForm(Model model) {
    model.addAttribute("textBoxForm", new TextBoxForm());
    return "textBoxForm";
  }

  @PostMapping("/submit-text")
  public String submitForm(@ModelAttribute TextBoxForm textBoxForm, Model model) {
    model.addAttribute("inputText", textBoxForm.getInputText());
    return "result";
  }
}

3. テンプレート(textBoxForm.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>テキストボックスフォーム</title>
</head>
<body>
  <form th:action="@{/submit-text}" th:object="${textBoxForm}" method="post">
    <label for="inputText">テキストボックス:</label>
    <input type="text" id="inputText" th:field="*{inputText}" />
    <button type="submit">送信</button>
  </form>
</body>
</html>

4. 結果表示テンプレート(result.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>結果</title>
</head>
<body>
  <p>送信されたテキスト: <span th:text="${inputText}"></span></p>
  <a href="/text-box">戻る</a>
</body>
</html>

この例では、TextBoxFormというクラスを作成し、テキストボックスの入力値を保持します。
コントローラは、GETリクエストでフォームを表示し、POSTリクエストで送信されたデータを処理します。
Thymeleafテンプレートでフォームを作成し、入力値を表示します。