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 屬性。

文本域(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;
}

以上知識是我在學習過程中了解到的關于表單的相關知識，我們可以相互交流，學習。

（文中部分圖片來自網絡，若有侵權，請聯系修正）

在線咨詢

上一篇：HTML編碼規范
下一篇：css文字顏色漸變的3種實現

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商