스프링 Form 커맨드 태그

 

회원 정보 수정 등 정보 수정페이지를 구성할 때 요긴하게 사용 가능하다.

스프링에서는 <form:태그명> 형태로 되어 있는 커스텀 태그를 제공하고 있다.

Form 커스텀 태그를 활용하면 Model 객체에 들어있는 값을 form 요소에 주입 시킬 수 있다.

 

<form action="test" method="post">
	name : <input type="text" name="name"/>
	age : <input type="text" name="age"/>
	id : <input type="text" name="id"/>
	<button type="submit">확인</button>
</form>

@PostMapping("/test")
public String test(MemberDTO member){
	
	return "";
}

<form action="test" method="post">
	name : <input type="text" name="name" value="${requestScope.memberDTO.name}"/>
	age : <input type="text" name="age" value="${requestScope.memberDTO.age}"/>
	id : <input type="text" name="id" value="${requestScope.memberDTO.id}"/>
	<button type="submit">확인</button>
</form>

이렇게 value에 값이 들어오는 것을 확인 할 수 있다.

 

Form 태그 사용을 위한 설정

 

URI 설정

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

<form:form modelAttribute="memberDTO" action="test">
	name: <form:input path="name"/>
<!-- name : <input id="name" name="name" type="text" value="값"/> -->
	age : <form:input path="age"/>
	id : <form:input path="id"/>
<!-- pw : <form:password path="" showPassword="true"/>-->
</form:form>

MemberDTO

public class MemberDTO{
	private String name;
	private String age;
	private String id;

	public String getName() {
		return data1;	
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getAge() {
		return age;	
	}

	public void setAge(String age) {
		this.age = age;
	}
	public String getId() {
		return id;	
	}

	public void setId(String id) {
		this.id = id;
	}
}

 

model을 사용하면

@GetMapping("/test")
public String test(Mdoel model){
	MemberDTO member = new MemberDTO(); //직접 객체를 생성
	//객체
	//전송
	//구간
	model.addAttribute("test_member", member);
	
	return "";
}

<form:form modelAttribute="test_member" action="test">
	name: <form:input path="name"/>
<!-- name : <input id="name" name="name" type="text" value="값"/> -->
	age : <form:input path="age"/>
	id : <form:input path="id"/>
<!-- pw : <form:password path="" showPassword="true"/>-->
</form:form>

 

---

폼 태그 요소 1

@PostMapping("/test")
public String test(MemberDTO member){
	
	return "";
}

<form:form>
</form:form>
<!-- <form id="command" action="/패키지명/파일명" method="post"></form> -->

form:form 태그

<form> 태그를 생성한다.

modelAttribute : form 태그 내의 입력 요소들에 적용될 value 값을 가진 객체 이름. 이 속성의 값이 id 속성으로 설정됩니다. 생략시 command라는 문자열이 id로 설정됩니다.

action : 요청할 주소를 설정합니다. 생략시 현재 페이지가 설정됩니다.

method : 요청 방식을 설정합니다. 생략시 post로 설정됩니다.

 

<form:form modelAttibute="memberDTO" action="test" method="get">
</form:form>
<!-- <form id="memberDTO" action="test" method="get"></form> -->

form:button 태그

submit 버튼을 생성한다.

disabled : true를 세팅해주면 버튼을 누를 수 없도록 비활성화 됩니다.

 

<form:form modelAttibute="memberDTO" action="test" method="get">
	<form:button>확인버튼</form:button>
</form:form>
<!-- <form id="memberDTO" action="test" method="get">
			<button type="submit" value="Submit"> 확인버튼 </button>
		</form>
-->

form:hidden 태그

Hidden 타입의 input 태그를 생성합니다.

path : 설정한 문자열은 id와 name 속성으로 지정되며 model 의 값을 추출해 value 속성에 주입합니다.

 

@PostMapping("/test")
public String test(MemberDTO member){
		member.setName("kkk");
	return "";
}

<form:form modelAttibute="memberDTO" action="test" method="get">
	<form:hidden path="name"/>
	name : <form:input path="name"/>
	<form:button>확인버튼</form:button>
</form:form>
<!-- <form id="memberDTO" action="test" method="get"> 
				<input id="name" name="name" type="hidden" vlaue="kkk"/>
				<button type="submit" value="Submit"> 확인버튼 </button>
		</form>
-->

form:input 태그

text타입의 input 태그를 생성한다.

path : 설정한 문자열은 id와 name속성 으로 지정되며 model의 값을 추출해 value 속성에 주입한다.

<form:form modelAttibute="memberDTO" action="test" method="get">
	<form:hidden path="name"/>
	name : <form:input path="name"/>
	<form:button>확인버튼</form:button>
</form:form>
<!-- <form id="memberDTO" action="test" method="get"> 
				<input id="name" name="name" type="hidden" vlaue="kkk"/>
	name : <input id="name" name="name" type="text" vlaue="kkk"/>
				<button type="submit" value="Submit"> 확인버튼 </button>
		</form>
-->

form:password 태그

password 타입의 input 태그를 생성

path : 설정한 문자열은 id와 name속성으로 지정되며 model 값을 추출해 value 속성에 주입한다.

showPassword : 셋팅될 값의 이름을 지정하더라도 값이 세팅되지 않는데 이 속성에 true를 넣어주면 값이 세팅된다. (보안상)

<form:form modelAttibute="memberDTO" action="test" method="get">
	<form:hidden path="name"/>
	name : <form:input path="name"/>
	password : <form:password path="name"/> <!--showPassword="true" 하면 값이 들어간다.-->
	<form:button>확인버튼</form:button>
</form:form>
<!-- <form id="memberDTO" action="test" method="get"> 
				<input id="name" name="name" type="hidden" vlaue="kkk"/>
	name : <input id="name" name="name" type="text" vlaue="kkk"/>
	password : <input id="name" name="name" type="password" vlaue="" /> 값이 비어있다.
				<button type="submit" value="Submit"> 확인버튼 </button>
		</form>
-->

 

form:textarea 태그

textarea 타입의 input 태그를 생성한다.

path : 설정한 문자열은 id와 name속성으로 지정되며 model 값을 추출해 value 속성에 주입한다.

 

<form:form modelAttibute="memberDTO" action="test" method="get">
	<form:hidden path="name"/>
	name : <form:input path="name"/>
	password : <form:password path="name"/> <!--showPassword="true" 하면 값이 들어간다.-->
	textarea : <form:textarea path="name"/>
	<form:button>확인버튼</form:button>
</form:form>
<!-- <form id="memberDTO" action="test" method="get"> 
				<input id="name" name="name" type="hidden" vlaue="kkk"/>
	name : <input id="name" name="name" type="text" vlaue="kkk"/>
	password : <input id="name" name="name" type="password" vlaue="" /> 값이 비어있다.
	textarea : <textarea id="name" name="name">kkk</textarea>
				<button type="submit" value="Submit"> 확인버튼 </button>
		</form>
-->

---

Form tag 요소2

 

select, checkbox, radio

유동적으로 생성 할 수 있게 된다.

form:select 태그

select 태그를 생성한다.

path : 설정한 문자열은 id와 name속성으로 지정되며 model의 값을 추출해 값과 동일한 value 속성의 option 태그를 선택한다.

@PostMapping("/test")
public String test(MemberDTO member){
		member.setName("kkk");
	return "";
}

<form:form modelAttribute="memberDTO">
	<form:select path="name">
		<form:option value="kkk">항목1</form:option>
		<form:option value="zzz">항목2</form:option>
	</form:select>
</form:form>
<!-- 
<select id="name" name="name">
	<option value="kkk" selected="selected">항목1</option>
	<option value="zzz">항목2</option>
 -->

form:option 태그와 form:options 태그

items : option 태그들을 생성할 때 필요한 데이터가 담긴 list나 배열

@PostMapping("/test")
public String test(MemberDTO member, Model model){
		member.setName("kkk");

		String [] list = {"kkk","zzz"};
		model.addAttribute("list",list);

	return "";
}

<form:form modelAttribute="memberDTO">
	<form:select path="name">
		<form:option value="kkk">항목1</form:option>
		<form:option value="zzz">항목2</form:option>
	</form:select>
</form:form>
<form:select path="name">
	<form:options item="${requestScope.list}"/>
</form:select>
<!-- 
<select id="name" name="name">
	<option value="kkk" selected="selected">항목1</option>
	<option value="zzz">항목2</option>
</select>

<option value="kkk" selected="selected">kkk</option>
<option value="zzz">zzz</option>
	
 -->

 

arraylist로도 가능

@PostMapping("/test")
public String test(MemberDTO member, Model model){
		member.setName("kkk");

		String [] list = {"kkk","zzz"};
		model.addAttribute("list",list);
	
		ArrayList<String> list2 = new ArrayList<String>();
		list2.add("kkk");
		list2.add("zzz");
		model.addAttribute("list2",list2);

	return "";
}

<form:form modelAttribute="memberDTO">
	<form:select path="name">
		<form:option value="kkk">항목1</form:option>
		<form:option value="zzz">항목2</form:option>
	</form:select>
</form:form>
<form:select path="name">
	<form:options item="${requestScope.list}"/>
</form:select>
<form:select path="name">
	<form:options item="${requestScope.list2}"/>
</form:select>
<!-- 
<select id="name" name="name">
	<option value="kkk" selected="selected">항목1</option>
	<option value="zzz">항목2</option>
</select>

<option value="kkk" selected="selected">kkk</option>
<option value="zzz">zzz</option>

<option value="kkk" selected="selected">kkk</option>
<option value="zzz">zzz</option>
	
 -->

key와 value

@PostMapping("/test")
public String test(MemberDTO member, Model model){
		member.setName("kkk");

		String [] list = {"kkk","zzz"};
		model.addAttribute("list",list);
	
		ArrayList<String> list2 = new ArrayList<String>();
		list2.add("kkk");
		list2.add("zzz");
		model.addAttribute("list2",list2);

		keyValueBean key_bean1 = new KeyValueBean(); //가상의 DTO
		keyValueBean key_bean2 = new KeyValueBean();

		key_bean1.setKey("항목1");
		key_bean1.setValue("data1");

		key_bean2.setKey("항목2");
		key_bean2.setValue("data2");

		ArrayList<KeyValueBean> list3 = new ArrayList<KeyValueBean>();
		list3.add(key_bean1);
		list3.add(key_bean2);

		model.addAttribute("list3",list3);

	return "";
}

<form:form modelAttribute="memberDTO">
	<form:select path="name">
		<form:option value="kkk">항목1</form:option>
		<form:option value="zzz">항목2</form:option>
	</form:select>
</form:form>
<form:select path="name">
	<form:options item="${requestScope.list}"/>
</form:select>
<form:select path="name">
	<form:options item="${requestScope.list2}"/>
</form:select>

<form:select path="name">
	<form:options item="${requestScope.list3}" itemLabel="key" itemValue="value"/>
																		<!-- 객체가 가지고 있는 값중 어떤 것을 label로 쓰고 
																									value로 쓸건지 정한다. -->
</form:select>
<!-- 
<select id="name" name="name">
	<option value="kkk" selected="selected">항목1</option>
	<option value="zzz">항목2</option>
</select>

<option value="kkk" selected="selected">kkk</option>
<option value="zzz">zzz</option>

<option value="kkk" selected="selected">kkk</option>
<option value="zzz">zzz</option>

<option value="data1" selected="selected">항목1</option>
<option value="data2">항목2</option>
	
 -->

form:checkbox 태그

@PostMapping("/test")
public String test(MemberDTO member, Model model){
		
	String [] check_list = {"data1","data2"};
	member.setName(check_list);
	member.setId(check_list);

	return "";
}

<form:form modelAttribute="memberDTO">
	<form:checkbox path="name" value="data1"/>항목1
	<form:checkbox path="name" value="data2"/>항목2
	<!-- 
	배열에 data1, data2가 있기 때문에 두개다 체크가 된다.
 -->
	<form:checkboxs items="${reuquestScope.check_list}" path="name"/>
<!--label이랑 value가 값이같다.-->

<form:checkboxs items="${reuquestScope.check_list}" path="name" itemLabel="key" itemValue="value"/>
<!--label이랑 value가 값을 따로 줄 수 있다..-->
</form:form>

form:radiobutton태그

<form:form modelAttribute="memberDTO">
	<form:radiobutton path="name" value="data1"/> 항목1
	<form:radiobutton path="name" value="data1"/> 항목2
	<form:radiobutton path="name" value="data1"/> 항목3

	<form:radiobuttons path="name" items="${requestScope.list1}"/>

<form:radiobuttons path="name" items="${requestScope.list1}" itemLable="key" itemValue="valus"/>
</form:form>