Spring MVC 에서 제공하는 폼 태그

참고도서

초보 웹 개발자를 위한 스프링4 프로그래밍 입문 국내도서 저자 : 최범균 출판 : 가메출판사 2015.03.02 상세보기

1. <form:form>

스프링 MVC 폼 태그 사용을 위한 라이브러리 설정 
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
 
<form:form> => <form> 태그 생성
 
<form:form>
...
</form:form>

html ==>

<form id="command" action="현재 요청 URI" method="post">
...
</form>
 
id 의 속성값 - 커맨드 객체의 이름, 기본값은 "command"
action 속성값 - 기본값은 현재 요청 URI     
method 속성값 - 기본값은 "post"
 
============================================================================
@RequestMapping 어노테이션의 method 를 GET, POST 로 나눠서 action 처리
 
loginForm.jsp (로그인 입력 화면) 요청 처리는 
@RequestMapping(value="/login", method=RequestMethod.GET)
 
loginSubmitted.jsp (로그인 성공시 출력 화면) 요청 처리는 
@RequestMapping(value="/login", method=RequestMethod.POST)
 
=> action 을 생략할 수 있다
loginForm.jsp 를 요청할 때는 "/login" GET 방식으로 요청하고, 
loginSubmitted.jsp 를 요청할 때는 loginForm.jsp 에서 POST 방식으로 요청 
action 을 생략하면 현재 요청 URI 가 설정 되기 때문에, loginForm.jsp 에서 요청을 POST로 제출하면 된다
====================================================================================================  
 
<form:form commandName="loginCommand">
...
</form:form>
 
commandName 속성값 - 커맨드 객체 이름 설정
 
그 외 속성(html 과 동일)
enctype, action, method
 

2. <from:input>, <form:password>, <form:hidden>

@Controller
public class Controller{
 
    @RequestMapping(value="/join", method=RequestMethod.GET)
    public String joinForm(User user){
        return "joinForm";        
    }
 
    @RequestMapping(value="/join", method=RequestMethod.POST)
    public String joinSuccess(User user){
        // int joinSuccess 가 1이면 가입 성공, 0이면 가입 실패라고 가정
        if(joinSuccess == 1){
            // 가입 성공하면 joinSuccess.jsp 호출
            return "joinSuccess";
        }
        else if(joinSuccess == 0){
            // 가입 실패하면 다시 joinForm.jsp 로 돌아감
            return "joinFrom";
        }
    }
}
 
==============================================================================
 
//커맨드 객체
public class User{
    
    private String name;
    private String password;
    private int idNo;
}
 
==============================================================================
 
<form:input> => <input type="text"> 태그 생성
<form:password> => <input type="password"> 태그 생성
<form:hidden> => <input type="hidden"> 태그 생성
 
속성 
path - 바인딩 되는 커맨드 객체의 프로퍼티 지정
 
<!-- "/join" GET 방식으로 요청 -->
<!-- joinForm.jsp -->
<form:form commandName="user">
    이름 <form:input path="name"/>
    비밀번호 <form:password path="password"/>
    <form:hidden path="idNo"/>
    <input type="submit" value="가입"/>
</form:form>
 
html =>
 
<form id="user" action="join" method="post">
    이름 <input id="name" name="name" type="text" value="${user.name}"/>
    비밀번호 <input id="password" name="password" type="password" value=""/>
    <input id="idNo" name="idNo" type="hidden" value=""/>
    <input type="submit" value="가입"/>
</form>
    
=================================================================================
 
이름 냥냥, 비밀번호 catcat 을 입력하고 submit
 
=> 성공
<!-- joinSuccess.jsp -->
이름 ${user.name}
비밀번호 ${user.password}
 
이름 냥냥 비밀번호 catcat 이 화면에 출력 됨
 
=> 실패
<!-- joinForm.jsp -->
이름 입력폼에 냥냥, 비밀번호 입력폼은 빈 채로 화면에 출력 됨
 
즉, 제출할 때 커맨드 객체에 담은 값이 다시 넘어와서 출력된다

3. <form:select>, <form:options>, <form:option>

@Controller
public class Controller{
 
    @RequestMapping(value="/join", method=RequestMethod.GET)
    public String joinForm(User user){
        List<String> loginTypes = new ArrayList<String>();
        loginTypes.add("일반회원");
        loginTypes.add("기업회원");
        user.setLoginTypes(loginTypes);
        return "joinForm";        
    }
 
    @RequestMapping(value="/join", method=RequestMethod.POST)
    public String joinSuccess(User user){
        // int joinSuccess 가 1이면 가입 성공, 0이면 가입 실패라고 가정
        if(joinSuccess == 1){
            // 가입 성공하면 joinSuccess.jsp 호출
            return "joinSuccess";
        }
        else if(joinSuccess == 0){
            // 가입 실패하면 다시 joinForm.jsp 로 돌아감
            return "joinFrom";
        }
    }
}
 
==============================================================================
 
//커맨드 객체
public class User{
    
    private String loginType;    
    private List<String> loginTypes;
    ... setter, getter
}
 
==============================================================================
 
<form:select> => <select>, <option> 태그 생성
 
Path - 바인딩 되는 커맨드 객체의 프로퍼티 지정
itmes - <option> 태그를 생성할 때 사용될 컬렉션 객체
 
<!-- "/join" GET 방식으로 요청 -->
<!-- joinForm.jsp -->
<form:form commandName="user">
    <form:select path="loginType" items="${user.loginTypes}"/>
    <input type="submit" value="가입"/>
</form:form>
 
html =>
 
<form id="user" action="join" method="post">
    <select id="loginType" name="loginType">
        <option value="일반회원">일반회원</option>
        <option value="기업회원">기업회원</option>
    </select>
    <input type="submit" value="가입"/>
</form>
    
=================================================================================
 
일반회원 을 선택하고 제출
 
=> 성공
<!-- joinSuccess.jsp -->
${user.loginType}
 
일반회원 이 화면에 출력 됨
 
=> 실패, 커맨드 객체의 프로퍼티 값과 일치하는 값을 갖는 <option>을 자동 선택
<!-- joinForm.jsp -->
<form id="user" action="join" method="post">
    <select id="loginType" name="loginType">
        <option value="일반회원" selected="selected">일반회원</option>
        <option value="기업회원">기업회원</option>
    </select>
    <input type="submit" value="가입"/>
</form>
 
====================================================================================
 
<form:options> 태그를 사용해도 동일한 작업 수행
 
<form:form commandName="user">
    <form:select path="loginType" items="${user.loginTypes}">
    <input type="submit" value="가입"/>
</form:form>
 
==>
 
<form:form commandName="user">
    <form:select path="loginType">
        <form:options  items="${user.loginTypes}"/>
    </form:select>
    <input type="submit" value="가입"/>
</form:form>
 
=====================================================================================
 
<form:option> => <option> 태그를 직접 지정
 
<form:form commandName="user">
    <form:select path="loginType">
        <form:option value="일반회원"/>
        <form:option value="기업회원">기업</form:option>
        <form:option value="헤드헌터회원" label="헤드헌터"/>
    </form:select>
    <input type="submit" value="가입"/>
</form:form>
 
html =>
 
<form id="user" action="join" method="post">
    <select id="loginType" name="loginType">
        <option value="일반회원">일반회원</option>
        <option value="기업회원">기업</option>
        <option value="헤드헌터회원">헤드헌터</option>
    </select>
    <input type="submit" value="가입"/>
</form>
 
======================================================================================
 
<option> 태그를 생성하는 컬렉션 객체가 String 이 아니라 클래스의 객체인 경우
 
 
@Controller
public class Controller{
    @RequestMapping(value="/join", method=RequestMethod.GET)
    public String joinForm(User user){
        List<Code> jobCodes = new ArrayList<Code>();
        Code code = new Code();
        code.setCode("냥냥");
        code.setLabel("집사");    
        jobCodes.add(code);        
        user.setJobCodes(jobCodes);
        return "joinForm";        
    }
    @RequestMapping(value="/join", method=RequestMethod.POST)
    public String joinSuccess(User user){
        // int joinSuccess 가 1이면 가입 성공, 0이면 가입 실패라고 가정
        if(joinSuccess == 1){
            // 가입 성공하면 joinSuccess.jsp 호출
            return "joinSuccess";
        }
        else if(joinSuccess == 0){
            // 가입 실패하면 다시 joinForm.jsp 로 돌아감
            return "joinFrom";
        }
    }
}
==============================================================================
 
//커맨드 객체
public class User{
    
    private String jobCode;    
    private List<Code> jobCodes;
    ... setter, getter
}
 
// <option> 태그를 생성하는 클래스
public class Code{
 
    private String code;
    private String label;
    ... setter, getter
}
 
==============================================================================
 
itemLabel 속성값 - <option> 태그의 텍스트
itemValue 속성값 - <option> 태그의 value 속성값
 
<form:form commandName="user">
    <form:select path="jobCode" items="${user.jobCodes}" itemLabel="label" itemValue="code"/>
    <input type="submit" value="가입"/>
</form:form>
 
또는
 
<form:form commandName="user">
    <form:select path="jobCode">
        <form:options items="${user.jobCodes}" itemLabel="label" itemValue="code"/>
    </form:select>
    <input type="submit" value="가입"/>
</form:form>
 
html =>
 
<form id="user" action="join" method="post">
    <select id="jobCode" name="jobCode">
        <option value="냥냥">집사</option>        
    </select>
    <input type="submit" value="가입"/>
</form>

4. <form:checkboxes>, <form:checkbox>

@Controller
public class Controller{
 
    @RequestMapping(value="/join", method=RequestMethod.GET)
    public String joinForm(User user){
        List<String> loginTypeNames = new ArrayList<String>();
        loginTypeNames.add("일반회원");
        loginTypeNames.add("기업회원");
        user.setLoginTypeNames(loginTypeNames);
        return "joinForm";        
    }
 
    @RequestMapping(value="/join", method=RequestMethod.POST)
    public String joinSuccess(User user){
        // int joinSuccess 가 1이면 가입 성공, 0이면 가입 실패라고 가정
        if(joinSuccess == 1){
            // 가입 성공하면 joinSuccess.jsp 호출
            return "joinSuccess";
        }
        else if(joinSuccess == 0){
            // 가입 실패하면 다시 joinForm.jsp 로 돌아감
            return "joinFrom";
        }
    }
}
 
==============================================================================
 
//커맨드 객체
public class User{
    
    private List<String> loginTypes;    
    private List<String> loginTypeNames;
    ... setter, getter
}
 
==============================================================================
 
<form:checkboxes> => <input type="checkbox"> 태그 생성
 
Path - 바인딩 되는 커맨드 객체의 프로퍼티 지정
itmes - <input type="checkbox"> 태그를 생성할 때 사용될 컬렉션 객체
 
<!-- "/join" GET 방식으로 요청 -->
<!-- joinForm.jsp -->
<form:form commandName="user">
    <form:checkboxes path="loginTypes" items="${user.loginTypeNames}"/>
    <input type="submit" value="가입"/>
</form:form>
 
html =>
 
<form id="user" action="join" method="post">
    <input id="loginTypes1" name="loginTypes" type="chechbox" value="일반회원">일반회원</input>
    <input id="loginTypes2" name="loginTypes" type="chechbox" value="기업회원">기업회원</input>
    <input type="submit" value="가입"/>
</form>
    
=================================================================================
 
일반회원, 기업회원 을 선택하고 제출
 
=> 성공
<!-- joinSuccess.jsp -->
<c:foreach var="loginType" items="${user.loginTypes}">
    ${loginType}
</c:foreach>
 
일반회원 기업회원 이 화면에 출력 됨
 
=> 실패, 커맨드 객체의 프로퍼티 값과 일치하는 값을 갖는 <input type="checkbox">을 자동 선택
<!-- joinForm.jsp -->
<form id="user" action="join" method="post">
    <input id="loginTypes1" name="loginTypes" checked="checked" type="chechbox" value="일반회원">일반회원</input>    
    <input id="loginTypes2" name="loginTypes" checked="checked" type="chechbox" value="기업회원">기업회원</input>    
    <input type="submit" value="가입"/>
</form>
 
====================================================================================
 
<form:checkbox> => <input type="checkbox"> 태그를 직접 지정
 
<form:form commandName="user">
    <form:checkbox path="loginTypes" value="일반" label="일반회원"/>
    <form:checkbox path="loginTypes" value="기업" label="기업회원"/>
    <input type="submit" value="가입"/>
</form:form>
 
html =>
 
<form id="user" action="join" method="post">
    <input id="loginTypes1" name="loginTypes" type="chechbox" value="일반">일반회원</input>    
    <input id="loginTypes2" name="loginTypes" type="chechbox" value="기업">기업회원</input>    
    <input type="submit" value="가입"/>
</form>
 
======================================================================================
 
<input type="checkbox"> 태그를 생성하는 컬렉션 객체가 String 이 아니라 클래스의 객체인 경우
 
<form:form commandName="user">
    <form:checkboxes path="jobCode" items="${user.jobCodes}" itemLabel="label" itemValue="code"/>
    <input type="submit" value="가입"/>
</form:form>

5. <form:radiobuttons>, <form:radiobutton>

@Controller
public class Controller{
 
    @RequestMapping(value="/join", method=RequestMethod.GET)
    public String joinForm(User user){
        List<String> loginTypes = new ArrayList<String>();
        loginTypes.add("일반회원");
        loginTypes.add("기업회원");
        user.setLoginTypeNames(loginTypes);
        return "joinForm";        
    }
 
    @RequestMapping(value="/join", method=RequestMethod.POST)
    public String joinSuccess(User user){
        // int joinSuccess 가 1이면 가입 성공, 0이면 가입 실패라고 가정
        if(joinSuccess == 1){
            // 가입 성공하면 joinSuccess.jsp 호출
            return "joinSuccess";
        }
        else if(joinSuccess == 0){
            // 가입 실패하면 다시 joinForm.jsp 로 돌아감
            return "joinFrom";
        }
    }
}
 
==============================================================================
 
//커맨드 객체
public class User{
    
    private String loginType;    
    private List<String> loginTypes;
    ... setter, getter
}
 
==============================================================================
 
<form:radiobuttons> => <input type="radiobutton"> 태그 생성
 
Path - 바인딩 되는 커맨드 객체의 프로퍼티 지정
itmes - <input type="radiobutton"> 태그를 생성할 때 사용될 컬렉션 객체
 
<!-- "/join" GET 방식으로 요청 -->
<!-- joinForm.jsp -->
<form:form commandName="user">
    <form:radiobuttons path="loginType" items="${user.loginTypes}"/>
    <input type="submit" value="가입"/>
</form:form>
 
html =>
 
<form id="user" action="join" method="post">
    <input id="loginType1" name="loginType" type="radiobox" value="일반회원">일반회원</input>
    <input id="loginType2" name="loginType" type="radiobox" value="기업회원">기업회원</input>
    <input type="submit" value="가입"/>
</form>
    
=================================================================================
 
일반회원 을 선택하고 제출
 
=> 성공
<!-- joinSuccess.jsp -->
${user.loginType}
 
일반회원 이 화면에 출력 됨
 
=> 실패, 커맨드 객체의 프로퍼티 값과 일치하는 값을 갖는 <input type="radiobox">을 자동 선택
<!-- joinForm.jsp -->
<form id="user" action="join" method="post">
    <input id="loginType1" name="loginType" checked="checked" type="radiobox" value="일반회원">일반회원</input>
    <input id="loginType2" name="loginType" type="radiobox" value="기업회원">기업회원</input>    
    <input type="submit" value="가입"/>
</form>
 
====================================================================================
 
<form:radiobox> => <input type="radiokbox"> 태그를 직접 지정
 
<form:form commandName="user">
    <form:radio path="loginType" value="일반" label="일반회원"/>
    <form:radio path="loginType" value="기업" label="기업회원"/>
    <input type="submit" value="가입"/>
</form:form>
 
html =>
 
<form id="user" action="join" method="post">
    <input id="loginType1" name="loginType" type="chechbox" value="일반">일반회원</input>    
    <input id="loginType2" name="loginType" type="chechbox" value="기업">기업회원</input>    
    <input type="submit" value="가입"/>
</form>
 
======================================================================================
 
<input type="radiobox"> 태그를 생성하는 컬렉션 객체가 String 이 아니라 클래스의 객체인 경우
 
<form:form commandName="user">
    <form:radioboxes path="jobCode" items="${user.jobCodes}" itemLabel="label" itemValue="code"/>
    <input type="submit" value="가입"/>
</form:form>

6. <form:textarea>, CSS 및 HTML 태그와 관련된 공통 속성

<form:textarea> => <textarea> 태그 생성
 
<label for="etc">기타</label>
<form:textarea path="etc" cols="20" rows="3"/>
 
html =>
 
<label for="etc">기타</label>
<textarea id="etc" name="etc" cols="20" rows="3"/>
 
==============================================================
 
CSS 및 HTML 태그와 관련된 공통 속성
 
cssClass - HTML 의 class 속성값
cssErrorClass - 폼 검증 에러가 발생했을 때 사용할 HTML 의 class 속성값
cssStyle - HTML 의 style 속성값
 
==============================================================
 
HTML 태그가 사용하는 속성을 그대로 사용하는 속성
 
id, title, dir
disable, tabidex
onfocus, onblur, onchange
onclick, ondblclick
onkeydown, onkeypress, onkeyup
onmousedown, onmousemove, onmouseup
onmouseout, onmouseover
... 등