SpringMVC的表單標籤

1、SpringMVC對錶單標籤的支持
SpringMVC支持表單標籤,它能夠實現將模型數據中的屬性和 HTML 表單元素相綁定,以實現表單數據更便捷編輯和表單值的回顯。
通常狀況下,經過 GET 請求獲取表單頁面,而經過POST 請求提交表單頁面,所以獲取表單頁面和提交表單頁面的 URL 是相同的。只要知足該最佳條件,<form:form> 標籤就無需經過 action 屬性指定表單提交的 URL。
咱們能夠經過 modelAttribute 屬性指定綁定的模型屬性,若沒有指定該屬性,則默認從 request 域對象中讀取command 的表單 bean,若是該屬性值也不存在,則會發生錯誤。

2、SpringMVC的表單標籤詳解
一、SpringMVC提供的表單組件標籤的共同屬性
---path :表單字段,對應html元素的name屬性,支持級聯屬性;
---htmlEscape : 是否對錶單值的HTML特殊字符進行轉換,默認值爲true;
---cssClass : 表單組件對應的CSS樣式類名;
---cssErrorClass : 表單組件的數據存在錯誤時,採起的css樣式。
二、SpringMVC使用表單標籤設置
首先在jsp中添加form標籤的tld:
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
再爲form標籤的modelAttribute屬性賦值:
<form:form action="testForm" method="POST" modelAttribute="command">
modelAttribute屬性指定該form綁定的是哪一個Model,當指定了對應的Model後就能夠在form標籤內部其它表單標籤上經過爲path指定Model屬性的名稱來綁定Model中的數據了,method屬性指定form的提交方式如GET、POST等。
三、form標籤下的表單標籤詳解
---form:input
示例:
<form:input path="username"/>
會生成一個type爲text的Html input標籤,經過path屬性來指定要綁定的Model中的值。
---form:password
示例:
<form:password path="password"/>
會生成一個type爲password的Html input標籤,經過path屬性來指定要綁定的Model中的值。
---form:hidden
示例:
<form:hidden path="id"/>
會生成一個type爲hidden的Html input標籤,經過path屬性來指定要綁定的Model中的值。
---form:textarea
示例:
<form:textarea path="remark"/>
會生成一個Html textarea標籤,經過path屬性來指定要綁定的Model中的值。
---form:raidobutton
示例:
<form:radiobutton path="ifno"  />
單選框組件標籤,當表單bean對應的屬性值和value值相等時,單選框被選中。
---form:raidobuttons
delimiter爲分隔符
示例:
<form:radiobuttons path="gender" items="${genders}" delimiter=" " />
會根據綁定的items數據生成一組對應的type爲radio的Html input標籤; 綁定的items數據能夠是數組、集合或Map,其中radiobuttons的path屬性也必指定; 當path的值和items中的某條數據值相同的時候對應的radio爲選定狀態,反之爲不選定狀態,用法和checkboxs很類似; 但要注意的是:checkboxs的path綁定的是集合而radiobuttons的path綁定的是單個值。
---form:checkbox
示例:
<form:checkbox path="names"/>
會生成一個type爲checkbox的Html input標籤,支持綁定boolean、數組、List或Set類型的數據。
綁定boolean數據會生成一個複選框,當boolean爲true該複選框爲選定狀態,false爲不選定狀態。
綁定數組、List或Set類型的數據時,若是綁定的數據中有對應checkbox指定的value時則爲選定狀態,反之爲不選定狀態。
---form:checkboxs
<form:checkboxes path="selectArray" items="${contentModel.testArray}"/>
會根據綁定的items數據生成一組對應的type爲checkbox的Html input標籤,綁定的數據能夠是數組、集合或Map,其中checkboxs的path屬性也必指定,當path中的數據有和items中的數據值同的時候對應的checkbox爲選定狀態,反之爲不選定狀態。這裏須要注意的是當使用EL表達式綁定時須要連Model的名稱一塊兒指定如${contentModel.testArray}而不能像path同樣只指定Model對應的屬性名稱。但一般狀況下咱們須要的是checkbox顯示的是名稱,但選擇後提交的是對應名稱的值,好比id,咱們就能夠經過綁定Map來實現這個功能:
<form:checkboxes path="selectIds" items="${contentModel.testMap}"/>
---form:select
path :屬性; 
items:數據; 
itemLabel:每一項的名字; 
itemValue:選項的值,可爲bean的屬性
示例:
<form:select path="department.id" items="${departments}" itemLabel="departmentName" itemValue="id"></form:select>

會生成一個Html select標籤,綁定的items數據能夠是數組、集合或Map會根據items的內容生成select裏面的option選項,當path的值和items中的某條數據值相同的時候對應的option爲選定狀態,反之爲不選定狀態,用法與radiobuttons很類似。css


3、實例演示html

假設已經作好了SpringMVC的相關配置java

新建一個POJO類web

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;
	}

}

建立一個處理類

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";
	}

}

編寫一個結果頁面tagstest.jsp

<%@ 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 標籤:<form:input path="username" />
		<br />
        password 標籤:<form:password path="password" />
		<br />
        綁定boolean的checkbox 標籤:<br />
		<form:checkbox path="testBoolean" />
		<br />
        綁定Array的checkbox 標籤:<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 標籤:<br />
		<form:checkboxes path="selectArray" items="${contentModel.testArray}" />
		<br />
        綁定Map的checkboxs 標籤:<br />
		<form:checkboxes path="selectIds" items="${contentModel.testMap}" />
		<br />
        綁定Integer的radiobutton 標籤:<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 標籤:<br />
		<form:radiobuttons path="selectId" items="${contentModel.testMap}" />
		<br />
        綁定Map的select 標籤:<br />
		<form:select path="selectId" items="${contentModel.testMap}" />
		<br />
        不綁定items數據直接在form:option添加的select 標籤:<br />
		<form:select path="selectId">
			<option>請選擇人員</option>
			<form:option value="1">路人甲</form:option>
			<form:option value="2">路人乙</form:option>
			<form:option value="3">路人丙</form:option>
		</form:select>
		<br />
        不綁定items數據直接在html的option添加的select 標籤:<br />
		<form:select path="selectId">
			<option>請選擇人員</option>
			<option value="1">路人甲</option>
			<option value="2">路人乙</option>
			<option value="3">路人丙</option>
		</form:select>
		<br />
        用form:option綁定items的select 標籤:<br />
		<form:select path="selectId">
			<option />請選擇人員
            <form:options items="${contentModel.testMap}" />
		</form:select>
		<br />
        textarea 標籤:
        <form:textarea path="remark" />
		<br />

		<input type="submit" value="Submit" />

	</form:form>
</body>
</html>


編寫index頁面

<%@ 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">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	<a href="tags/test">Test tags</a>
</body>
</html>


部署到Tomcat上,點擊超連接,結果以下:

相關文章
相關標籤/搜索