表单标签 - 墨码山河

摘要：本文学习了如何在Spring MVC中使用表单标签。

环境

Windows 10 企业版 LTSC 21H2
Java 1.8
Tomcat 8.5.50
Maven 3.6.3
Spring 5.3.31

1 概述

Spring MVC表单标签库是Spring框架提供的一套JSP标签，用于简化Web表单的创建和处理，让JSP页面更易于开发和维护。

2 声明

在使用表单标签之前，必须在JSP页面通过taglib标签引入标签库：

jsp

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

前缀可以自定义，通常使用form作为前缀。

3 标签

核心标签：

form：创建表单。
input：创建输入框。
password：创建密码输入框。
textarea：创建多行文本输入框。
hidden：创建隐藏输入框。
radio：创建单选框。
checkbox：创建复选框。
select：创建下拉列表框。
option：创建下拉列表框的选项。
button：创建按钮。

通用属性：

id：指定表单字段的ID属性。
path：指定表单字段的路径，用于绑定表单数据的模型属性，支持级联属性。

4 使用

后端配置：

java

@Override
protected Filter[] getServletFilters() {
    // 注册字符编码过滤器
    CharacterEncodingFilter encodingFilter = new CharacterEncodingFilter();
    encodingFilter.setEncoding("UTF-8");
    encodingFilter.setForceEncoding(true);
    // 注册隐藏HTTP方法过滤器
    HiddenHttpMethodFilter hiddenHttpMethodFilter = new HiddenHttpMethodFilter();
    // 设置过滤器
    return new Filter[] {encodingFilter, hiddenHttpMethodFilter};
}

后端接口：

java

@Controller
public class UserController {
    private Map<Integer, User> userMap = Arrays.asList(
            new User(1, "张三", new Date(), "男", Arrays.asList("跑步", "看书")),
            new User(2, "李四", new Date(), "女", Arrays.asList("看书", "画画"))
        ).stream().collect(Collectors.toMap(User::getId, user -> user));
    // 修改用户页面
    @GetMapping("/user/edit/{id}")
    public String toEditPage(@PathVariable Integer id, Model model) {
        User user = userMap.get(id);
        model.addAttribute("user", user);
        return "user/edit";
    }
    // 修改用户接口
    @PutMapping("/user/{id}")
    public String updateUser(@PathVariable Integer id, User user) {
        userMap.put(id, user);
        return "redirect:/user/edit/" + id;
    }
}

前端页面：

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>修改用户</title>
</head>
<body>
  <form:form action="${pageContext.request.contextPath}/user/${user.id}" method="post" modelAttribute="user">
    <input type="hidden" name="_method" value="PUT"/>
    <form:hidden path="id"/>
    <br>
    <label>姓名：</label>
    <form:input path="name"/>
    <br>
    <label>性别：</label>
    <form:radiobutton path="gender" value="男"/>男
    <form:radiobutton path="gender" value="女"/>女
    <br>
    <label>爱好：</label>
    <form:checkbox path="hobbies" value="跑步"/>跑步
    <form:checkbox path="hobbies" value="看书"/>看书
    <form:checkbox path="hobbies" value="画画"/>画画
    <br>
    <input type="submit" value="保存"/>
  </form:form>
</body>
</html>