三. 简单的普通属性框
后端 toLogin 返回普通的属性值，用于前端的接收。
@RequestMapping(value="toLogin") public String toLogin(Model model){ User user=new User(); user.setName("两个蝴蝶飞"); user.setAge(24); user.setPassword("123456"); user.setId(1); user.setDescription("一个快乐的程序员"); model.addAttribute("user",user); return "user/login"; }
可以设置样式， 用 cssClass, cssStyle.
也可以设置事件， 如onblur,onchange
事件有:
三.一 form:input 标签
表达的是 input type=“text”
1 .
<form:label path="name">姓名:</form:label><form:input path="name"/> <br/>
前端正常的显示，显示后的源代码为:
<form id="user" action="login.action" method="post"><input type="hidden" name="_method" value="delete"/> <label for="name">姓名:</label><input id="name" name="name" type="text" value="两个蝴蝶飞"/> <br/> </form>
2 .
设置样式,如利用 cssClass:
<style> .red{ color:red; } </style>
<!--cssClass 中直接写类名即可--> <form:label path="name">姓名:</form:label><form:input path="name" cssClass="red"/> <br/>
前端页面展示:
<form id="user" action="login.action" method="post"><input type="hidden" name="_method" value="delete"/> <label for="name">姓名:</label><input id="name" name="name" class="red" type="text" value="两个蝴蝶飞"/> <br/> </form>
解析成了正常的html+css . cssStyle 也是一样的。
3 . 设置 事件
<form:label path="name">姓名:</form:label><form:input path="name" cssClass="red" onblur="A()"/> <br/> <script> function A(){ alert("你好，两个蝴蝶飞"); } </script>
当移出去之后，会触发这个事件。
三.二 form:password 标签
密码框， input type=“password”
<form:label path="password">密码:</form:label><form:password path="password"/> <br/>
会发现，什么都没有。密码那一栏也并不会显示什么东西。 就像没有回显一样。
查看源代码
需添加 showPassword 属性。
<form:label path="password">密码:</form:label><form:password path="password" showPassword="true"/> <br/>
这样会展示密码。
查看源代码，可以获取密码值。
三.三 form:hidden
input type=“hidden”
<form:hidden path="id"/>
三.四 form:textarea
<textarea> </textarea>
<form:label path="description">自我介绍:</form:label> <form:textarea path="description"/>
源代码显示:
<label for="description">自我介绍:</label> <textarea id="description" name="description">一个快乐的程序员</textarea>
三.五 form:button
type=“submit”
<form:button disabled="disabled" id="button" name="submitValue">提交</form:button>
源代码:
<button id="button" name="submitValue" type="submit" value="Submit">提交</button>
三.六 form:label
label for ，用于指定焦点。
<form:label path="name">姓名:</form:label>
源代码:
<label for="name">姓名:</label>
四. 单选按钮
四.一 单个单选按钮 form:radiobutton
input type=“radio”, 来选中单选按钮。
属性有:
1 . 普通的 字符串选中
@RequestMapping(value="toLogin") public String toLogin(Model model){ User user=new User(); user.setName("两个蝴蝶飞"); //设置性别为 男 user.setSex("男"); model.addAttribute("user",user); return "user/login"; }
前端页面显示:
<form:label path="sex">性别:</form:label> <form:radiobutton path="sex" value="男"/>男 <form:radiobutton path="sex" value="女"/>女
访问路径，前端即可回显数据为:
也可以用 label 的形式。
<form:radiobutton path="sex" value="男" label="男"/> <form:radiobutton path="sex" value="女" label="女"/>
2 .普通数字
上面，在数据库中存储的是 男，女， 有时候，存储的只是单纯的数字， 如1 为男， 2为女。 这个时候，要回显的是数字，但是前端展示的是 男，女。
@RequestMapping(value="toLogin") public String toLogin(Model model){ User user=new User(); user.setName("精灵妹"); //设置性别为 男 user.setSex("2"); model.addAttribute("user",user); return "user/login"; }
前端页面展示:
<form:label path="sex">性别:</form:label> <form:radiobutton path="sex" value="1"/>男 <form:radiobutton path="sex" value="2"/>女
数据回显展示：
四.二 多个单选按钮 form:radiobuttons
属性有:
上面的例子可以看到，性别是后端传递过来的，但是前端的性别集合，如 男，女，是前端固化下来的。 如果再添加一个 保密 类型的话，难道前台都得改变吗?
前端的性别集合，也应该是全部取出来的。 用form:radiobuttons
1 . 集合或者是数组的形式。 数组与其一样。 存储的是单个值。
@RequestMapping(value="toLogin") public String toLogin(Model model){ User user=new User(); user.setName("精灵妹"); //设置性别为 男 user.setSex("女"); model.addAttribute("user",user); List<String> sexList=new ArrayList<String>(); sexList.add("男"); sexList.add("女"); sexList.add("保密"); // 存储 性别的集合 model.addAttribute("sexList",sexList); return "user/login"; }
前端:
<form:label path="sex">性别:</form:label> <form:radiobuttons path="sex" items="${sexList}"/>
数据前台展示:
页面源代码为:
<label for="sex">性别:</label> <span><input id="sex1" name="sex" type="radio" value="男"/><label for="sex1">男</label></span> <span><input id="sex2" name="sex" type="radio" value="女" checked="checked"/><label for="sex2">女</label></span> <span><input id="sex3" name="sex" type="radio" value="保密"/><label for="sex3">保密</label></span>
2 . 存储为Map 形式。
@RequestMapping(value="toLogin") public String toLogin(Model model){ User user=new User(); user.setName("精灵妹"); //设置性别为 男 user.setSex("2"); model.addAttribute("user",user); Map<String,String> sexMap=new HashMap<String,String>(); sexMap.put("1","男"); sexMap.put("2","女"); sexMap.put("3","保密"); // 存储 性别的集合 model.addAttribute("sexMap",sexMap); return "user/login"; }
如果是数字形式的话， Map 就为 Map<Integer,String> 的形式。
前端展示为:
<form:label path="sex">性别:</form:label> <form:radiobuttons path="sex" items="${sexMap}"/>
前端展示为:
源代码显示为:
<label for="sex">性别:</label> <span><input id="sex1" name="sex" type="radio" value="1"/><label for="sex1">男</label></span><span><input id="sex2" name="sex" type="radio" value="2" checked="checked"/><label for="sex2">女</label></span><span><input id="sex3" name="sex" type="radio" value="3"/><label for="sex3">保密</label></span>
可知， map中的key 为单选按钮的value, map中的value 为单选按钮的text .
3 . List 或者是数组的形式，存储的为JavaBean 对象。
举简单的例子吧。 将性别 封装一下。 有一个性别的类，如 SystemConn.
package com.yjl.pojo; public class SystemConn { /** * @param name 键 * @param value 值 */ private String name; private String value; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getValue() { return value; } public void setValue(String value) { this.value = value; } }
后端处理为:
@RequestMapping(value="toLogin") public String toLogin(Model model){ User user=new User(); user.setName("老蝴蝶"); //设置性别为 男 user.setSex("3"); model.addAttribute("user",user); SystemConn conn1=new SystemConn(); conn1.setName("1"); conn1.setValue("男"); SystemConn conn2=new SystemConn(); conn2.setName("2"); conn2.setValue("女"); SystemConn conn3=new SystemConn(); conn3.setName("3"); conn3.setValue("保密"); List<SystemConn> sexList=new ArrayList<SystemConn>(); sexList.add(conn1); sexList.add(conn2); sexList.add(conn3); model.addAttribute("sexList",sexList); return "user/login"; }
前端显示为:
<form:label path="sex">性别:</form:label> <!--name 为sexList 单bean 即SystemConn 里面的 name 和value属性。itemValue 为值，itemLable 为展示值。 --> <form:radiobuttons path="sex" items="${sexList}" itemValue="name" itemLabel="value"/>
页面可以选择出数据。
可以设置分隔符， 用 delimiter 属性。
<form:radiobuttons path="sex" items="${sexList}" itemValue="name" itemLabel="value" delimiter=","/>
用 ,进行分隔。
前端显示为:
