django 表单字段widget的参数_Spring Boot 2 + Thymeleaf：表单字段绑定、表单提交处理

Spring Boot中Thymeleaf对表单处理的一些用法：(1)使用th:field属性：进行表单字段绑定(2)使用ids对象：一般用于lable配合radio或checkbox使用(3)表单提交处理

开发环境：IntelliJ IDEA 2019.2.2Spring Boot版本：2.1.8

新建一个名称为demo的Spring Boot项目。pom.xml 依赖项如下：

       org.springframework.boot            spring-boot-starter-web        org.springframework.boot            spring-boot-starter-thymeleaf        org.springframework.boot            spring-boot-devtools        

一、使用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;@Controllerpublic class FieldController {    @RequestMapping("/field")    public String field(Model model){        //设置用户对象        User user = new User();        user.setName("小红");        user.setSex(0);        model.addAttribute("user", user);        //设置性别        Map sexes = new HashMap();        sexes.put("男", 1);        sexes.put("女", 0);        model.addAttribute("sexes", sexes);        return "field";    }}

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

    使用th:field属性        

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

    使用th:field属性        小红小红女男女男

二、使用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;@Controllerpublic 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

    使用ids对象                                        

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

    使用ids对象        单选A        单选B        多选A        多选B        

三、表单的提交处理

提交后，在控制器方法中使用@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;@Controllerpublic 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 sexes = new HashMap();        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

    表单的提交处理       

用户名： 性别： 喜欢的颜色：

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

网页源代码如下：

    表单的提交处理       

用户名： 性别： 女男 喜欢的颜色： red white black

点击提交按钮，IDEA控制台输出：

姓名：小明性别：男喜欢的颜色：[white, black]