Spring MVC Getting Started Guide (4): Use of Form Tags

In this article, we will learn the use of Spring MVC form tags. With the help of the form tags provided by Spring MVC, it is easier for us to display the data in the WebModel on the view.

1. First, let's do a simple example to have a general impression of the use of Spring MVC form form tags, and then combine examples to introduce how to use each tag.

1. First, add a model TagsModel to the com.ray.models package as follows:

package com.ray.models;

import java.util.List;
import java.util.Map;

/**
 * @author Ray
 * @date 2018/4/18 0018
 */
public class TagsModel {

    private String username;
    private String password;
    private boolean testBoolean;
    private String[] selectArray;
    private String[] testArray;
    private Integer radiobuttonId;
    private Integer selectId;
    private List<Integer> selectIds;
    private Map<Integer,String> testMap;
    private String remark;

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public boolean isTestBoolean() {
        return testBoolean;
    }

    public void setTestBoolean(boolean testBoolean) {
        this.testBoolean = testBoolean;
    }

    public String[] getSelectArray() {
        return selectArray;
    }

    public void setSelectArray(String[] selectArray) {
        this.selectArray = selectArray;
    }

    public String[] getTestArray() {
        return testArray;
    }

    public void setTestArray(String[] testArray) {
        this.testArray = testArray;
    }

    public Integer getRadiobuttonId() {
        return radiobuttonId;
    }

    public void setRadiobuttonId(Integer radiobuttonId) {
        this.radiobuttonId = radiobuttonId;
    }

    public Integer getSelectId() {
        return selectId;
    }

    public void setSelectId(Integer selectId) {
        this.selectId = selectId;
    }

    public List<Integer> getSelectIds() {
        return selectIds;
    }

    public void setSelectIds(List<Integer> selectIds) {
        this.selectIds = selectIds;
    }

    public Map<Integer, String> getTestMap() {
        return testMap;
    }

    public void setTestMap(Map<Integer, String> testMap) {
        this.testMap = testMap;
    }

    public String getRemark() {
        return remark;
    }

    public void setRemark(String remark) {
        this.remark = remark;
    }
}

2. Second, add a TagsController to the package com.ray.controllers as follows:

package com.ray.controllers;

import com.ray.models.TagsModel;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;

/**
 * @author Ray
 * @date 2018/4/18 0018
 */
@Controller
@RequestMapping(value = "/tags")
public class TagsController {

    @RequestMapping(value = "/test",method = RequestMethod.GET)
    public String test(Model model){
        if(!model.containsAttribute("contentModel")){

            TagsModel tagsModel = new TagsModel();

            //input
            tagsModel.setUsername("Ray");
            //passowrd
            tagsModel.setPassword("123456");
            //checkbox
            tagsModel.setTestBoolean(true);
            tagsModel.setTestArray(new String[] {"arrayItem passerby 1", "arrayItem passerby 2", "arrayItem passerby 3",});
            //checkboxs
            tagsModel.setSelectArray(new String[] {"arrayItem路人1"});
            tagsModel.setSelectIds(Arrays.asList(1,2));
            //radiobutton
            tagsModel.setRadiobuttonId(1);
            //radiobuttons
            tagsModel.setSelectId(2);
            //select
            Map<Integer,String> map = new HashMap<>();
            map.put(1, "mapItem passerby 1");
            map.put(2, "mapItem passerby 2");
            map.put(3, "mapItem passerby 3");
            tagsModel.setTestMap (folder);
            //textarea
            tagsModel.setRemark("Remarks....2018-4-18 19:58:21");

            model.addAttribute("contentModel",tagsModel);
        }
        return "tagstest";
    }
}

3. Finally, add the view tagstest.jsp under the views folder as follows:

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>title</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
</head>
<body>
    <form:form modelAttribute="contentModel" method="post">

        input 标签:<form:input path="username"/><br><hr>
        
        password 标签:<form:password path="password"/><br><hr>
        
        Bind boolean checkbox tag: <br>
        <form:checkbox path="testBoolean"/><br><hr>
        
        Bind the checkbox tag of Array:<br>
        <form:checkbox path="testArray" value="arrayItem passer 1"/>arrayItem passer 1
        <form:checkbox path="testArray" value="arrayItem passer 2"/>arrayItem passer 2
        <form:checkbox path="testArray" value="arrayItem passer 3"/>arrayItem passer 3
        <form:checkbox path="testArray" value="arrayItem路人4"/>arrayItem路人4<br><hr>
        
        Bind the checkboxs tag of Array:<br>
        <form:checkboxes path="selectArray" items="${contentModel.testArray}"/><br><hr>
        
        Bind the checkboxs tag of the Map:<br>
        <form:checkboxes path="selectIds" items="${contentModel.testMap}"/><br><hr>
        
        Bind the radiobutton tag of Integer: <br>
        <form:radiobutton path="radiobuttonId" value="0"/>0
        <form:radiobutton path="radiobuttonId" value="1"/>1
        <form:radiobutton path="radiobuttonId" value="2"/>2<br><hr>
        
        Bind the radiobuttons tag of the Map: <br>
        <form:radiobuttons path="selectId" items="${contentModel.testMap}"/><br><hr>
        
        Bind the select tag of the Map: <br>
        <form:select path="selectId" items="${contentModel.testMap}"/><br><hr>
        
        Add a select tag directly to form:option without binding items data: <br>
        <form:select path="selectId">
            <option>Please select a person</option>
            <form:option value="1">路人1</form:option>
            <form:option value="2">路人2</form:option>
            <form:option value="3">路人3</form:option>
        </form:select><br><hr>
        
        Add the select tag directly to the html option without binding the items data: <br>
        <form:select path="selectId">
            <option>Please select a person</option>
            <option value="1">路人1</option>
            <option value="2">路人2</option>
            <option value="3">路人3</option>
        </form:select><br><hr>
        
        Bind the select tag of items with form:option:<br>
        <form:select path="selectId">
            <option>Please select a person</option>
            <form:options items="${contentModel.testMap}"/>
        </form:select><br><hr>
        
        textarea tag: <br>
        <form:textarea path="remark"/><br><hr>

        <input type="submit" value="Submit">
    </form:form>
</body>
</html>

4. Run the test:

2. Let's introduce how to use each label. 

1. To use the form tags provided by Spring MVC, you first need to add on the view page:

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

2.form tag:

<form:form modelAttribute="contentModel" method="post">

The modelAttribute attribute specifies which Model the form is bound to. When the corresponding Model is specified, the data in the Model can be bound by specifying the name of the Model attribute for the path on other form tags inside the form tag. The method attribute specifies the form The submission methods such as GET, POST, etc.

3.input tag:

<form:input path="username"/>

4.password tag:

<form:password path="password"/>

An Html input tag of type password will be generated , and the value in the Model to be bound is specified through the path attribute.

5.checkbox label:

<form:checkbox path="testBoolean"/>

An Html input tag of type checkbox will be generated, which supports binding data of boolean, array, List or Set type.

Binding boolean data will generate a checkbox. When boolean is true, the checkbox is selected, and false is not selected.

Binding data of type array, List or Set (using array as a demonstration) If the bound data has the value specified by the corresponding checkbox, it will be in the selected state, otherwise it will be in the unselected state:

Bind the checkbox tag of Array:<br>
        <form:checkbox path="testArray" value="arrayItem passer 1"/>arrayItem passer 1
        <form:checkbox path="testArray" value="arrayItem passer 2"/>arrayItem passer 2
        <form:checkbox path="testArray" value="arrayItem passer 3"/>arrayItem passer 3
        <form:checkbox path="testArray" value="arrayItem passer 4"/>arrayItem passer 4

6.checkboxs label:

Bind the checkboxs tag of Array:<br>
        <form:checkboxes path="selectArray" items="${contentModel.testArray}"/>

A set of corresponding Html input tags of type checkbox will be generated according to the bound items data. The bound data can be an array, a collection or a Map. The path attribute of checkboxs must also be specified. When the data value is the same, the corresponding checkbox is selected, otherwise it is not selected.

It should be noted here that when using EL expression binding, you need to specify the name of the Model together, such as ${contentModel.testArray} , instead of just specifying the property name corresponding to the Model like path.

But usually what we need is that the checkbox displays the name, but the value of the corresponding name is submitted after the selection, such as id, we can achieve this function by binding the Map:

Bind the checkboxs tag of the Map:<br>
        <form:checkboxes path="selectIds" items="${contentModel.testMap}"/>

7.radiobutton label:

An Html input tag of type radio will be generated. If the value of the bound data corresponds to the value specified by the radiobutton, it will be the selected state, otherwise it will be the unselected state:

Bind the radiobutton tag of Integer: <br>
        <form:radiobutton path="radiobuttonId" value="0"/>0
        <form:radiobutton path="radiobuttonId" value="1"/>1
        <form:radiobutton path="radiobuttonId" value="2"/>2

8.radiobuttons label:

A set of corresponding Html input tags of type radio will be generated according to the bound items data. The bound items data can be an array, a collection or a Map, and the path attribute of the radiobuttons must also be specified. When a certain data value is the same, the corresponding radio is selected, otherwise it is not selected. The usage is very similar to checkboxs. But it should be noted that the path of checkboxs is bound to the path of the collection radiobuttons is bound to a single value:

Bind the radiobuttons tag of the Map: <br>
        <form:radiobuttons path="selectId" items="${contentModel.testMap}"/>

9.select标签：

会生成一个Html select标签，绑定的items数据可以是数组、集合或Map会根据items的内容生成select里面的option选项，当path的值和items中的某条数据值相同的时候对应的option为选定状态，反之为不选定状态，用法与radiobuttons很相似：

绑定Map的select标签:<br>
        <form:select path="selectId" items="${contentModel.testMap}"/>

下面看一下form:option 与option的区别：

不绑定items数据直接在form:option添加select标签:<br>
        <form:select path="selectId">
            <option>请选择人员</option>
            <form:option value="1">路人1</form:option>
            <form:option value="2">路人2</form:option>
            <form:option value="3">路人3</form:option>
        </form:select><br><hr>

不绑定items数据直接在html的option添加select标签:<br>
        <form:select path="selectId">
            <option>请选择人员</option>
            <option value="1">路人1</option>
            <option value="2">路人2</option>
            <option value="3">路人3</option>
        </form:select><br><hr>

由截图的结果可以看出form:option 正确选择了path中指定的selectId而option没有，说明form:option有数据绑定功能option没有。

另外我们也可以不为select指定items，而把items指定到form:option 上这两种效果基本是一样的，一点区别就是为select指定items再在select里面添加option是不起作用的会被items生成的option覆盖掉，而把items指定到form:option 上则可以再在select里面添加option：

用form:option绑定items的select标签:<br>
        <form:select path="selectId">
            <option>请选择人员</option>
            <form:options items="${contentModel.testMap}"/>
        </form:select>

10.textarea标签：

textarea标签:<br>
        <form:textarea path="remark"/>

会生成一个Html textarea标签，通过path属性来指定要绑定的Model中的值。

11.hidden标签：

会生成一个type为hidden的Html input标签，通过path属性来指定要绑定的Model中的值。

12.errors标签：

errors标签的用法在系列（6）—>数据验证中已经说明了，这里不在赘述。