[Thymeleaf] 입력 Form 처리

타임리프가 제공하는 입력 폼 기능들을 알아보자

 

1. th:object

커맨드 객체를 지정한다.

2. *{...} (선택 변수 식)

th:object에서 선택한 객체에 접근한다.

3. th:field

HTML 태그의 id, name, value 속성을 자동으로 처리해준다.

• <input type="text" th:field="*{itemName}" class="form-control"> (렌더링 전)
• <input type="text" id="itemName" name="itemName" th:value="*(itemName)" class="form-control"> (렌더링 후)

 

Example

• th:object를 적용하려면 먼저 해당 오브젝트 정보를 넘겨주어야 한다.
• 등록 폼이기 때문에 Controller에서 데이터가 비어있는 빈 오브젝트를 만들어서 View로 전달한다. 

//Controller
model.addAttribute("items", items);

<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="form-control">
    </div>
    <div>
        <label for="price">가격</label>
        <input type="text" id="price" th:field="*{price}" class="form-control">
    </div>
    <div>
        <label for="quantity">수량</label>
        <input type="text" id="quantity" th:field="*{quantity}" class="form-control">
    </div>
</form>

• th:obejct="${item}"
  • <form> 태그에서 사용할 객체를 지정한다.
  • <form> 태그 안에서 선택 변수 식 *{...}을 적용할 수 있다.
• th:field="*{itemName}"
  • *{itemName}은 선택 변수 식을 사용하였다.
    • *{itemName} == ${item.itemName} 결과가 같다.
    • th:object로 item을 선택했기 때문에 선택 변수 식을 적용할 수 있다.
  • th:field는 id, name, value 속성을 모두 자동으로 만들어준다.
    • id : th:field에서 지정한 변수 이름과 같다. id="itemName"
    • name : th:field에서 지정한 변수 이름과 같다. name="itemName"
    • value : th:field에서 지정한 변수의 값을 사용한다. value=""
• 렌더링 전

<input type="text" th:field="*{itemName}" class="form-control">

• 렌더링 후

<input type="text" id="itemName" name="itemName" value="" class="form-control">

• Controller에서 빈 item 객체를 넘겨주었기 때문에 value 값은 비워져 있다.