整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Spring Boot 2 + Thymeleaf:表单字段绑定、表单提交处理

pring Boot中Thymeleaf对表单处理的一些用法:

(1)使用th:field属性:进行表单字段绑定

(2)使用ids对象:一般用于lable配合radio或checkbox使用

(3)表单提交处理

开发环境:IntelliJ IDEA 2019.2.2

Spring Boot版本:2.1.8

新建一个名称为demo的Spring Boot项目。

pom.xml 依赖项如下:

 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-web</artifactId>
 </dependency>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-starter-thymeleaf</artifactId>
 </dependency>
 <dependency>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-devtools</artifactId>
 </dependency>

一、使用th:field属性

th:field属性常用于表单字段绑定,除了自动生成id和name属性,对不同的节点类型还会有不同的生成逻辑。

例如input还会再生成value属性,textarea会自动设文本,select会自动选中相应的选项,如果是同个表单属性,radio和checkbox的id会全局自动增长。

备注:

(1)使用th:field属性时,如果html节点中已经存在相应属性,则不会再另外生成。

(2)th:field属性需要使用星号表达式*{...},即先使用th:object声明表单对象,再使用th:field=*{...}对表单域进行处理。

1、src/main/java/com/example/demo/User.java

package com.example.demo;
public class User {
 String name;
 Integer sex;
 String[] MyColors;
 public String getName() {
 return name;
 }
 public void setName(String name) {
 this.name = name;
 }
 public Integer getSex() {
 return sex;
 }
 public void setSex(Integer sex) {
 this.sex = sex;
 }
 public String[] getMyColors() {
 return MyColors;
 }
 public void setMyColors(String[] myColors) {
 MyColors = myColors;
 }
}

2、src/main/java/com/example/demo/FieldController.java

package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.HashMap;
import java.util.Map;
@Controller
public class FieldController {
 @RequestMapping("/field")
 public String field(Model model){
 //设置用户对象
 User user = new User();
 user.setName("小红");
 user.setSex(0);
 model.addAttribute("user", user);
 //设置性别
 Map<String, Object> sexes = new HashMap<String, Object>();
 sexes.put("男", 1);
 sexes.put("女", 0);
 model.addAttribute("sexes", sexes);
 return "field";
 }
}

3、src/main/resources/templates/field.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>使用th:field属性</title>
</head>
<body>
 <form th:object="${user}">
 <input type="text" th:field="*{name}" id="name1" />
 <input type="text" th:field="*{name}" />
 <input type="text" th:field="*{name}" />
 <textarea th:field="*{name}"></textarea>
 <textarea th:field="*{name}"></textarea>
 <select th:field="*{sex}">
 <option th:each="sex : ${sexes}" th:value="${sex.value}" th:text="${sex.key}"></option>
 </select>
 <select th:field="*{sex}">
 <option th:each="sex : ${sexes}" th:value="${sex.value}" th:text="${sex.key}"></option>
 </select>
 <input type="checkbox" th:field="*{name}" value="*{name}"/>
 <input type="checkbox" th:field="*{name}" value="*{name}"/>
 <input type="radio" th:field="*{name}" value="*{name}"/>
 <input type="radio" th:field="*{name}" value="*{name}"/>
 </form>
</body>
</html>

启动服务后,浏览器访问http://localhost:8080/field,网页源代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>使用th:field属性</title>
</head>
<body>
 <form>
 <input type="text" id="name1" name="name" value="小红" />
 <input type="text" id="name" name="name" value="小红" />
 <input type="text" id="name" name="name" value="小红" />
 <textarea id="name" name="name">小红</textarea>
 <textarea id="name" name="name">小红</textarea>
 <select id="sex" name="sex">
 <option value="0" selected="selected">女</option>
 <option value="1">男</option>
 </select>
 <select id="sex" name="sex">
 <option value="0" selected="selected">女</option>
 <option value="1">男</option>
 </select>
 <input type="checkbox" value="*{name}" id="name1" name="name"/><input type="hidden" name="_name" value="on"/>
 <input type="checkbox" value="*{name}" id="name2" name="name"/><input type="hidden" name="_name" value="on"/>
 <input type="radio" value="*{name}" id="name3" name="name"/>
 <input type="radio" value="*{name}" id="name4" name="name"/>
 </form>
</body>
</html>

二、使用ids对象

可以使用ids对象的seq方法生成指定名称的递增id。

对于radio和checkbox自动生成的id,配合lable节点使用时,需要知道这个id,可以使用ids对象的prev和next方法。

1、src/main/java/com/example/demo/IdsController.java

package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class IdsController {
 @RequestMapping("/ids")
 public String ids(Model model){
 User user = new User();
 user.setName("小红");
 user.setSex(0);
 model.addAttribute("user", user);
 return "ids";
 }
}

2、src/main/resources/templates/ids.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>使用ids对象</title>
</head>
<body>
 <form th:object="${user}">
 <input type="text" th:field="*{name}" th:id="${#ids.seq('tname')}" />
 <input type="text" th:field="*{name}" th:id="${#ids.seq('tname')}" />
 <input type="radio" th:field="*{name}" value="*{name}" th:id="${#ids.seq('rname')}"/>
 <input type="radio" th:field="*{name}" value="*{name}" th:id="${#ids.seq('rname')}"/>
 <input type="checkbox" th:field="*{name}" value="*{name}" th:id="${#ids.seq('cname')}" />
 <input type="checkbox" th:field="*{name}" value="*{name}" th:id="${#ids.seq('cname')}"/>
 <input type="radio" th:field="*{name}" value="*{name}" />
 <label th:for="${#ids.prev('name')}" th:text="单选A"></label>
 <input type="radio" th:field="*{name}" value="*{name}" />
 <label th:for="${#ids.prev('name')}" th:text="单选B"></label>
 <label th:for="${#ids.next('name')}" th:text="多选A"></label>
 <input type="checkbox" th:field="*{name}" value="*{name}" />
 <label th:for="${#ids.next('name')}" th:text="多选B"></label>
 <input type="checkbox" th:field="*{name}" value="*{name}" />
 </form>
</body>
</html>

启动服务后,浏览器访问http://localhost:8080/ids,网页源代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>使用ids对象</title>
</head>
<body>
 <form>
 <input type="text" id="tname1" name="name" value="小红" />
 <input type="text" id="tname2" name="name" value="小红" />
 <input type="radio" value="*{name}" id="rname1" name="name"/>
 <input type="radio" value="*{name}" id="rname2" name="name"/>
 <input type="checkbox" value="*{name}" id="cname1" name="name" /><input type="hidden" name="_name" value="on"/>
 <input type="checkbox" value="*{name}" id="cname2" name="name"/><input type="hidden" name="_name" value="on"/>
 <input type="radio" value="*{name}" id="name1" name="name" />
 <label for="name1">单选A</label>
 <input type="radio" value="*{name}" id="name2" name="name" />
 <label for="name2">单选B</label>
 <label for="name3">多选A</label>
 <input type="checkbox" value="*{name}" id="name3" name="name" /><input type="hidden" name="_name" value="on"/>
 <label for="name4">多选B</label>
 <input type="checkbox" value="*{name}" id="name4" name="name" /><input type="hidden" name="_name" value="on"/>
 </form>
</body>
</html>

三、表单的提交处理

提交后,在控制器方法中使用@ModelAttribute映射表单对象。

1、src/main/java/com/example/demo/FormController.java

package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;
@Controller
public class FormController {
 @RequestMapping("/form")
 public String form(Model model){
 setConstant(model);
 User user = new User();
 user.setName("小明");
 user.setSex(1);
 user.setMyColors(new String[]{"white", "black"});
 model.addAttribute("user", user);
 return "form";
 }
 @PostMapping("/submit")
 public String submit(@ModelAttribute User user, Model model){
 setConstant(model);
 model.addAttribute("user", user);
 System.out.println("姓名:" + user.getName());
 System.out.println("性别:" + (user.getSex().intValue() == 1 ? "男" : "女"));
 System.out.println("喜欢的颜色:" + Arrays.toString(user.getMyColors()));
 //return "redirect:/form";
 return "form";
 }
 //设置常量
 private void setConstant(Model model){
 Map<String, Object> sexes = new HashMap<String, Object>();
 sexes.put("男", 1);
 sexes.put("女", 0);
 model.addAttribute("sexes", sexes);
 String[] colors = new String[]{"red", "white", "black"};
 model.addAttribute("colors", colors);
 }
}

2、src/main/resources/templates/form.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>表单的提交处理</title>
</head>
<body>
 <form method="post" th:action="@{/submit}" th:object="${user}">
 <table>
 <tr>
 <td>用户名:</td>
 <td><input type="text" th:field="*{name}" /></td>
 </tr>
 <tr>
 <td>性别:</td>
 <td><select th:field="*{sex}">
 <option th:each="sex : ${sexes}" th:value="${sex.value}" th:text="${sex.key}"></option>
 </select>
 </td>
 </tr>
 <tr>
 <td>喜欢的颜色:</td>
 <td>
 <span th:each="color : ${colors}">
 <input type="checkbox" th:field="*{myColors}" th:value="${color}" />
 <label th:for="${#ids.prev('myColors')}" th:text="${color}"></label>
 </span>
 </td>
 </tr>
 <tr>
 <td colspan="2">
 <input type="submit" value="提交" />
 </td>
 </tr>
 </table>
 </form>
</body>
</html>

启动服务后,浏览器访问http://localhost:8080/from,页面如下图:

网页源代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>表单的提交处理</title>
</head>
<body>
 <form method="post" action="/submit">
 <table>
 <tr>
 <td>用户名:</td>
 <td><input type="text" id="name" name="name" value="小明" /></td>
 </tr>
 <tr>
 <td>性别:</td>
 <td><select id="sex" name="sex">
 <option value="0">女</option>
 <option value="1" selected="selected">男</option>
 </select>
 </td>
 </tr>
 <tr>
 <td>喜欢的颜色:</td>
 <td>
 <span>
 <input type="checkbox" value="red" id="myColors1" name="myColors" /><input type="hidden" name="_myColors" value="on"/>
 <label for="myColors1">red</label>
 </span><span>
 <input type="checkbox" value="white" id="myColors2" name="myColors" checked="checked" /><input type="hidden" name="_myColors" value="on"/>
 <label for="myColors2">white</label>
 </span><span>
 <input type="checkbox" value="black" id="myColors3" name="myColors" checked="checked" /><input type="hidden" name="_myColors" value="on"/>
 <label for="myColors3">black</label>
 </span>
 </td>
 </tr>
 <tr>
 <td colspan="2">
 <input type="submit" value="提交" />
 </td>
 </tr>
 </table>
 </form>
</body>
</html>

点击提交按钮,IDEA控制台输出:

TML:完成页面的内容展示

CSS:完成页面样式的控制,美化页面,完成页面的布局。

表单:用于采集用户输入的数据。用于和服务器进行交互。

form:用于定义表单的。可以定义一个范围(代表用户采集数据的范围)

属性:action:指定提交数据的url(指的就是把数据提交到哪里)

method:指定提交方式

分类:一共有7种,2种比较常用。

get:1.请求参数会在地址栏显示

2.请求参数的长度是有限制的。

3.请求不安全

post:1.请求参数不会在地址栏显示,会封装在请求体中。

2.请求参数的长度没有限制

3.较为安全

表单里面的数据要想被提交,必须指定它的name属性

表单项标签

input:可以通过type属性值,改变元素展示的样式。

type属性:text:文本输入框,默认值

placeholder:指定输入框的提示信息,当输入框的内容发生变化,会自动情况提示信息。

password:密码输入框

radio:1.单选框(要想让多个单选框实现单选的效果,则多个单选框的name属性值必须一样)

2.一般会给每一个单选框提供value属性,指定其被选中后提交的值。

3.checked属性可以指定默认值

checkbox:复选框:

1.一般会给每一个单选框提供value属性,指定其被选中后提交的值。

2.checked属性可以指定默认值

file:文件选择框

hidden:隐藏域,用于提交一些信息

按钮:

submit:提交按钮。可以提交表单

button:普通按钮

image:图片提交按钮

src属性指定图片的路径

label:指定输入项的文字描述信息

注意:lable的for属性一般会和input的id属性值对应。如果对应了,点击lable区域,会让input输入框获取焦点。


select:下拉列表

子元素:option,指定列表项

textarea:文本域


么是表单?

HTML 表单的功能:

  • 常用于登记信息的输入,或搜集不同类型的用户输入。
  • 表单用于向服务器传输数据。

HTML 表单元素:

表单元素指的是不同类型的 input 元素复选框单选按钮提交按钮等等。

<input> 元素元素有很多形态,根据不同的 type 属性

<input type="text" name="name" id="name" class="txt"/>

文本域(Text fields) <input>元素

<p>请输入您的姓名:<br /><input type="text" name="name" id="name" class="txt"/></p>

Text fields

<select>元素、<option>元素

简单的带有预选值的下拉列表,即预选值指预先指定的首选项。

<p>请选择你喜欢的颜色:<br />
<select name="color" id="color">
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
<option value="yellow">黄</option>
<option value="cyan">青</option>
<option value="purple">紫</option>
</select></p>

表单单选按钮元素: radio元素

<p>请问你的性别是:<br />
 <input type="radio" name="sex" id="male" value="male" class="rad" />男<br />
 <input type="radio" name="sex" id="female" value="female" class="rad" />女</p>

表单复选框元素 :checkbox元素

<p>请问你喜欢做些什么:<br />
 <input type="checkbox" name="hobby" id="book" value="book" class="check" />看书 
 <input type="checkbox" name="hobby" id="net" value="net" class="check" />上网 
 <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check" />睡觉</p>

文本域(Textarea)(多行文本输入控制,在文本域中,可写入的字符字数不受限制)

<p>我要留言:<br /> <textarea name="comments" id="comments" cols="30" rows="4" class="textarea"></textarea></p>

表单提交按钮元素 :submit元素 class类选择器

<p><input type="submit" name="btnSubmit" value="Submit" class="btn" /></p>

form自身属性 : action 、 method

1,action:表示当前表单中的内容提交给哪个页面进行处理

2,method:表示当前表单提交的方式,常见的有get和post方式,默认是get提交

<form method="post">
 ..........
</form>

<form method= "get"> 使用展现形式:

<form method = "post" > 使用展现形式:




<form> 的兼容性:

几乎所有的浏览器都支持<form>表单标签。



附一个简单的表单应用案例:

基础信息表单

HTML代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="information.css"/>
<title>基础信息表单</title>
</head>
<body>
<form method="post">
<p>请输入您的姓名:<br /><input type="text" name="name" id="name" class="txt"/></p>
<p>请选择你喜欢的颜色:<br />
<select name="color" id="color">
<option value="red">红</option>
<option value="green">绿</option>
<option value="blue">蓝</option>
<option value="yellow">黄</option>
<option value="cyan">青</option>
<option value="purple">紫</option>
</select></p>
<p>请问你的性别是:<br />
 <input type="radio" name="sex" id="male" value="male" class="rad" />男<br />
 <input type="radio" name="sex" id="female" value="female" class="rad" />女</p>
<p>请问你喜欢做些什么:<br />
 <input type="checkbox" name="hobby" id="book" value="book" class="check" />看书 
 <input type="checkbox" name="hobby" id="net" value="net" class="check" />上网 
 <input type="checkbox" name="hobby" id="sleep" value="sleep" class="check" />睡觉</p>
 
<p>我要留言:<br /> <textarea name="comments" id="comments" cols="30" rows="4" class="textarea"></textarea></p>
<p><input type="submit" name="btnSubmit" value="Submit" class="btn" /></p>
 </form>
</body>
</html>

对表单形式进行修改的CSS样式如下:

@charset "utf-8";
/* CSS Document */
form
{
	width:250px;
	height:350px;
	border:1px dotted #aAAAAA;
	padding:1px 6px 1px 6px;
	margin:0px;
	font:14px Arial, Helvetica, sans-serif;
}
input
{
	color:#00008b;
}
input.txt
{
	border:1px inset #00008b;
	background-color:#ADd8e6;
}
input.btn
{
	color:#00008b;
	background-color:#add8e6;
	border:1px outset #00008b;
	padding:1px 2px 1px 2px;
}
select
{
	width:80px;
	color:#00008b;
	background-color:#add8e6;
	border:1px solid #00008b;
}
textarea
{
	width:200px;
	height:40px;
	color:#00008b;
	background-color:#add8e6;
	border:1px inset #00008b;
}

以上知识是我在学习过程中了解到的关于表单的相关知识,我们可以相互交流,学习。

(文中部分图片来自网络,若有侵权,请联系修正)