1.1:form:form标签
Handler
@Controller
@RequestMapping("/tags")
public class TagHandler {
@GetMapping("/get")
public String get(Model model){
Student student = new Student(1,"tom",22);
model.addAttribute("student",student);
return "tag";
}
}
传统form写法
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<form action="" method="">
学生ID:<input type="text" name="id" value="${student.id}">
学生姓名:<input type="text" name="name" value="${student.name}">
学生年龄:<input type="text" name="age" value="${student.age}">
</form>
</body>
</html>
使用spring mvc的表单标签的写法
<%@ 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>
<form:form modelAttribute="student">
学生ID:<form:input path="id"/>
学生姓名:<form:input path="name"/>
学生年龄:<form:input path="age"/>
学生城市:<form:input path="address.city"/> <%--支持级联--%>
</form:form>
</body>
</html>
注:path属性支持级联!!
最终渲染在页面上
<form id="student" action="/tags/get" method="post">
学生ID:<input id="id" name="id" type="text" value="1">
学生姓名:<input id="name" name="name" type="text" value="wzj">
学生年龄:<input id="age" name="age" type="text" value="22">
学生城市:<input id="address.city" name="address.city" type="text" value="深圳">
</form>
form标签的id,就是request域对象中的key值!
form:input标签:变成了类型!
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/>
1.2:form:password标签
<form:form modelAttribute="student">
学生密码:<form:password path="password"/><br/>
</form:form>
注意:它这个密码不会显示任何内容,连黑点都没有,我感觉不是很好!
渲染在html中
学生密码:<input id="password" name="password" type="password" value="">
1.3:form:checkbox标签
通过 path 与模型数据的属性值进行绑定,可以绑定 boolean、数组和集合。
如果绑定 boolean 值,若该变量的值为 true,则表示该复选框选中,否则表示不选中。
如果绑定数组或者集合,数组/集合中的元素等于 checkbox 的 value 值,则选中。
- 绑定boolean值
多选框:<form:checkbox path="flag"/><br/>
渲染在html中
多选框:<input id="flag1" name="flag" type="checkbox" value="true" checked="checked">
- 绑定数组/集合
1、Handler
@GetMapping("/get")
public String get(Model model){
Student student = new Student();
student.setHobby(new String[]{"打篮球","编程","跑步","唱歌"});
model.addAttribute("student",student);
return "tag";
}
2、页面
<form:form modelAttribute="student">
爱好:
<form:checkbox path="hobby" value="打篮球"></form:checkbox>打篮球<br/>
<form:checkbox path="hobby" value="编程"/>编程<br/>
<form:checkbox path="hobby" value="旅游"/>旅游<br/>
<form:checkbox path="hobby" value="逛街"/>逛街<br/>
</form:form>
最终页面上的打篮球,编程,被选中!
1.4:form:checkboxes标签
渲染的是 HTML 中的一组
<input type="checkbox"/>
,是对<form:checkbox/>
的一种简化,需要结合 items 和 path 属性来使用,items 绑定被遍历的集合或数组,path 绑定被选中的集合或数组,可以这样理解,items 为全部可选集合,path 为默认的选中集合。
<form:form modelAttribute="student">
爱好:
<form:checkboxes path="selectedHobby" items="${student.hobby}"/>
</form:form>
同样最终页面上的打篮球,编程,被选中!
注意:items 则需要通过 EL 表达式的形式从域对象中获取数据,不能直接写属性名。
1.5:form:radiobutton 和 form:radiobuttons标签
和form:check 和 form:checkboxes基本上一致!
渲染的是 HTML 中的一组
<input type="radio"/>
,这里需要结合 items 和 path 两个属性来使用,items 绑定被遍历的集合或数组,path 绑定被选中的值,items 为全部的可选类型,path 为默认选中的选项
- form:radiobutton
1、handler
student.setRadioId("1");
2、页面
单选框:<form:radiobutton path="radioId" value="0"/>
绑定的数据与标签的 value 值相等则为选中,否则不选中。
- form:radiobuttons
1、handler
student.setRadioGroup(Arrays.asList("男","女"));
student.setSelectedRadio(Arrays.asList("男"));
2、页面
单选框组:<form:radiobuttons path="selectedRadio" items="${student.radioGroup}"/>
path:对应modelAttribute域中的对象的属性即可 !
1.6:form:select标签
渲染的是 HTML 中的一个 <select/>
标签,需要结合 items 和 path 两个属性来使用,items 绑定被遍历的集合或数组,path 绑定被选中的值,用法与 <from:radiobuttons/>
一致。
HashMap cityMap = new HashMap();
cityMap.put(1,"深圳");
cityMap.put(2,"上海");
student.setCityMap(cityMap);
student.setSelectCity(1);
所在城市:<form:select path="selectCity" items="${student.cityMap}"></form:select>
在html中渲染
<select id="selectCity" name="selectCity">
<option value="1" selected="selected">深圳</option>
<option value="2">上海</option>
</select>
将map的key,变成了页面上的value, vlaue变成了要显示的文字!
1.6.1:form:options标签
下拉框:
<form:select path="selectCity">
<form:options items="${student.cityMap}"/>
</form:select>
效果和上面是一样的,但是path和items的位置不一样了!
1.6.2:form: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/>
1.7:form:textarea标签
渲染的是 HTML 中的一个
<textarea/>
,path 绑定模型数据的属性值,作为文本输入域的默认值。
student.setIntroduce("你好,我是...");
modelAndView.addObject("student",student);
信息:<form:textarea path="introduce"/><br/>
1.8:form:errors标签
处理错误信息,一般用在数据校验,该标签需要结合 Spring MVC 的验证器结合起来使用。
注:用到的实体类和Handler
1、实体类
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Student {
private Integer id;
private String name;
private Integer age;
private boolean flag;
private String password;
private Address address;
// private String[] hobby;
private List<String> hobby;
private List<String> selectedHobby;
private String radioId;
private List<String> radioGroup;
private List<String> selectedRadio;
private Map<Integer,String> cityMap;
private Integer selectCity;
public Student(Integer id, String name, Integer age) {
this.id = id;
this.name = name;
this.age = age;
}
}
@Data
@NoArgsConstructor
@AllArgsConstructor
public class Address {
private String city;
}
2、Handler
@GetMapping("/get")
public String get(Model model){
Student student = new Student();
student.setId(1);
student.setName("wzj");
student.setAge(22);
student.setPassword("12345");
student.setFlag(true);
student.setAddress(new Address("深圳"));
// student.setHobby(new String[]{"打篮球","编程","跑步","唱歌"});
student.setHobby(Arrays.asList("打篮球","编程","跑步","唱歌"));
student.setSelectedHobby(Arrays.asList("打篮球","编程"));
student.setRadioId("1");
student.setRadioGroup(Arrays.asList("男","女"));
student.setSelectedRadio(Arrays.asList("男"));
HashMap cityMap = new HashMap();
cityMap.put(1,"深圳");
cityMap.put(2,"上海");
student.setCityMap(cityMap);
student.setSelectCity(1);
model.addAttribute("student",student);
return "tag";
}