조각이론

Spring form:form 태그 설명 본문

스프링

Spring form:form 태그 설명

조각이론 2018. 12. 25. 13:20


폼 태그(form:form) 

: spring버전 2.0부터 jsp와 웹MVC를 사용할 때, 폼 요소를 좀 더 편리하게 다룰 수 있도록 데이터바인딩과 관련된 광범위한 태그를 제공


# form 커스텀 태그 사용

먼저 jsp화면 상단에 태그라이브러리를 아래와 같이 import 한 후

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

HTML에서 form 태그를 생성하고 바인딩하기 위해서 form 내부태그에 바인딩 경로 'path'를 지정한다.


기본 형식은 아래와 같은 형태로 입력하며, 입력값이 없을시 method는 'post'로, action값은 '현재 요청URL'값이 설정된다.

1
<form:form></form:form>
cs

==> 이렇게 생성된 form에는 id속성이 주어지는, 이때 id 속성값은 입력폼의 값을 저장하는 커맨드 객체의 이름이 할당된다.

따라서 커맨드 객체의 이름이 기본값이 command가 아닐 경우에는 commandName 속성에 해당 커맨드 객체의 이름을 명시해야 한다.

1
<form:form commandName="member"></form:form>
cs


 # <input> 태그를 위한 커스텀 태그

<form:input> ------>    text 타입의 <input>

<form:password> ------>    password 타임의 <input>

<form:hidden> ------>    hidden 타입의 <input>

- path속성 : 바인딩 될 command객체의 프로퍼티를 지정하는 속성

1
2
<form:form commandName="member"></form:form>
<!-- <input id="userId" name="userId" type="text value="" /> -->
cs


# <select> 태그를 위한 커스텀 태그

<form:select> ------>    <select>태그를 생성한다. <option> 태그를 생성하는데 필요한 콜렉션을 전달 받을 수 있다.

<form:options> ------>    지정한 콜렉선 객케를 이용해서 <option> 태그를 생성한다.

<form:option> ------>    하나의 <option> 태그를 생성한다.


이 태그는 선택 옵션을 제공할 때 주로 사용하는 태그이므로, 여러개의 선택사항들을 제공한다.

선택정보(옵션정보)는 컨트롤러에서 생성해서 뷰로 전달하는 경우가 일반적이며 @ModelAttribute 어노테이션을 이용해서 전달한다.


사용 예) 스프링 Controller에서 미리 값을 세팅한 후 jsp파일에서 아래와 같이 사용할 수 있다.

( java - Controller)

1
2
3
4
5
6
7
8
9
10
protected List<String> referData() throws Exception {
    List<String> bloodType = new ArrayList<String>();
    
    bloodType.add("A");                        
    bloodType.add("B");
    bloodType.add("O");
    bloodType.add("AB");
            
    return bloodType;
// select 박스의 값을 기본으로 세팅하는 메소드
cs

첫번째 방법( jsp - View)

1
2
3
<form:form commandName="member">
    <form:select path="bloodType" items="${bloodType}" />
</form:form>
cs

두번째 방법( jsp - View)

1
2
3
4
<form:select path="bloodType">
    <option value="">-----선택해주세요</option>
    <form:options items="${bloodType}">
</form:select>
cs

위의내용은 기존 HTML에서 다음과 같다.

1
2
3
4
5
6
7
8
<!--Html -->
<select id="bloodType" name="bloodType">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="O">O</option>
    <option value="AB">AB</option>
</select> 
 
cs

+ label 태그 사용하기

1
2
3
4
5
6
7
8
9
10
11
12
<form:select path="bloodType">
    <form:option value="A"/>
    <form:option value="B">제멋대로B형</form:option>
    <form:option value="AB" label="OnMyWay" />
</form:select>
        
<!-- HTML 버전 -->
<select id="join" name="bloodType">
    <option value="A">A</option>
    <option value="B">제멋대로B형</option>
    <option value="AB">OnMyWay</option>
</select>
cs


** 콜렉션에 있는 객체가 String이 아닌 경우 (클래스 자체가 콜렉션에 들어갈때)

( java - Controller)

1
2
3
4
5
6
7
8
9
public class Code {
        
    private String code;
    private String label;
            
    // getter, setter
    .....
            
}
cs

( jsp - View )
1
2
3
4
5
6
7
8
9
10
11
12
<form:select path="jobCode">
    <option value=""> ----선택---- </option>
    <form:options items="${jobCode}" itemLabel="label" itemValue="code" />
</form:select>
 
<!-- HTML 버전 -->
<select id="bloodType" name="bloodType">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="O">O</option>
    <option value="AB">AB</option>
</select>
cs



# checkBox 타입의 <input> 태그를 위한 커스텀 태그

<form:checkboxes> : 커맨드 객체의 특정 프로퍼티와 관련된 checkbox 타입의 input 태그 목록을 생성한다.

<form:checkbox> : 커맨드 객체의 특정 프로퍼티와 관련된 checkbox 타입의 한개의 input 태그를 생성한다.

1
<form:checkboxes><form:checkbox>
cs

커맨드 객체(MemberInfo)가 아래와 같을 때

1
2
3
4
5
6
7
8
9
10
11
12
13
public class MemberInfo {
        
    private String[] favorites;
            
    public Stirng[] getFavorites() {
        return favorites;
    }
    public void setFavorites(String[] favorites) {
        this.favorites = favorites;
    }
        .....
}
cs


.HTML 입력 폼에서 여러개의 선택값을 주는 양식

1
2
<input type="checkbox" name="favorites" value="독서">독서</input>
<input type="checkbox" name="favorites" value="여행">여행</input>
cs


사용 예)

1
2
3
4
5
6
<form:label path="favorites">취미</form:label>
<form:checkboxes items="${해당컬랙션의이름}" path="" />
            
<!-- HTML 버전 -->
<input id="favorites1" type="checkbox" name="favorites" value="독서"><label>독서</label></input>
<input id="favorites2" type="checkbox" name="favorites" value="여행"><label>여행</label></input>
cs



# radio 타입의 <input> 태그를 위한 커스텀 태그:

<form:radiobuttons> : 커맨드 객체의 특정 프로퍼티와 관련된 radio 타입의 <input> 태그 목록을 생성한다.

-> items 속성을 이용하여 값으로 사용할 콜렉션을 전달 받는다.

<form:radiobutton> : 커맨드 객체의 특정 프로퍼티와 관련된 radio 타입의 <input> 태그 1개를 생성한다.


path 속성을 이용하여 값을 바인딩할 커맨드 객체의 프로퍼티를 지정한다.

1
2
3
4
5
6
7
8
9
10
<form:label path="program">
    <form:radiobuttons items="${programs}" path="program" />
</form>
            
<!-- HTML 버전 -->           
<input id="program1" name="program" type="radio" value="c#" />
<label for="program1">C#</label>
<input id="program2" name="program" type="radio" value="java" />
<label for="program2">JAVA</label>
cs


# <textarea> 태그를 위한 커스텀 태그

<form:textarea> : 여러 줄을 입력받아야 하는 경우

1
2
3
4
5
6
<form:label path="memo"/>
<form:textarea paht="memo" cols="50" rows="5" />
        
<!-- HTML 버전 -->
<label for="memo">memo</label>
<textarea id="memo" name="memo" cols="50" rows="5"></textarea>
cs


# ERROR 관련 커스텀 태그

Errors 객체, BindingResult 객체를 이용해서 에러 정보를 추가한 경우

<form:errors> 커스텀 태그를 이용해서 에러정보를 출력 할 수 있다.

path 속성을 이용해서 커맨드 객체의 특정 프로퍼티와 관련된 에러 메세지를 출력할 수 있다.

( java - Controller )

1
2
3
4
5
6
public class MemberValidator implements Validator {
    @Override
    public void validate(Object object, Errors errors) {
        ValidationUtils.rejectIfEmptyOrWhiteSpace(errors, "userId""required");
    }
}
cs

( jsp - View )(

1
2
3
4
5
<form:form commandName="memberValidator">
    <form:label path="userId">아이디</form:label>
    <form:input path="userId" />
    <form:errors path="userId" />
</form:form>
cs


<form:errors>는 지정한 프로퍼티와 관련된 한 개 이상의 에러메시지를 출력한다.

각 에러메세지를 생성할 때 두개의 속성을 이용한다.

속성 : element, delimiter

- element는 각 에러메시지를 출력할 떄 사용할 HTML 태그로 기본 값은 <span>

- delimeter는 에러메세지를 구분할 때 사용할 HTML 태그로 기본 값은 <br />

1
<form:errors path="userId" element="div" delimiter=""/>
cs