thymeleaf 语法——input、select、radio、textarea 回显

最新推荐文章于 2025-06-07 22:15:50 发布

原创最新推荐文章于 2025-06-07 22:15:50 发布 · 3.9k 阅读

6 ·

CC 4.0 BY-SA版权

在注明出处的前提下，欢迎任何形式的转载。

文章标签：

#select #radio #textarea #thymeleaf #回显

Spring Boot 专栏收录该内容

42 篇文章

订阅专栏

本文详细介绍了如何在Thymeleaf模板中使用input、select、radio及textarea等表单元素进行数据绑定，确保变量名无空格以避免解析错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

input ：

<input type="text" id="name" name="name" th:value="${user.name}" class="form-control1"  >

select ：

<label  class="col-sm-4 control-label">类别</label>
<div class="col-sm-8">
    <select  id="cId" name="cId"  class="form-control1" >
        <option value="1" th:field="*{book.cId}">目录1</option>
        <option value="2" th:field="*{book.cId}">目录2</option>
        <option value="3" th:field="*{book.cId}">目录3</option>
        <option value="4" th:field="*{book.cId}">目录4</option>
    </select>
</div>

说明：{ } 中，变量名前后不得出现空格，如 { book.cId}、 {book.cId }、 { book.cId }，将抛出模板解析错误。

radio：

<label for="isDel" class="col-sm-4 control-label">是否删除</label>
<div id="isDel" class="col-sm-8">
    <div class="radio-inline">
        <label><input type="radio" name="isDel"  value="1"  th:field="*{user.isDel}"/>已删除</label>
    </div>
    <div class="radio-inline">
        <label><input type="radio" name="isDel"  value="0"  th:field="*{user.isDel}"/>正常</label>
    </div>
</div>

说明：{ } 中不得出现空格，如 { book.cId}、 {book.cId }、 { book.cId }，将报模板解析错误。

textarea ：

内容： <textarea  id="content" name="content" th:text="${user.content}"  ></textarea>

使用 th:value 不能回显。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

猎人在吃肉

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

[ thymeleaf ] - input/select/radio回显

yzx3105的博客

05-19

593

input/select/radio回显 input <input type="text" class="form-control1" id="name" name="name" th:value="${user.name}"> select <label class="col-sm-2 control-label">类别</label> <div class="col-sm-8"> <select name="cId" id="cId"

thymeleaf的textarea数据回显

LuLuke_lucky的博客

06-29

1881

thymeleaf的textarea数据回显用th:text，th:value都不能回显，解决方法：使用th:utext，th:utext是可以显示文本域的

参与评论您还未登录，请先登录后发表或查看评论

html之input表单介绍——单选按钮

热门推荐

IT1995的博客

03-12

1万+

先来看看效果：这里有一个add.html，添加，修改都使用这个文件，当点击添加后： add.html被构造成这样（点击添加后）：当点击编辑后：对应的前端源码如下： <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <li...

thymeleaf：在＜input＞中写一个onclick 并且带上thymeleaf的参数

m0_45069853的博客

06-20

509

在中写一个onclick 并且带上thymeleaf的参数网上的写法千奇百怪，试了很多方法，踩了很多坑，终于还是找到了 th:οnclick="Apply([[${classrooms.classroom_id}]]);" ${classrooms.classroom_id}为thymeleaf的参数参考： https://www.jianshu.com/p/10bfefbcecab ...

textarea在Thymeleaf下获取值

boywcx的博客

08-27

1万+

<textarea name="message" style="background:#17191A" rows="3" class="form-control" id="message" placeholder="更改个人简介..." required="" th:text="${basicInfo.introduce}" &am

radio select input状态联动

weixin_46493816的博客

11-05

186

【代码】radio select input状态联动。

Thymeleaf模板引擎分割字符串动态创建input

Neverlove1的博客

02-22

587

bfrlGongysReport.gdxm bfrlGongysReport对象下的gdxm属性。#strings.listSplit 分割字符串的方法。',' 以逗号分割。将被赋予列表中的下一个元素值。

前端笔记-thymeleaf获取及回显input标签type="date"

IT1995的博客

03-15

6326

【Thymeleaf】thymeleaf中给input的value属性设置值

我们都有光明的未来

12-11

5708

@GetMapping("/to_update_car{id}") public String UpdateCar(@PathVariable("id")String id, HttpSession session){ Car now=cardao.FindById(id); System.out.println(now); System.out.println(id); session.setAttribute("update_car

thymeleaf（text标签、input标签）中回显的日期时间格式化（防老年痴呆）

Ai卿的博客

10-09

2999

<text class="form-control noborder" th:text="${#dates.format(webPubFiles.beginCreateDate,'yyyy-MM-dd HH:mm:ss')}"/> <input id="beginCreateDate" name="beginCreateDate" class="form-control...

jq-jquery根据内容设置select和input radio选中

caizixinyuan的博客

04-03

5156

【代码】jq-jquery根据内容设置select选中。

Thymeleaf使用radio数据绑定和数据回显

03-16

### Thymeleaf 中 Radio Button 的数据绑定与回显在 Spring Boot 和 Thymeleaf 集成的项目中，可以通过表单提交来实现 RadioButton 的数据绑定和回显功能。以下是详细的说明以及示例代码。 #### 数据绑定原理 Thymeleaf 使用 `th:field` 属性将 HTML 表单字段与模型中的属性关联起来。对于 RadioButton 来说，`th:field` 会自动处理选中状态，并将其值绑定到对应的对象属性上[^1]。 #### 实现步骤详解以下是一个完整的例子，展示如何通过 Thymeleaf 绑定并回显 RadioButton 值： ##### 1. 创建实体类定义一个简单的 Java 类用于存储用户的选择。 ```java public class UserPreferences { private String theme; // 可能的值："light", "dark" public String getTheme() { return theme; } public void setTheme(String theme) { this.theme = theme; } } ``` ##### 2. 控制器逻辑控制器负责向视图传递初始数据，并接收表单提交后的数据。 ```java @Controller @RequestMapping("/preferences") public class PreferencesController { @GetMapping public String showForm(Model model) { UserPreferences preferences = new UserPreferences(); preferences.setTheme("light"); // 默认主题设置为 light model.addAttribute("userPreferences", preferences); return "preferences"; } @PostMapping public String submitForm(@ModelAttribute UserPreferences userPreferences, Model model) { model.addAttribute("userPreferences", userPreferences); // 将更新后的偏好重新传入页面以便显示 return "result"; // 跳转至结果页 } } ``` ##### 3. 视图模板 (HTML + Thymeleaf) 创建两个视图文件：一个是表单页面 (`preferences.html`)，另一个是结果显示页面 (`result.html`)。 ###### preferences.html 此页面包含 RadioButton 并允许用户选择其偏好的主题。 ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Preference Form</title> </head> <body> <form th:action="@{/preferences}" method="post" th:object="${userPreferences}"> <label><input type="radio" th:field="*{theme}" value="light"/> Light Theme</label><br/> <label><input type="radio" th:field="*{theme}" value="dark"/> Dark Theme</label><br/><br/> <button type="submit">Submit</button> </form> </body> </html> ``` 在此模板中，`th:field="*{theme}"` 自动绑定了 `UserPreferences` 对象的 `theme` 字段。当页面加载时，如果该字段已有默认值，则对应选项会被预先选中[^4]。 ###### result.html 此页面用来展示用户的最终选择。 ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Result Page</title> </head> <body> <h1>Your selected theme is:</h1> <p th:text="'You chose ' + ${userPreferences.theme}"></p> <a href="/preferences">Go back and change your preference.</a> </body> </html> ``` #### 关键点解析 - **`th:field`**: 它不仅实现了双向绑定，还能够根据当前模型的状态动态调整 DOM 元素的 checked 属性。 - **回显机制**: 当表单被重新渲染时（例如 GET 请求或 POST 后重定向），已有的模型数据会再次填充到表单控件中[^3]。 --- ###