4.1.2 input标签

发表于 更新于 分类于 ， ， Waline： 本文字数： 7.9k 阅读时长 ≈ 7 分钟

4.1.2 input标签

input标签作用 被渲染成HTML input标签

Spring MVC的input标签会被渲染为一个类型为text的普通HTML input标签。

input标签用途 绑定表单数据

使用SpringMVC的input标签的唯一目的就是绑定表单数据，通过path属性来指定要绑定的Model中的值。

input标签属性

Input标签可使用如表4.3所示的属性。表4.3中列出的只是SpringMVC的input标签的常用属性，并没有包含HTML的相关属性。

属性 描述
cssClass 定义要应用到被渲染的Input元素的CSS类
cssStyle 定义要应用到被渲染的Input元素的CSS样式
cssErrorClass 定义要应用到被渲染Input元素的CSS类,如果bound属性中包含错误,则覆盖cssClass属性值
htmlEscape boolean值,表示被渲染的值是否应该进行HTML转义
path 要绑定的属性路径

示例: form和input标签的使用

项目结构

展开/折叠
G:\Desktop\随书源码\Spring+Mybatis企业应用实战(第2版)\codes\04\FormTest
├─src\
│ └─org\
│   └─fkit\
│     ├─controller\
│     │ └─UserController.java
│     └─domain\
│       └─User.java
└─WebContent\
  ├─index.jsp
  ├─META-INF\
  │ └─MANIFEST.MF
  └─WEB-INF\
    ├─content\
    │ ├─registerForm.jsp
    │ └─registerForm2.jsp
    ├─lib\
    │ ├─commons-logging-1.2.jar
    │ ├─spring-aop-5.0.1.RELEASE.jar
    │ ├─spring-aspects-5.0.1.RELEASE.jar
    │ ├─spring-beans-5.0.1.RELEASE.jar
    │ ├─spring-context-5.0.1.RELEASE.jar
    │ ├─spring-context-indexer-5.0.1.RELEASE.jar
    │ ├─spring-context-support-5.0.1.RELEASE.jar
    │ ├─spring-core-5.0.1.RELEASE.jar
    │ ├─spring-expression-5.0.1.RELEASE.jar
    │ ├─spring-instrument-5.0.1.RELEASE.jar
    │ ├─spring-jcl-5.0.1.RELEASE.jar
    │ ├─spring-jdbc-5.0.1.RELEASE.jar
    │ ├─spring-jms-5.0.1.RELEASE.jar
    │ ├─spring-messaging-5.0.1.RELEASE.jar
    │ ├─spring-orm-5.0.1.RELEASE.jar
    │ ├─spring-oxm-5.0.1.RELEASE.jar
    │ ├─spring-test-5.0.1.RELEASE.jar
    │ ├─spring-tx-5.0.1.RELEASE.jar
    │ ├─spring-web-5.0.1.RELEASE.jar
    │ ├─spring-webflux-5.0.1.RELEASE.jar
    │ ├─spring-webmvc-5.0.1.RELEASE.jar
    │ └─spring-websocket-5.0.1.RELEASE.jar
    ├─springmvc-config.xml
    └─web.xml

registerForm.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 要使用SpringMVC的表单标签库，必须在JSP页面的开头处声明taglib指令： -->
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试form标签</title>
</head>
<body>
    <h3>注册页面</h3>
    <!-- 如果Model中存在一个属性名称为command的JavaBean， -->
    <!-- 而且该JavaBean拥有属性username、sex和age， -->
    <!-- 则在渲染上面的代码时就会取command的对应属性值赋给对应标签的属性。 -->
    <!-- form绑定一个User对象,form的子标签input绑定User对象的成员变量 -->
    <form:form method="post" action="register">
        <table>
            <tr>
                <td>姓名:</td>
                <!-- 使用SpringMVC的input标签的唯一目的就是绑定表单数据， -->
                <!-- 通过path属性来指定form绑定的command属性表示的 -->
                <!-- User对象的username属性的值  -->
                <td><form:input path="username" /></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td><form:input path="sex" /></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><form:input path="age" /></td>
            </tr>
        </table>
    </form:form>
</body>
</html>

如果Model中存在一个属性名称为command的JavaBean，而且该JavaBean拥有属性username、sex和age，则在渲染上面的代码时就会取command这个JavaBean的属性值赋给form中input标签同名属性。(也就是说:Model中名为command的JavaBean的成员变量username赋值给path="username“这个input标签,以此类推)

UserController.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
package org.fkit.controller;

import org.fkit.domain.User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserController {

    @GetMapping(value = "/registerForm")
    public String registerForm(Model model)
    {
        User user = new User("jack", "男", 28);
        // model中添加属性command，值是user对象
        // 这里很重要
        // 表单标签当将把input标签输入的数据绑定到给对象的属性上
        model.addAttribute("command", user);
        // 返回输入表单的视图
        return "registerForm";
    }
    @GetMapping(value = "/registerForm2")
    public String registerForm2(Model model)
    {
        User user = new User("小明", "男", 18);
        // model中添加属性user，值是User对象
        model.addAttribute("user", user);
        return "registerForm2";
    }
}

分析

注意registerForm方法中的代码:

1
model.addAttribute("command", user);

该代码将user设置到Model当中，属性名为“command”。

web.xml文件和springmvc-config.xml文件和之前描述的一致，此处不再赘述。

测试

部署FormTest这个Web应用，在浏览器中输入如下URL来测试应用：

http://localhost:8080/FormTest/registerForm

会看到如图4.1所示的界面。

渲染效果

在上面的代码中，假设Model中存在一个属性名称为command的JavaBean，且它的username、sex和age属性值分别为“jack”、“男”和“28”，则在浏览器页面单击→右键→查看页面源代码，可以看到Spring MVC的from标签和input标签渲染时生成的html代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form id="command" action="register" method="post">
    <table>
        <tr>
            <td>姓名:</td>
            <!-- 使用SpringMVC的input标签的唯一目的就是绑定表单数据， -->
            <!-- 通过path属性来指定form绑定的command属性表示的 -->
            <!-- User对象的username属性的值  -->
            <td><input id="username" name="username" type="text" value="jack"/></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td><input id="sex" name="sex" type="text" value="男"/></td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td><input id="age" name="age" type="text" value="28"/></td>
        </tr>
    </table>
</form>

从上面生成的代码，我们可以看出，当没有指定form标签的id属性时它会自动获取该form标签绑定的Model中对应属性名称command作为id；而对于input标签，在没有指定id的情况下它会自动获取path指定的属性值作为它的id和name。

使用form标签的commandName属性指定绑定的JavaBean

Spring MVC指定form标签默认自动绑定的是Model的command属性，那么当form对象对应的属性名称不是command时，应该怎么办呢？对于这种情况，Spring提供了一个commandName属性，可以通过commandName属性来指定将使用Model中的哪个属性作为form标签需要绑定的command对象。除了commandName属性外，指定modelAttribute属性也可以达到相同的效果。这里假设上面代码存放在Model中的是user对象而不是默认的command对象，那么我们的代码就可以如下定义了:

registerForm2.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 想要使用标签标签,必须引入该标签库 -->
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>测试form标签</title>
</head>
<body>
    <h3>注册页面</h3>
    <!-- 绑定的数据是Model中的user属性 -->
    <!-- 也就是绑定一个User对象到当前表单上 -->
    <form:form modelAttribute="user" method="post" action="register">
        <table>
            <tr>
                <td>姓名:</td>
                <!-- 绑定User对象的username成员变量 -->
                <!-- username成员变量的值将会放到input标签的value属性之中 -->
                <td><form:input path="username" /></td>
            </tr>
            <tr>
                <td>性别:</td>
                <td><form:input path="sex" /></td>
            </tr>
            <tr>
                <td>年龄:</td>
                <td><form:input path="age" /></td>
            </tr>
        </table>
    </form:form>
</body>
</html>

注意,这里使用了form表单标签的modelAttribute属性，设置属性值为“user”:

<form:form modelAttribute="user" method="post" action="register">

对应的请求处理方法

1
2
3
4
5
6
7
8
@GetMapping(value = "/registerForm2")
public String registerForm2(Model model)
{
    User user = new User("小明", "男", 18);
    // model中添加属性user，值是User对象
    model.addAttribute("user", user);
    return "registerForm2";
}

注意代码:

model.addAttribute("user", user);

它将user设置到Model当中，属性名不是“command”，而是“user”。

测试

在浏览器中输入如下URL来测试应用：

http://localhost:8080/FormTest/registerForm2

渲染效果

然后查看源码,渲染结果如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form id="user" action="register" method="post">
    <table>
        <tr>
            <td>姓名:</td>
            <!-- 绑定User对象的username成员变量 -->
            <!-- username成员变量的值将会放到input标签的value属性之中 -->
            <td><input id="username" name="username" type="text" value="小明"/></td>
        </tr>
        <tr>
            <td>性别:</td>
            <td><input id="sex" name="sex" type="text" value="男"/></td>
        </tr>
        <tr>
            <td>年龄:</td>
            <td><input id="age" name="age" type="text" value="18"/></td>
        </tr>
    </table>
</form>