thymeleaf填入表单元素

### Thymeleaf 中表单元素填充的实现方法 在 Spring Boot 和 Thymeleaf 的集成环境中，可以通过 `th:` 属性来动态填充 HTML 表单中的数据。以下是具体的方法和示例： #### 动态绑定表单项 Thymeleaf 提供了多种方式用于动态设置表单字段的内容。例如，`th:value`, `th:text`, 或者通过对象绑定的方式。 ```html <form th:action="@{/submitForm}" method="post"> <!-- 绑定字符串 --> <input type="text" name="username" th:value="${user.username}" placeholder="请输入用户名"/> <!-- 下拉框选项 --> <select name="gender" th:value="${user.gender}"> <option value="male">Male</option> <option value="female">Female</option> </select> <!-- 复选框 --> <div> <label><input type="checkbox" name="hobby" th:checked="${user.hobbies.contains('reading')}" value="reading"/> Reading</label> <label><input type="checkbox" name="hobby" th:checked="${user.hobbies.contains('sports')}" value="sports"/> Sports</label> </div> <!-- 单选按钮 --> <div> <label><input type="radio" name="role" th:checked="${user.role == 'admin'}" value="admin"/> Admin</label> <label><input type="radio" name="role" th:checked="${user.role == 'user'}" value="user"/> User</label> </div> <button type="submit">Submit</button> </form> ``` 上述代码展示了如何利用 `${}` 来访问模型中的变量，并将其赋值给对应的表单控件[^4]。 #### 数据预填充逻辑 当用户提交表单后返回同一页面时（比如验证失败），通常需要保留之前输入的数据以便用户体验更佳。这一步骤可通过控制器传递已有的实体类实例至前端视图完成。 假设有一个名为 `User` 的 Java Bean 类型作为参数接收请求体，则可以在 Controller 方法里这样操作: ```java @GetMapping("/editProfile") public String editProfile(Model model){ User user = userService.findCurrentUser(); // 获取当前登录用户的资料 model.addAttribute("user", user); // 将其加入到 Model 对象中传送到视图层 return "profile/edit"; // 跳转到 profile/edit.html 页面 } ``` 此时，在对应路径下的 Thymeleaf 文件即可按照上面提到的形式渲染出带有默认值得表单[^3]。 --- ### 注意事项 为了使以上功能正常运作，请确认项目配置文件(application.properties 或 application.yml)中有启用 Thymeleaf 支持的相关设定项存在。例如，默认情况下无需额外调整就能工作良好；但如果自定义了一些属性可能会影响最终表现效果。 另外值得注意的是，如果涉及到复杂业务场景或者大量重复性的 UI 构建需求时，考虑采用片段(Fragment)技术简化开发流程[^1]。 ---