springMvc8 - 表单标签

来源：https://www.bilibili.com/video/BV1GE411d7KE?p=10

上一节：https://blog.csdn.net/qq_40893824/article/details/107288803
下一节：https://blog.csdn.net/qq_40893824/article/details/107311274

表单

控制层 返回模型数据到 视图层
视图层 把模型数据绑定到 页面中

传统方式

1 controller 中，新建 控制类 TagHandler，加入代码：

package com.southwind.controller;

import com.southwind.entity.Student;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

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

2 webapp 中，新建 show.jsp，加入代码：
<%@ page isELIgnored="false" %>

    <h1>学生信息</h1>
    <form>
        学生ID：<input type="text" name="id" value="${student.id}"/><br/>
        学生姓名：<input type="text" name="name" value="${student.name}"/><br/>
        学生年龄：<input type="text" name="age" value="${student.age}"/><br/>
        <input type="submit" value="提交"/>
    </form>

重启 tomcat，进入 http://localhost:8080/tag/get：

导入标签

1 webapp 中，新建 tag.jsp，加入代码：

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

    <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>

<form:form modelAttribute="student">

中是 prefix="form".form
prefix 是前缀别名

2 TagHandler 中：

重启 tomcat，进入 http://localhost:8080/tag/get：

常见表单标签

名字	用法	对应 html
from	<form:from modelAttribute="student"/>
input	<form:input path="name"/> <from:input path="address.name"/>	<input type="text"/>
password	<form:password path="password"/>	<input type="password"/>
checkbox 复选框	<form:checkbox path="hobby" value="读书"/>	<input type="checkbox"/>
checkboxes 复选框	<form:checkboxes path="selecHobby" items=${student.hobby} /> path 是默认勾选的值，items 是全部值	一组<input type="checkbox"/>
rabiobutton	<from:radiobutton path="radioId" value="0"/> 绑定的数据与标签的 value 值相等则为选中，否则不选中	<input type="radio"/>
radiobuttons	<form:radiobuttons itmes="${student.grade}" path="selectGrade"/> path 是被勾选的值，items 为全部的可选类型	一组 <input type="radio"/>
select	<form:select items="${student.citys}" path="selectCity"/>	<select/>标签
options	用在 select 标签中 <form:options items="${student.cityMap}"></form:options>
option	用在 select 标签中

password 密码

学生密码：<form:password path="name"/><br/>


密码不显示而已

checkbox 复选框

绑定 boolean 值

1 entity/ Student 中，添加代码：

    private boolean flag;

    public Student(long id, String name, int age) {
        this.id = id;
        this.name = name;
        this.age = age;
    }

2 TagHandler 中，注释、添加代码：

        Student student = new Student();
        student.setId(1L);
        student.setName("张三");
        student.setAge(22);
        student.setFlag(true);

student.setFlag(true);
默认是 false 不勾选，
true 是勾选

3 tag.jsp 中，添加代码：

        checkbox：<form:checkbox path="flag" value="flag"/><br/>
        <%-- value="flag"：复选框 显示的值 --%>

重启 tomcat，进入 http://localhost:8080/tag/get

绑定数组

1 entity/ Student 中，添加代码：private String[] hobby;

2 controller/ TagHandler 中，添加代码：

        String[] hobby = {"读书","看电影","玩游戏"};
        student.setHobby(hobby);

3 webapp/tag.jsp 中，添加代码：

        爱好：<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/>

若 value 中的值 和 handle 中数组的值相等，就勾选上，否则不勾选

4 重启 tomcat，进入 http://localhost:8080/tag/get

绑定 list

1 entity/ Student 中，注释、添加代码：private List<String> hobby;

2 controller/ TagHandler 中，注释、添加代码：
student.setHobby(Arrays.asList("读书","看电影","玩游戏"));

3 重启 tomcat，进入 http://localhost:8080/tag/get

是一样的结果

checkboxes

是 绑定数组、list 的优化
1 entity/ Student 中，添加代码：private List<String> selectHobby;

2 controller/ TagHandler 中，注释、添加代码：

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

3 webapp/tag.jsp 中，注释、添加代码：
爱好：<form:checkboxes path="selectHobby" items="${student.hobby}"></form:checkboxes><br/>
其中 path 对应 默认勾选的值
items 是全部的值，是 EL 表达式

4 重启 tomcat，进入 http://localhost:8080/tag/get

radiobutton

1 entity/ Student 中，添加代码：
private int radioId;

2 controller/ TagHandler 中，添加代码：
student.setRadioId(1);

3 webapp/tag.jsp 中，添加代码：
radiobutton:<form:radiobutton path="radioId" value="1" />radiobutton<br/>

4 重启 tomcat，进入 http://localhost:8080/tag/get

radiobuttons

1 entity/ Student 中，添加代码：

    private Map<Integer, String> gradeMap;
    private int selectGrade;

2 controller/ TagHandler 中，添加代码：

        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);

3 webapp/tag.jsp 中，添加代码：
学生年级：<form:radiobuttons path="selectGrade" items="${student.gradeMap}"></form:radiobuttons><br/>

4 重启 tomcat，进入 http://localhost:8080/tag/get

select

1 entity/ Student 中，添加代码：

    private Map<Integer, String> cityMap;
    private int selectCity;

2 controller/ TagHandler 中，添加代码：

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

3 webapp/tag.jsp 中，添加代码：
所在城市：<form:select path="selectCity" items="${student.cityMap}"></form:select><br/>

4 重启 tomcat，进入 http://localhost:8080/tag/get

options

1 webapp/tag.jsp 中，添加代码：

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

2 重启 tomcat，进入 http://localhost:8080/tag/get

option

1 webapp/tag.jsp 中，添加代码：

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

页面 3号城市是西安，后台 handle 中，3号城市是 广州，页面 最终会是 西安

2 重启 tomcat，进入 http://localhost:8080/tag/get

textarea

1 entity/ Student 中，添加代码：
private String introduce;

2 controller/ TagHandler 中，添加代码：
student.setIntroduce("你好，我是...");

3 webapp/tag.jsp 中，添加代码：
信息：<form:textarea path="introduce"></form:textarea><br/>

4 重启 tomcat，进入 http://localhost:8080/tag/get

上一节：https://blog.csdn.net/qq_40893824/article/details/107288803
下一节：https://blog.csdn.net/qq_40893824/article/details/107311274