SpringMVC表單標(biāo)簽知識(shí)點(diǎn)詳解

更新時(shí)間：2017年10月24日 10:40:02 作者：Erola

這篇文章主要為大家詳細(xì)介紹了SpringMVC表單標(biāo)簽知識(shí)點(diǎn)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本篇我們來(lái)學(xué)習(xí)Spring MVC表單標(biāo)簽的使用，借助于Spring MVC提供的表單標(biāo)簽可以讓我們?cè)谝晥D上展示W(wǎng)ebModel中的數(shù)據(jù)更加輕松。

一.首先我們先做一個(gè)簡(jiǎn)單了例子來(lái)對(duì)Spring MVC表單表單標(biāo)簽的使用有一個(gè)大致的印象，然后再結(jié)合例子對(duì)各個(gè)標(biāo)簽介紹一下如何使用。

1.首先，在com.demo.web.models包中添加一個(gè)模型TagsModel內(nèi)容如下：

package com.demo.web.models;

import java.util.List;
import java.util.Map;

public class TagsModel{
 
 private String username;
 private String password;
 private boolean testBoolean;
 private String[] selectArray;
 private String[] testArray;
 private Integer radiobuttonId;
 private Integer selectId;
 private List<Integer> selectIds; 
 private Map<Integer,String> testMap;
 private String remark;
 
 public void setUsername(String username){
  this.username=username;
 }
 public void setPassword(String password){
  this.password=password;
 }
 public void setTestBoolean(boolean testBoolean){
  this.testBoolean=testBoolean;
 }
 public void setSelectArray(String[] selectArray){
  this.selectArray=selectArray;
 }
 public void setTestArray(String[] testArray){
  this.testArray=testArray;
 }
 public void setRadiobuttonId(Integer radiobuttonId){
  this.radiobuttonId=radiobuttonId;
 }
 public void setSelectId(Integer selectId){
  this.selectId=selectId;
 }
 public void setSelectIds(List<Integer> selectIds){
  this.selectIds=selectIds;
 }
 public void setTestMap(Map<Integer,String> testMap){
  this.testMap=testMap;
 }
 public void setRemark(String remark){
  this.remark=remark;
 }
 
 public String getUsername(){
  return this.username;
 }
 public String getPassword(){
  return this.password;
 }
 public boolean getTestBoolean(){
  return this.testBoolean;
 }
 public String[] getSelectArray(){
  return this.selectArray;
 }
 public String[] getTestArray(){
  return this.testArray;
 }
 public Integer getRadiobuttonId(){
  return this.radiobuttonId;
 }
 public Integer getSelectId(){
  return this.selectId;
 }
 public List<Integer> getSelectIds(){
  return this.selectIds;
 }
 public Map<Integer,String> getTestMap(){
  return this.testMap;
 }
 public String getRemark(){
  return this.remark;
 }
 
}

2.其次，在包c(diǎn)om.demo.web.controllers添加一個(gè)TagsController內(nèi)容如下：

package com.demo.web.controllers;

import java.util.Arrays;
import java.util.HashMap;
import java.util.Map;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import com.demo.web.models.TagsModel;

@Controller
@RequestMapping(value = "/tags")
public class TagsController {
 
 @RequestMapping(value="/test", method = {RequestMethod.GET})
 public String test(Model model){

  if(!model.containsAttribute("contentModel")){  
   
   TagsModel tagsModel=new TagsModel();
   
   tagsModel.setUsername("aaa");
   tagsModel.setPassword("bbb");
   tagsModel.setTestBoolean(true);
   tagsModel.setSelectArray(new String[] {"arrayItem 路人甲"});
   tagsModel.setTestArray(new String[] {"arrayItem 路人甲","arrayItem 路人乙","arrayItem 路人丙"});
   tagsModel.setRadiobuttonId(1);
   tagsModel.setSelectId(2);
   tagsModel.setSelectIds(Arrays.asList(1,2));
   Map<Integer,String> map=new HashMap<Integer,String>();
   map.put(1, "mapItem 路人甲");
   map.put(2, "mapItem 路人乙");
   map.put(3, "mapItem 路人丙");
   tagsModel.setTestMap(map);
   tagsModel.setRemark("備注...");
   
   model.addAttribute("contentModel", tagsModel);
  }
  return "tagstest";
 }
 
}

3.最后，在views文件夾下添加視圖tagstest.jsp內(nèi)容如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
 <form:form modelAttribute="contentModel" method="post">  
  
  input 標(biāo)簽：<form:input path="username"/><br/>
  password 標(biāo)簽：<form:password path="password"/><br/>
  綁定boolean的checkbox 標(biāo)簽：<br/>
  <form:checkbox path="testBoolean"/><br/>
  綁定Array的checkbox 標(biāo)簽：<br/>
  <form:checkbox path="testArray" value="arrayItem 路人甲"/>arrayItem 路人甲
  <form:checkbox path="testArray" value="arrayItem 路人乙"/>arrayItem 路人乙
  <form:checkbox path="testArray" value="arrayItem 路人丙"/>arrayItem 路人丙
  <form:checkbox path="testArray" value="arrayItem 路人丁"/>arrayItem 路人丁<br/>
  綁定Array的checkboxs 標(biāo)簽：<br/>
  <form:checkboxes path="selectArray" items="${contentModel.testArray}"/><br/>
  綁定Map的checkboxs 標(biāo)簽：<br/>
  <form:checkboxes path="selectIds" items="${contentModel.testMap}"/><br/>
  綁定Integer的radiobutton 標(biāo)簽：<br/>
  <form:radiobutton path="radiobuttonId" value="0"/>0
  <form:radiobutton path="radiobuttonId" value="1"/>1
  <form:radiobutton path="radiobuttonId" value="2"/>2<br/>
  綁定Map的radiobuttons 標(biāo)簽：<br/>
  <form:radiobuttons path="selectId" items="${contentModel.testMap}"/><br/>
  綁定Map的select 標(biāo)簽：<br/>
  <form:select path="selectId" items="${contentModel.testMap}"/><br/>
  不綁定items數(shù)據(jù)直接在form:option添加的select 標(biāo)簽：<br/>
  <form:select path="selectId"> 
   <option>請(qǐng)選擇人員</option>
   <form:option value="1">路人甲</form:option>
   <form:option value="2">路人乙</form:option>
   <form:option value="3">路人丙</form:option>
  </form:select><br/>
  不綁定items數(shù)據(jù)直接在html的option添加的select 標(biāo)簽：<br/>
  <form:select path="selectId"> 
   <option>請(qǐng)選擇人員</option> 
   <option value="1">路人甲</option>
   <option value="2">路人乙</option>
   <option value="3">路人丙</option> 
  </form:select><br/>
  用form:option綁定items的select 標(biāo)簽：<br/>
  <form:select path="selectId"> 
   <option/>請(qǐng)選擇人員
   <form:options items="${contentModel.testMap}"/> 
  </form:select><br/>
  textarea 標(biāo)簽：
  <form:textarea path="remark"/><br/>

  <input type="submit" value="Submit" />
  
 </form:form> 
</body>
</html>

4.運(yùn)行測(cè)試：

二.下面我們來(lái)介紹各個(gè)標(biāo)簽的使用方法。

1.要使用Spring MVC提供的表單標(biāo)簽，首先需要在視圖頁(yè)面添加：

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

2.form標(biāo)簽：

<form:form modelAttribute="contentModel" method="post">

modelAttribute屬性指定該form綁定的是哪個(gè)Model，當(dāng)指定了對(duì)應(yīng)的Model后就可以在form標(biāo)簽內(nèi)部其它表單標(biāo)簽上通過(guò)為path指定Model屬性的名稱(chēng)來(lái)綁定Model中的數(shù)據(jù)了，method屬性指定form的提交方式如GET、POST等。

3.input標(biāo)簽：

<form:input path="username"/>

會(huì)生成一個(gè)type為text的Html input標(biāo)簽，通過(guò)path屬性來(lái)指定要綁定的Model中的值。

4.password標(biāo)簽：

<form:password path="password"/>

會(huì)生成一個(gè)type為password的Html input標(biāo)簽，通過(guò)path屬性來(lái)指定要綁定的Model中的值。

5.checkbox標(biāo)簽：

會(huì)生成一個(gè)type為checkbox的Html input標(biāo)簽，支持綁定boolean、數(shù)組、List或Set類(lèi)型的數(shù)據(jù)。

綁定boolean數(shù)據(jù)會(huì)生成一個(gè)復(fù)選框，當(dāng)boolean為true該復(fù)選框?yàn)檫x定狀態(tài)，false為不選定狀態(tài)。

<form:checkbox path="testBoolean"/>

綁定數(shù)組、List或Set類(lèi)型的數(shù)據(jù)（以數(shù)組作為演示）如果綁定的數(shù)據(jù)中有對(duì)應(yīng)checkbox指定的value時(shí)則為選定狀態(tài)，反之為不選定狀態(tài)：

綁定Array的checkbox 標(biāo)簽：<br/>

<form:checkbox path="testArray" value="arrayItem 路人甲"/>arrayItem 路人甲
<form:checkbox path="testArray" value="arrayItem 路人乙"/>arrayItem 路人乙
<form:checkbox path="testArray" value="arrayItem 路人丙"/>arrayItem 路人丙
<form:checkbox path="testArray" value="arrayItem 路人丁"/>arrayItem 路人丁

6.checkboxs標(biāo)簽：

會(huì)根據(jù)綁定的items數(shù)據(jù)生成一組對(duì)應(yīng)的type為checkbox的Html input標(biāo)簽，綁定的數(shù)據(jù)可以是數(shù)組、集合或Map，其中checkboxs的path屬性也必指定，當(dāng)path中的數(shù)據(jù)有和items中的數(shù)據(jù)值同的時(shí)候?qū)?yīng)的checkbox為選定狀態(tài)，反之為不選定狀態(tài)。

綁定集合數(shù)據(jù)（以數(shù)組作為演示）：

綁定Array的checkboxs 標(biāo)簽：<br/>
<form:checkboxes path="selectArray" items="${contentModel.testArray}"/>

這里需要注意的是當(dāng)使用EL表達(dá)式綁定時(shí)需要連Model的名稱(chēng)一起指定如${contentModel.testArray}而不能像path一樣只指定Model對(duì)應(yīng)的屬性名稱(chēng)。

但通常情況下我們需要的是checkbox顯示的是名稱(chēng)，但選擇后提交的是對(duì)應(yīng)名稱(chēng)的值，比如id，我們就可以通過(guò)綁定Map來(lái)實(shí)現(xiàn)這個(gè)功能：

綁定Map的checkboxs 標(biāo)簽：<br/>
<form:checkboxes path="selectIds" items="${contentModel.testMap}"/>

生成的一組checkbox中其中一個(gè)checkbox的html代碼：

復(fù)制代碼代碼如下:

<span><input name="selectIds" type="checkbox" value="1" checked="checked"/><label for="selectIds1">mapItem 路人甲</label></span>

7.radiobutton標(biāo)簽：

會(huì)生成一個(gè)type為radio的Html input標(biāo)簽，如果綁定的數(shù)據(jù)的值對(duì)應(yīng)radiobutton指定的value時(shí)則為選定狀態(tài)，反之為不選定狀態(tài)：

綁定Integer的radiobutton 標(biāo)簽：<br/>
<form:radiobutton path="radiobuttonId" value="0"/>0
<form:radiobutton path="radiobuttonId" value="1"/>1
<form:radiobutton path="radiobuttonId" value="2"/>2

8.radiobuttons標(biāo)簽：

會(huì)根據(jù)綁定的items數(shù)據(jù)生成一組對(duì)應(yīng)的type為radio的Html input標(biāo)簽，綁定的items數(shù)據(jù)可以是數(shù)組、集合或Map，其中radiobuttons的path屬性也必指定，當(dāng)path的值和items中的某條數(shù)據(jù)值相同的時(shí)候?qū)?yīng)的radio為選定狀態(tài)，反之為不選定狀態(tài)，用法和checkboxs很相似。但要注意的是：checkboxs的path綁定的是集合radiobuttons的path綁定的是單個(gè)值：

綁定Map的radiobuttons 標(biāo)簽：<br/>
<form:radiobuttons path="selectId" items="${contentModel.testMap}"/>

9.select標(biāo)簽：

會(huì)生成一個(gè)Html select標(biāo)簽，綁定的items數(shù)據(jù)可以是數(shù)組、集合或Map會(huì)根據(jù)items的內(nèi)容生成select里面的option選項(xiàng)，當(dāng)path的值和items中的某條數(shù)據(jù)值相同的時(shí)候?qū)?yīng)的option為選定狀態(tài)，反之為不選定狀態(tài)，用法與radiobuttons很相似：

綁定Map的select 標(biāo)簽：<br/>
<form:select path="selectId" items="${contentModel.testMap}"/>

上面的是根據(jù)指定的items自動(dòng)生成的option選項(xiàng)，但我們也可以不指定items手動(dòng)添加select的option選項(xiàng)：

不綁定items數(shù)據(jù)直接在form:option添加的select 標(biāo)簽：<br/>
<form:select path="selectId"> 
 <option>請(qǐng)選擇人員</option>
 <form:option value="1">路人甲</form:option>
 <form:option value="2">路人乙</form:option>
 <form:option value="3">路人丙</form:option>
</form:select>

其中添加<option>請(qǐng)選擇人員</option> 可以讓在沒(méi)有進(jìn)行選擇的情況下不指定任何默認(rèn)值。

下面看一下form:option 與option的區(qū)別：

不綁定items數(shù)據(jù)直接在form:option添加的select 標(biāo)簽：<br/>
<form:select path="selectId"> 
 <option>請(qǐng)選擇人員</option>
 <form:option value="1">路人甲</form:option>
 <form:option value="2">路人乙</form:option>
 <form:option value="3">路人丙</form:option>
</form:select><br/>
不綁定items數(shù)據(jù)直接在html的option添加的select 標(biāo)簽：<br/>
<form:select path="selectId"> 
 <option>請(qǐng)選擇人員</option> 
 <option value="1">路人甲</option>
 <option value="2">路人乙</option>
 <option value="3">路人丙</option> 
</form:select><br/>

由截圖的結(jié)果可以看出form:option 正確選擇了path中指定的selectId而option沒(méi)有，說(shuō)明form:option有數(shù)據(jù)綁定功能option沒(méi)有。

另外我們也可以不為select指定items，而把items指定到form:option 上這兩種效果基本是一樣的，一點(diǎn)區(qū)別就是為select指定items再在select里面添加option是不起作用的會(huì)被items生成的option覆蓋掉，而把items指定到form:option 上則可以再在select里面添加option：

用form:option綁定items的select 標(biāo)簽：<br/>
<form:select path="selectId"> 
 <option/>請(qǐng)選擇人員
 <form:options items="${contentModel.testMap}"/> 
</form:select>

10.textarea標(biāo)簽：

textarea 標(biāo)簽：
<form:textarea path="remark"/>

會(huì)生成一個(gè)Html textarea標(biāo)簽，通過(guò)path屬性來(lái)指定要綁定的Model中的值。

11.hidden標(biāo)簽：

會(huì)生成一個(gè)type為hidden的Html input標(biāo)簽，通過(guò)path屬性來(lái)指定要綁定的Model中的值。

12.errors標(biāo)簽：

errors標(biāo)簽的用法在系列（6）—>數(shù)據(jù)驗(yàn)證中已經(jīng)說(shuō)明了，這里不在贅述。

Spring MVC表單標(biāo)簽的內(nèi)容到此結(jié)束。

代碼下載

注：之前沒(méi)注意前11篇的示例代碼，不知道為什么當(dāng)時(shí)打包上傳上去的是沒(méi)有.project項(xiàng)目文件的，導(dǎo)致下載后不能直接導(dǎo)入eclipse運(yùn)行，虛擬機(jī)又被我刪掉了，這些示例代碼也沒(méi)有備份，但是代碼文件還在的，所以可以新建一個(gè)Dynamic Web Project把對(duì)應(yīng)的配置文件和controller還有view導(dǎo)入就可以了，給大家造成的不便說(shuō)聲抱歉。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: