[Thymeleaf] 입력 폼 처리

오늘은 내가 개발 공부를 하면서 가장 많이 사용했던 입력 폼 처리에 대해서 공부를 할 것이다.

 

목차

• 입력 폼 처리란
• 입력 폼 적용

 

---

입력 폼 처리란?

웹 개발공부를 하면서 Form 형태로 data를 주고받는 경우를 자주 볼 수 있다. Thymeleaf는 해당 폼 데이터를 주고받을 때, 많은 도움을 준다.

 

---

입력 폼 적용

다음의 코드를 보자.

<form action="item.html" th:action th:object="${item}" method="post">

 <div>
 <label for="itemName">상품명</label>
 <input type="text" id="itemName" th:field="*{itemName}" class="formcontrol" placeholder="이름을 입력하세요">
 </div>
 
 <div>
 <label for="price">가격</label>
 <input type="text" id="price" th:field="*{price}" class="form-control"
placeholder="가격을 입력하세요">
 </div>
 
 <div>
 <label for="quantity">수량</label>
 <input type="text" id="quantity" th:field="*{quantity}" class="formcontrol" placeholder="수량을 입력하세요">
 </div>
 
 </form>

위 코드를 보면 1개의 폼을 볼 수 있다.

 

태그를 1개씩 살펴보자.

 

• th:object : 객체를 지정한다.
• *{~} : th:object에서 지정한 객체에 접근한다. *{itemName}이라고 하면 item.itemName이다.
• th:field : HTML 태그의 id, name, value 속성을 자동 처리해준다. <input type="text" th:field="*{itemName}" />는 다음과 같이 렌더링 된다. <input type="text" id="itemName" name="itemName" th:value="*{itemName} />

※ 위의 object에서 객체를 지정하기 위해서는 먼저 오브젝트에 대한 정보를 넘겨주어야 한다. 그래서 Controller에서 "model.addAttribute("item", new Item())"을 해주어 오브젝트를 model에 담아주어야 한다.

 

※ *{itemName} = ${item.itemName} -> th:object로 객체를 지정했기 때문에 사용 가능