Spring MVC 表單標簽庫:
聲明表單標簽庫
在使用 SpringMVC 的時候我們可以使用 Spring 封裝的一系列表單標簽,這些標簽都可以訪問到 ModelMap 中的內容。我們需要先在 JSP 中聲明使用的標簽,具體做法是在 JSP 文件的頂部加入以下指令:
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
表單標簽
<form:form />
使用 Spring MVC 的 form 標簽主要有兩個作用,第一是它會自動的綁定來自 Model 中的一個屬性值到當前 form 對應的實體對象,默認是 command 屬性,這樣我們就可以在 form 表單體里面方便的使用該對象的屬性了。第二是它支持我們在提交表單的時候使用除 GET 和 POST 之外的其他方法進行提交,包括 DELETE 和 PUT 等。
<form:form action="formTag/form.do" method="post">
<table>
<tr>
<td>Name:</td><td><form:input path="name"/></td> //path支持級聯屬性
</tr>
<tr>
<td>Age:</td><td><form:input path="age"/></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="提交"/></td>
</tr>
</table>
</form:form>
注意:
上面的示例中form表單中沒有modelAttribute屬性,默認從request 域對象中讀取command的表單bean,如果該屬性值也不存在,則會發生錯誤。
所以我們需要使用modelAttribute屬性指定綁定的模型屬性。
html
<form:form action="/useradd" method="post" modelAttribute="user"> //通過modelAttribute綁定模型
Controller
1、如果沒有@ModelAttribute,我們需要手動將user對象添加到request請求域中
public String userform(Model model){
User user = new User();
model.addAttribute("user",user);
return "userForm";
}
2、如果有@ModelAttribute (利用他,在請求一開始,就將user對象放到request請求域中)
@ModelAttribute
public void userinit(@RequestParam(value = "id",required = false) String id, Model model){
if (id==null){
User user = new User("小明");
model.addAttribute("abc",user);
}else {
//從數據庫通過id獲取user對象,在添加到request請求域中
}
}
@RequestMapping(value = "/useradd",method = RequestMethod.GET)
public String userform(){
return "userForm";
}
文本框
使用 <form:input path="name" /> 標簽來渲染一個 HTML 文本框,等同於: <input id="name" name="name" type="text" value=""/>
密碼框
使用 <form:password path="password" /> 標簽來渲染一個 HTML 密碼框,等同於: <input id="password" name="password" type="password" value=""/>
文本域
使用 <form:textarea path="address" rows="5" cols="30" /> 標簽來渲染一個 HTML 文本域,等同於: <textarea id="address" name="address" rows="5" cols="30">
復選框
使用 <form:checkbox path="receivePaper" /> 標簽來渲染一個 HTML 復選框,等同於:
<input id="receivePaper1" name="receivePaper" type="checkbox" value="true"/> <input type="hidden" name="_receivePaper" value="on"/>
復選框(多選)
使用 <form:checkboxes items="${webFrameworkList}" path="favoriteFrameworks" /> 標簽來渲染一個 HTML 多選復選框,等同於:
<span>
<input id="favoriteFrameworks1" name="favoriteFrameworks" type="checkbox" value="Spring MVC" checked="checked"/>
<label for="favoriteFrameworks1">Spring MVC</label>
</span>
<span>
<input id="favoriteFrameworks2" name="favoriteFrameworks" type="checkbox" value="Struts 1"/>
<label for="favoriteFrameworks2">Struts 1</label>
</span>
<span>
<input id="favoriteFrameworks3" name="favoriteFrameworks" type="checkbox" value="Struts 2" checked="checked"/>
<label for="favoriteFrameworks3">Struts 2</label>
</span>
<span>
<input id="favoriteFrameworks4" name="favoriteFrameworks" type="checkbox" value="Apache Wicket"/>
<label for="favoriteFrameworks4">Apache Wicket</label>
</span>
<input type="hidden" name="_favoriteFrameworks" value="on"/>
單選按鈕
使用 <form:radiobutton /> 標簽來渲染一個 HTML 單選按鈕,等同於:
<form:radiobutton path="gender" value="M" label="男" /> <form:radiobutton path="gender" value="F" label="女" /> <input id="gender1" name="gender" type="radio" value="M" checked="checked"/><label for="gender1">男</label> <input id="gender2" name="gender" type="radio" value="F"/><label for="gender2">女</label>
單選按鈕(多選)
使用 <form:radiobuttons path="favoriteNumber" items="${numbersList}" /> 標簽來渲染一個 HTML 多項單選按鈕,等同於:
<span>
<input id="favoriteNumber1" name="favoriteNumber" type="radio" value="1"/>
<label for="favoriteNumber1">1</label>
</span>
<span>
<input id="favoriteNumber2" name="favoriteNumber" type="radio" value="2"/>
<label for="favoriteNumber2">2</label>
</span>
<span>
<input id="favoriteNumber3" name="favoriteNumber" type="radio" value="3"/>
<label for="favoriteNumber3">3</label>
</span>
<span>
<input id="favoriteNumber4" name="favoriteNumber" type="radio" value="4"/>
<label for="favoriteNumber4">4</label>
</span>
下拉列表
使用 <form:select />, <form:option />,<form:options /> 標簽來渲染一個 HTML 下拉列表
Controller
model.addAttribute("addressList",addressList);
model.addAttribute("user",user);
<form:form action="/useradd" method="post" modelAttribute="user">
<form:input path="username"></form:input>
<form:select path="address.id">
<form:options items="${addressList}" itemLabel="addrname" itemValue="id"/> //itemLabel指addressList中的每一個元素.addrname(同理itemValue)
</form:select>
<input type="submit" value="提交">
</form:form>
下拉列表(多選)
使用 <form:select /> 標簽及其屬性 multiple=true 來渲染一個 HTML 多選下拉列表,等同於:
<form:select path="skills" items="${skillsList}" multiple="true" />
<select id="skills" name="skills" multiple="multiple"> <option value="Struts">Struts</option> <option value="Hibernate">Hibernate</option> <option value="Apache Wicket">Apache Hadoop</option> <option value="Spring">Spring</option> </select> <input type="hidden" name="_skills" value="1"/>
隱藏字段域
使用 <form:hidden path="id" value="1000"/> 標簽來渲染一個 HTML 隱藏字段域,等同於:
<input id="id" name="id" type="hidden" value="1000"/>
示例:
<form:form action="/user/save" cssClass="form-horizontal" method="post" modelAttribute="tbuser">
<div class="box-body">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用戶名</label>
<div class="col-sm-10">
<form:input path="username" cssClass="form-control" placeholder="用戶名"></form:input>
</div>
</div>e
<div class="form-group">
<label for="password" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-10">
<form:password path="password" cssClass="form-control" placeholder="密碼"/>
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-2 control-label">手機號</label>
<div class="col-sm-10">
<form:input path="phone" cssClass="form-control" placeholder="手機號"></form:input>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<form:input path="email" cssClass="form-control" placeholder="郵箱"></form:input>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="button" class="btn btn-default" onclick="javascript:history.go(-1)">返回</button>
<button type="submit" class="btn btn-info pull-right">添加</button>
</div>
</form:form>
參數
modelAttribute="tbuser" :必須加上,表單提交后保存默認值;然后無論是get和post請求中都需要加上 model.addAttribute("tbuser",tbUser);獲者使用@ModelAttribute注解(下面有詳細)
<form:input path="username" cssClass="form-control" placeholder="用戶名"></form:input> :表單提交后,保存的是 tbuser.username -->所以path中的值必須是tbuser中的字段
名稱
相當於
<form class="form-horizontal" action="/user/save" method="post">
<div class="box-body">
<div class="form-group">
<label for="inputusername" class="col-sm-2 control-label">用戶名</label>
<div class="col-sm-10">
<input name="username" value="${tbuser.username}" type="username" class="form-control" id="inputusername" placeholder="用戶名">
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-10">
<input name="password" value="${tbuser.password}" type="password" class="form-control" id="inputPassword" placeholder="密碼">
</div>
</div>
<div class="form-group">
<label for="inputphone" class="col-sm-2 control-label">手機號</label>
<div class="col-sm-10">
<input name="phone" value="${tbuser.phone}" type="text" class="form-control" id="inputphone" placeholder="手機號">
</div>
</div>
<div class="form-group">
<label for="inputemail" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input name="email" value="${tbuser.email}" type="text" class="form-control" id="inputemail" placeholder="郵箱">
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="button" class="btn btn-default" onclick="javascript:history.go(-1)">返回</button>
<button type="submit" class="btn btn-info pull-right">添加</button>
</div>
<!-- /.box-footer -->
</form>
@ModelAttribute 具有如下三個作用:
- 綁定請求參數到命令對象:放在功能處理方法的入參上時,用於將多個請求參數綁定到一個命令對象,從而簡化綁定流程,而且自動暴露為模型數據用於視圖頁面展示時使用
- 暴露
@RequestMapping方法返回值為模型數據:放在功能處理方法的返回值上時,是暴露功能處理方法的返回值為模型數據,用於視圖頁面展示時使用 - 暴露表單引用對象為模型數據:放在處理器的一般方法(非功能處理方法)上時,是為表單准備要展示的表單引用對象,如注冊時需要選擇的所在城市等,而且在執行功能處理方法(
@RequestMapping注解的方法)之前,自動添加到模型對象中,用於視圖頁面展示時使用

在執行所有的請求之前(當前類的所有的請求),都要先執行 @ModelAttribute 下面的方法,並且如果有返回值的話,直接將返回值添加到model(相當於)中
model.addAttribute("tbUser",返回的對象); tbUser就是返回方法名(函數的放回類型)
可以使用TbUser來接受數據;
