입력 폼 처리

th:object : 커맨드 객체를 지정한다. *{...} : 선택 변수 식이라고 한다. th:object 에서 선택한 객체에 접근한다. th:field HTML 태그의 id , name , value 속성을 자동으로 처리해준다.

렌더링 전

• <input type="text" th:field="{itemName}" />

렌더링 후

• <input type="text" id="itemName" name="itemName" th:value="{itemName}" />

<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>

• th:object="${item}" : <form> 에서 사용할 객체를 지정한다. 선택 변수 식( {...} )을 적용할 수 있다.
• th:field="{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=""