Spring(스프링)에서는 JSP(Java Server Pages)에서 사용할 수 있는 Form Tag Library를 제공하고 있습니다. 이 Form Tag Library를 사용하면 쉽고 편리하게 자동으로 Form에 데이터를 바인딩할 수 있습니다.
Spring Framework JSP Form Tag Library
Form Tag Library는 <form> 태그를 렌더링 하고 Model(모델)과 연동하여 <form> 태그의 내부 태그에 데이터를 바인딩을 해줍니다. (내부 태그는 path를 사용하여 Model(모델)의 데이터에 접근합니다.)
Form Tag Library는 라이브러리이기 때문에 JSP에서 사용하기 위해서 taglib(태그 라이브러리) 지시문을 추가해야 합니다.
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>prefix는 접두사로 원하는 문자열로 변경해도 됩니다.
태그는 taglib 지시문에서 지정한 prefix(접두사)와 taglib에서 구현된 태그의 이름(tagname)으로 구성됩니다.
<prefix:tagname>
여기에서는 개발에 필요한 태그와 속성만 설명할 겁니다. 그래서 Form Tag Library에서 사용되는 태그와 속성에 대한 자세한 설명은 Spring(스프링) 사이트에서 참고하시기 바랍니다.
<form:form>
<form> 태그를 렌더링 합니다.
- modelAttribute : Model(모델)과 연동할 속성 명
- id : <form> 태그의 아이디
- name : <form> 태그의 이름
- action : 전송할 URL (action 속성을 입력하지 않으면 현재 페이지 URL이 적용)
- method : 전송 방식 (method 속성을 입력하지 않으면 POST로 설정)
<form:form modelAttribute="boardSearch" autocomplete="off">
</form:form>autocomplete 속성은 <form> 태그의 내부 태그에서 웹 브라우저의 자동완성 기능을 사용할지 설정할 수 있습니다. 여기에서는 자동완성 기능은 사용하지 않겠습니다.
렌더링 결과
<form id="boardSearch" action="/index.do" method="post" autocomplete="off">
</form>id 속성을 입력하지 않으면 modelAttribute로 설정됩니다.
<form:hidden>
type이 hidden인 <input> 태그를 렌더링 합니다.
- id : <hidden> 태그의 아이디
- path : Model(모델)과 연동하여 데이터를 바인딩할 속성 경로 (바인딩할 데이터가 객체 안에 있으면 .(도트)로 구분)
<form:hidden path="info" />렌더링 결과
<input id="info" name="info" type="hidden" value="">id 속성을 입력하지 않으면 Model(모델)과 연동하여 데이터를 바인딩한 속성 경로가 설정됩니다.
name 속성은 Model(모델)과 연동하여 데이터를 바인딩한 속성 경로가 설정됩니다.
type 속성은 hidden으로 설정됩니다.
value 속성은 Model(모델)과 연동하여 바인딩한 데이터가 설정됩니다.
<form:select>
<select> 태그를 렌더링 합니다.
- id : <select> 태그의 아이디
- path : Model(모델)과 연동하여 데이터를 바인딩할 속성 경로 (바인딩할 데이터가 객체 안에 있으면 .(도트)로 구분)
<form:option>
<option> 태그를 렌더링 합니다.
- value : <option> 태그의 value 속성 값
- label : <option> 태그의 텍스트
<form:select path="searchType">
<form:option value="subject" label="제목" />
<form:option value="subjectandcontent" label="제목+내용" />
</form:select>렌더링 결과
<select id="searchType" name="searchType">
<option value="subject">제목</option>
<option value="subjectandcontent">제목+내용</option>
</select>id 속성을 입력하지 않으면 Model(모델)과 연동하여 데이터를 바인딩한 속성 경로가 설정됩니다.
name 속성은 Model(모델)과 연동하여 데이터를 바인딩한 속성 경로가 설정됩니다.
<form:input>
type이 text인 <input> 태그를 렌더링 합니다.
- id : <input> 태그의 아이디
- path : Model(모델)과 연동하여 데이터를 바인딩할 속성 경로 (바인딩할 데이터가 객체 안에 있으면 .(도트)로 구분)
<form:input path="searchKeyword" placeholder="검색할 키워드를 입력하세요." />placeholder 속성은 <input> 태그의 value 속성이 비어 있을 때 나오는 문자열입니다.
렌더링 결과
<input id="searchKeyword" name="searchKeyword" placeholder="검색할 키워드를 입력하세요." type="text" value="">id 속성을 입력하지 않으면 Model(모델)과 연동하여 데이터를 바인딩한 속성 경로가 설정됩니다.
name 속성은 Model(모델)과 연동하여 데이터를 바인딩한 속성 경로가 설정됩니다.
type 속성은 text로 설정됩니다.
value 속성은 Model(모델)과 연동하여 바인딩한 데이터가 설정됩니다.
Form Tag Library에서 사용되는 태그의 속성 이외 속성들을 추가하면 렌더링 할 때 추가됩니다.
Maven Spring Project의 main.jsp에 Form Tag Library 적용하기
1. /src/main/webappWEB-INF/views/decorators/default/headInclude.jsp 파일을 오픈하여 jQuery를 사용하기 위해 jQuery CDN 주소를 사용하여 <script> 태그를 추가합니다.
- jQuery CDN 주소는 jQuery 사이트(https://releases.jquery.com/)에서 확인할 수 있습니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<style>
html, body {padding:0; margin:0;}
.header {display: block; height: 50px; text-align: center; line-height: 50px; background-color: rebeccapurple; color: white; font-weight: 600;}
.main {display: block; margin: 40px 40px;}
.footer {display: block; height: 50px; text-align: center; line-height: 50px; background-color: #efefef;}
</style>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
2. /src/main/webapp/WEB-INF/views/main/main.jsp 파일을 오픈하여 Form Tag Library를 사용하기 위해 jsp 페이지 상단에 taglib(태그 라이브러리) 지시문을 추가합니다.
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
3. 기존 <form> 태그를 Form Tag Library를 사용하여 변경합니다.
<form action="/index.do" method="post">
<select name="searchType">
<option value="subject" <c:if test="${boardSearch.searchType == 'subject'}">selected="selected"</c:if>>제목</option>
<option value="subjectandcontent" <c:if test="${boardSearch.searchType == 'subjectandcontent'}">selected="selected"</c:if>>제목+내용</option>
</select>
<select name="searchCondition">
<option value="equal" <c:if test="${boardSearch.searchCondition == 'equal'}">selected="selected"</c:if>>일치</option>
<option value="like" <c:if test="${boardSearch.searchCondition == 'like'}">selected="selected"</c:if>>포함</option>
</select>
<input name="searchKeyword" placeholder="검색할 키워드를 입력하세요." type="text" value="${boardSearch.searchKeyword}">
<input type="submit" value="검색">
</form>Form Tag Library를 사용하면 <select> 태그의 <option> 태그의 선택("selected")은 자동으로 처리되기 때문에 JSTL의 if 문 처리가 필요 없습니다.
- <form> 태그를 <form:form> 태그로 변경하고 modelAttribute 속성에 Controller에서 Model(모델)에 추가한 boardSearch 객체를 지정합니다.
- searchType인 <select> 태그를 <form:select> 태그로 변경하고 parh 속성에 boardSearch 객체의 searchType 변수로 지정합니다.
- searchCondition인 <select> 태그를 <form:select> 태그로 변경하고 parh 속성에 boardSearch 객체의 searchCondition 변수로 지정합니다.
- searchKeyword인 <input> 태그를 <form:input> 태그로 변경하고 path 속성에 boardSearch 객체의 searchKeyword 변수로 지정합니다.
- submit 타입의 <input> 태그를 <button> 태그로 변경합니다.
<form:form modelAttribute="boardSearch" autocomplete="off">
<form:select path="searchType">
<form:option value="subject" label="제목" />
<form:option value="subjectandcontent" label="제목+내용" />
</form:select>
<form:select path="searchCondition">
<form:option value="equal" label="일치" />
<form:option value="like" label="포함" />
</form:select>
<form:input path="searchKeyword" placeholder="검색할 키워드를 입력하세요." />
<button id="searchBtn" type="button">검색</button>
</form:form>
4. <style> 태그에 button 태그에 대한 CSS를 추가합니다.
.board form button { display: inline-flex; height: 27px; font-size: 14px; }
5. script를 추가합니다.
- searchBtn 버튼이 연속으로 클릭되는 것을 방지하기 위해 searchBtn 버튼이 클릭할 때 searchBtn 버튼을 비활성화시키고 form를 submit 하게 합니다.
- searchKeyword인 input에서 엔터키가 눌러지면 searchBtn 버튼이 클릭되도록 합니다.
<script type="text/javascript">
$(function() {
var boardSearch = $('#boardSearch’);
$('#searchBtn').click(function() {
$(this).attr("disabled", "disabled");
boardSearch.submit();
});
$('#searchKeyword').keypress(function(event){
if (13 == event.which) {
$('#searchBtn').click();
return false;
}
});
});
</script>
전체 소스입니다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
<style>
.board { width:800px; margin: 20px auto; }
.board table { width:100%; border-top:2px solid #1d4281; border-spacing:0; }
.board table thead th { padding:8px 10px 10px 10px; vertical-align:middle; color:#1d4281; font-size:14px; border-bottom:1px solid #ccc; background:#f8f8f8; }
.board table tbody td { padding:7px 10px 9px 10px; text-align:center; vertical-align:middle; border-bottom:1px solid #ccc; font-size:14px; line-heighT:150%; }
.board table tbody td:nth-child(2) { text-align:left;}
.board form { margin-bottom: 10px; }
.board form select { padding: 4px 4px; }
.board form input[type="text"] { padding: 4px 4px; width: 200px; }
.board form button { display: inline-flex; height: 27px; font-size: 14px; }
</style>
</head>
<body>
<div class="board">
<form:form modelAttribute="boardSearch" autocomplete="off">
<form:select path="searchType">
<form:option value="subject" label="제목" />
<form:option value="subjectandcontent" label="제목+내용" />
</form:select>
<form:select path="searchCondition">
<form:option value="equal" label="일치" />
<form:option value="like" label="포함" />
</form:select>
<form:input path="searchKeyword" placeholder="검색할 키워드를 입력하세요." />
<button id="searchBtn" type="button">검색</button>
</form:form>
<table>
<colgroup>
<col style="width:10%">
<col style="width:*">
<col style="width:15%">
<col style="width:25%">
</colgroup>
<thead>
<tr>
<th scope="col">번호</th>
<th scope="col">제목</th>
<th scope="col">작성자</th>
<th scope="col">작성일</th>
</tr>
</thead>
<tbody>
<c:forEach var="boardItem" items="${boardList}" varStatus="status">
<tr>
<td>${fn:length(boardList) - status.count + 1}</td>
<td>${boardItem.subject}</td>
<td>${boardItem.registrationId}</td>
<td>${boardItem.registrationDateTime}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<script type="text/javascript">
$(function() {
var boardSearch = $('#boardSearch');
$('#searchBtn').click(function() {
$(this).attr("disabled", "disabled");
boardSearch.submit();
});
$('#searchKeyword').keypress(function(event){
if (13 == event.which) {
$('#searchBtn').click();
return false;
}
});
});
</script>
</body>
</html>
Maven Spring Project를 실행하여 웹 브라우저로 확인하기
1. "Servers"탭에서 "Tomcat9"를 선택하고 "start"버튼(start the server)을 클릭하면 Tomcat이 실행됩니다.
2. 웹 브라우저에서 "http://localhost:9000/index.do"를 입력하고 브라우저에서 F12를 눌러 개발도구를 실행시키고 "Elements"를 클릭하면 Form Tag Library가 HTML <form> 태그로 랜더링 되고 바인딩된 데이터로 선택("selected")된 것을 확인할 수 있습니다.
3. 검색 타입은 "제목", 검색 조건은 "포함", 검색 키워드는 "1"를 입력한 후 검색 버튼을 누릅니다. 그러면 전달된 값으로 검색되고 검색 UI도 전달된 값으로 데이터가 유지되는 것을 확인할 수 있습니다.
'Spring > Maven Project' 카테고리의 다른 글
| Spring에 Pagination(페이지네이션) 처리 및 적용 1 (0) | 2022.12.18 |
|---|---|
| Spring에 Paging(페이징) 처리 및 적용 (0) | 2022.12.11 |
| Spring에 Data Binding(바인딩) - @ModelAttribute, Form 데이터 유지 (0) | 2022.11.26 |
| Spring에 Data Binding(바인딩) - @RequestParam, Auto Binding (0) | 2022.11.20 |
| Spring에 Data 전달 - GET, POST, HttpServletRequest getParameter (0) | 2022.11.06 |