Form 커스텀 태그

springMVC에서는 form 커스텀 태그를 지원한다.

 

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

 

View 파일에 다음과 같이 지정을 한다면, form이라는 이름으로 폼 커스텀 태그를 만들 수 있다.

폼 커스텀 태그는 간단하게 코드를 바꿀 수 있을 뿐만 아니라, 자동으로 value값을 주입해 주기 때문에 회원정보 수정이나 글 수정과 같은 페이지에 많이 사용된다.

 

form커스텀 태그의 종류에 대해서는 아래에서 설명하도록 하겠다.

 

 

우선, 빈으로 사용될 VO클래스를 만들어주자. userName, userId, userPassword, userAddr1, userAddr2로 구성되어 있다.

 

 

 

컨트롤러이다. test1이라는 요청값이 들어오면 자동으로 test1메소드가 실행된다. test1메소드는 매개변수로 위에서 만든 UserDataBean을 받고 있다.(@ModelAttribute가 생략되어 있다. 생략되면 Request객체의 이름은 userDataBean이 된다.)

 

 

 

 

실행결과

<form id="userDataBean" action="result" method="post">
	이름 : <input id="userName" name="userName" type="text" value="홍길동"/><br/>
	아이디 : <input id="userId" name="userId" type="text" value="qwer"/><br/>
	비밀번호 : <input id="userPassword" name="userPassword" type="password" value="1234"/><br/>
	주소1 : <textarea id="userAddr1" name="userAddr1">주소1</textarea><br/>
	주소2 : <input id="userAddr2" name="userAddr2" type="hidden" value="주소2"/><br/>
	<button type="submit" value="Submit">확인</button>
</form>

 

 

실행결과와 실행결과창에서 코드보기를 이용해서 결과창 보드를 열어본 결과이다!

여러가지 태그들이 있는데 한개씩 알아보자.

 

1. <form:form>

form태그에서는 Request객체인 UserDataBean을 modelAttribute속성으로 받아준다.(첫 글자는 소문자!) 그리고 form이 동작할 action속성을 선언해준다. 이렇게 실행해주면 form태그 속성은 위와 같이 자동으로 생성되어 지는 것을 볼 수 있다. id가 자동으로 userDataBean으로 설정되고, method도 post로 자동으로 설정되었다.

 

 

2. <form:input>

input는 path를 지정해주면 설정한 문자열은 id와 name속성으로 지정되고 userDataBean안에 들어있는 프로퍼티와 같은 이름을 찾아서 자동으로 value에 주입해주게 된다.

실행 결과 코드를 보면 알 수 있다!!

 

 

3. <form:textarea> / <form:hidden>

form:input과 유사하여 한번에 묶었다. path를 설정해주면 그 문자열은 id와 name속성으로 지정된다. 그리고 그 문자열과 같은 프로퍼티를 찾아서 자동으로 value속성에 주입을 해준다.

 

 

4. <form:button>

form:button은 자동으로 type이 submit인 버튼을 만들어준다. 이 태그에 사용할 수 있는 속성은 disabled가 있다. true로 지정해주면 버튼을 비활성화 시켜준다.

 

 

 

 

이번에는 select, checkbox, radio button에 대해서 알아보자.

 

test3.jsp

<form id="userDataBean2" action="test3" method="get">
	<select id="data1" name="data1">  
		<option value="data1">항목1</option>
		<option value="data2" selected="selected">항목2</option>
		<option value="data3">항목3</option>
	</select>
	<select id="data2" name="data2">
		<option value="data1">data1</option><option value="data2" selected="selected">data2</option><option value="data3">data3</option>
	</select>
	<select id="data2" name="data2">
		<option value="data1">data1</option><option value="data2" selected="selected">data2</option><option value="data3">data3</option>
	</select>
</form>	

 

 

UserDataBean2는 data1과 data2라는 프로퍼티가 있는 빈이다. data1과 data2에는 각각 data2라는 문자열을 삽입해주었다. View에서 13~17줄을 보면 path를 data1으로 지정해준 select가 있다. path가 data1이므로 data1이라는 프로퍼티를 찾아서 알아서 value에 주입해준다. select의 하위 태그중 한개인 option태그를 14~16줄에 사용하였다.

3개의 옵션이 있는데 각각의 value는 data1, data2, data3이다. select태그의 path가 data1이었는데 data1프로퍼티에는 "data2"라는 문자열이 들어있다. select는 option에 value중에서 select의 value(여기서는 "data2"가 되겠다.)와 같은 것을 찾아서 selected옵션을 붙여준다. 즉, value값이 같은 옵션을 맨 처음 선택한 채로 실행된다.

 

계속해서 options태그를 알아보자. test3.jsp의 17~20줄이 되겠다. 

컨트롤러에서 String배열을 만들어서 거기에 data1, data2, data3을 넣었고 그 배열을 "stringList"라는 모델에 담아서(Request객체) View로 넘겨주었다. select속성의 path를 data2로 넣어주고(UserDataBean2빈의 data2라는 이름의 프로퍼티에는 "data2"라는 문자열이 담겨있다.) options태그의 items속성에 그 stringList배열을 담았다.

select태그의 value값(여기서는 "data2"가 되겠다.)과 같은 옵션에 마찬가지로 selected옵션을 붙여주어 맨처음 선택된 채로 실행이 된다.

 

options태그는 String배열 뿐아니라 ArrayList도 지원한다. MyBatis에서 꺼내온 데이터가 ArrayLIst형이기 때문에 매우 편리하게 사용할 수 있을 것이다. test3.jsp 21~23줄이 ArrayList를 사용한 실행코드이다.

 

 

 

그런데..

위의 문제점은, 실행되는 결과의 문자열과 value속성이 무조건 같게 된다는 것이다. value와 별개로 출력되는 select에 문자열을 개발자가 설정할 수도 있을 것이다. 즉, 이번에는 태그사이의 문자를 지정해보도록 하자.

 

 

태그사이의 문자와 value를 구분하기 위해서 key, value라는 이름의 프로퍼티를 가진 빈을 만들었다.

 

 

컨트롤러이다.

KeyValueBean형의 객체3개를 만들어서 각각 key와 value값을 설정해주었다. 그리고 KeyValueBean을 제네릭으로 갖는 ArrayList를 만들어서 위의 객체를 집어 넣어준다. 그리고 keyValueList라는 이름으로 model에 넣어준후 test3.jsp로 반환하였다. 

 

<select id="data1" name="data1">
   <option value="data1">첫번째 항목</option>
   <option value="data2" selected="selected">두번째 항목</option>
   <option value="data3">세번째 항목</option>
</select>

 

 

test3.jsp이다. options의 items를 keyValueList로 설정하였고 itemLable이라는 속성을 key로 받았으며 itemValue라는 속성은 value로 받았다. 이렇게 설정을 해주면 태그사이의 문자열은 key값이 되고 option의 value값은 keyValueList의 value가 된다. select의 path가 data1이므로(userDataBean2의 data1프로퍼티에는 "data2"라는 문자열을 넣어주었었다!!) "data2"라는 문자열과 option의 value가 같으면 selected옵션을 붙여주어 선택된 채로 만들어지게 되겠다.

 

여기서는 data2라는 value의 key값은 "두번째 항목"이라는 문자열 이므로 "두번째 항목"이 선택되어져 있는 select가 만들어지게 되겠다!!

 

 

 

<form:checkbox>, <form:checkboxs>

<form:radiobutton>, <form:radiobuttons>

는 select의 option, options와 유사하므로 생략하도록 하겠다. 각각의 속성이 하는 기능들이 select와 동일하다.