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テンプレートでフォームを作成し、入力値を表示します。