SpringMVC 表单标签库【vaynexiao】

Handler

@GetMapping("/get")
public ModelAndView get(){
    ModelAndView modelAndView = new ModelAndView("tag");
    Student student = new Student(1L,"张三",22);
    modelAndView.addObject("student",student);
    return modelAndView;
}

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h1>学生信息</h1>
    <form:form modelAttribute="student">
        学生ID：<form:input path="id"/><br/>
        学生姓名：<form:input path="name"/><br/>
        学生年龄：<form:input path="age"/><br/>
        <input type="submit" value="提交"/>
    </form:form>
</body>
</html>

1、JSP 页面导入 Spring MVC 表单标签库，与导入 JSTL 标签库的语法非常相似，前缀 prefix 可以自定义，通常定义为 from。

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

2、将 form 表单与模型数据进行绑定，通过 modelAttribute 属性完成绑定，将 modelAttribute 的值设置为模型数据对应的 key 值。

Handeler:modelAndView.addObject("student",student);
JSP:<form:form modelAttribute="student">

3、form 表单完成绑定之后，将模型数据的值取出绑定到不同的标签中，通过设置标签的 path 属性完成，将 path 属性的值设置为模型数据对应的属性名即可。

学生ID：<form:input path="id"/><br/>
学生姓名：<form:input path="name"/><br/>
学生年龄：<form:input path="age"/><br/>

常用的表单标签

form

<form:form modelAttribute="student"/>

渲染的是 HTML 中的<form></from>，通过 modelAttribute 属性绑定具体的模型数据。

input

<form:input path="name"/>

渲染的是 HTML 中的 <input type="text"/>，from 标签绑定的是模型数据，input 标签绑定的是模型数据中的属性值，通过 path 属性可以与模型数据中的属性名对应，并且支持及联操作。

<from:input path="address.name"/>

password

<form:password path="password"/>

渲染的是 HTML 中的 <input type="password"/>，通过 path 属性与模型数据的属性值进行绑定，password 标签的值不会在页面显示。

checkbox

<form:checkbox path="hobby" value="读书"/>

student.setFlag(false);

checkbox：<form:checkbox path="flag" value="flag"></form:checkbox><br/>

渲染的是 HTML 中的 <input type="checkbox"/>，通过 path 与模型数据的属性值进行绑定，可以绑定 boolean、数组和集合。

如果绑定 boolean 值，若该变量的值为 true，则表示该复选框选中，否则表示不选中。

如果绑定数组或者集合，数组/集合中的元素等于 checkbox 的 value 值，则选中。

student.setHobby(Arrays.asList("读书","看电影","玩游戏"));
modelAndView.addObject("student",student);

爱好：<form:checkbox path="hobby" value="摄影"></form:checkbox>摄影<br/>
<form:checkbox path="hobby" value="读书"></form:checkbox>读书<br/>
<form:checkbox path="hobby" value="听音乐"></form:checkbox>听音乐<br/>
<form:checkbox path="hobby" value="看电影"></form:checkbox>看电影<br/>
<form:checkbox path="hobby" value="旅游"></form:checkbox>旅游<br/>
<form:checkbox path="hobby" value="玩游戏"></form:checkbox>玩游戏<br/>
<input type="submit" value="提交"/>

checkboxes

<form:checkboxes items=${student.hobby} path="selecHobby"/>

渲染的是 HTML 中的一组 <input type="checkbox"/>，是对 <form:checkbox/> 的一种简化，需要结合 items 和 path 属性来使用，items 绑定被遍历的集合或数组，path 绑定被选中的集合或数组，可以这样理解，items 为全部可选集合，path 为默认的选中集合。

student.setHobby(Arrays.asList("摄影","读书","听音乐","看电影","旅游","玩游戏"));
student.setSelectHobby(Arrays.asList("摄影","读书","听音乐"));
modelAndView.addObject("student",student);

爱好：<form:checkboxes path="selectHobby" items="${student.hobby}"/><br/>

需要注意的是 path 可以直接绑定模型数据的属性值，items 则需要通过 EL 表达式的形式从域对象中获取数据，不能直接写属性名。

rabiobutton

<from:radiobutton path="radioId" value="0"/>

渲染的是 HTML 中的一个 <input type="radio"/>，绑定的数据与标签的 value 值相等则为选中，否则不选中。

student.setRadioId(1);
modelAndView.addObject("student",student);

radiobutton:<form:radiobutton path="radioId" value="1"/>radiobutton<br/>

radiobuttons

<form:radiobuttons itmes="${student.grade}" path="selectGrade"/>

渲染的是 HTML 中的一组 <input type="radio"/>，这里需要结合 items 和 path 两个属性来使用，items 绑定被遍历的集合或数组，path 绑定被选中的值，items 为全部的可选类型，path 为默认选中的选项，用法与 <form:checkboxes/> 一致。

Map<Integer,String> gradeMap = new HashMap<>();
gradeMap.put(1,"一年级");
gradeMap.put(2,"二年级");
gradeMap.put(3,"三年级");
gradeMap.put(4,"四年级");
gradeMap.put(5,"五年级");
gradeMap.put(6,"六年级");
student.setGradeMap(gradeMap);
student.setSelectGrade(3);
modelAndView.addObject("student",student);

学生年级：<form:radiobuttons items="${student.gradeMap}" path="selectGrade"/><br/>

select

<form:select items="${student.citys}" path="selectCity"/>

渲染的是 HTML 中的一个 <select/> 标签，需要结合 items 和 path 两个属性来使用，items 绑定被遍历的集合或数组，path 绑定被选中的值，用法与 <from:radiobuttons/>一致。

Map<Integer,String> cityMap = new HashMap<>();
cityMap.put(1,"北京");
cityMap.put(2,"上海");
cityMap.put(3,"广州");
cityMap.put(4,"深圳");
student.setCityMap(cityMap);
student.setSelectCity(3);
modelAndView.addObject("student",student);

所在城市：<form:select items="${student.cityMap}" path="selectCity"></form:select><br/>

options

form:select 结合 form:options 的使用，from:select 只定义 path 属性，在 form:select 标签内部添加一个子标签 form:options ，设置 items 属性，获取被遍历的集合。

所在城市：<form:select path="selectCity">
  				<form:options items="${student.cityMap}"></form:options>
				</form:select><br/>

option

form:select 结合 form:option 的使用，from:select 定义 path 属性，给每一个 form:option 设置 value 值，path 的值与哪个 value 值相等，该项默认选中。

所在城市：<form:select path="selectCity">
            <form:option value="1">杭州</form:option>
            <form:option value="2">成都</form:option>
            <form:option value="3">西安</form:option>
        </form:select><br/>

textarea

渲染的是 HTML 中的一个 <textarea/> ，path 绑定模型数据的属性值，作为文本输入域的默认值。

student.setIntroduce("你好，我是...");
modelAndView.addObject("student",student);

信息：<form:textarea path="introduce"/><br/>

errors

处理错误信息，一般用在数据校验，该标签需要结合 Spring MVC 的验证器结合起来使用。

vayneXiao

发布了49 篇原创文章 · 获赞 103 · 访问量 15万+

私信关注

SpringMVC 表单标签库【vaynexiao】

常用的表单标签

猜你喜欢