기존의 순수 HTML로 이루어져 있던 프로젝트에 타임리프가 제공하는 입력 폼 기능을 적용한다. (재고 등록 및 수정 폼)
해당 프로젝트의 초기 설정은 다음과 같다.
2023.03.10 - [Spring] - 초기 프로젝트 설정 (재고 관리 서비스)
th:object : 커맨드 객체 지정
*{ . . . } : 선택 변수 식, th:object 에서 선택한 객체에 접근
th:field : HTML 태그의 id, name, value 속성을 자동으로 처리
ex) th:field
렌더링 전 - <input type="text" th:field="*{itemName}" />
렌더링 후 - <input type="text" id="itemName" name="itemName" th:value="*{itemName}" />
등록 Form
- th:object 적용을 위해 먼저 해당 오브젝트 정보를 넘겨주어야 함
- 등록 폼이기 때문에 데이터가 비어있는 빈 오브젝트 item을 만들어 뷰에 전달
등록 Controller
@GetMapping("/add")
public String addForm(Model model) {
model.addAttribute("item", new Item());
return "form/addForm";
}
등록 Form.HTML
<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}"
- 위 코드에서 사용한 선택 변수 식 *{item} 은 ${item.itemName} 과 같음 ( th:object 로 item을 선택했기 때문에 선택 변수 식 적용 가능 )
- th:field 는 앞선 설명과 같이 id, name, value 속성을 모두 자동으로 등록
- id : th:field 에서 지정한 변수 이름과 같음 ( id="itemName" )
- name : th:field 에서 지정한 변수 이름과 같음 ( name="itemName" )
- value : th:field 에서 지정한 변수의 값 사용 ( value="" )
'Thymeleaf' 카테고리의 다른 글
| [Thymeleaf] 타임리프 스프링 통합 (0) | 2023.03.10 |
|---|---|
| [Thymeleaf] 템플릿 레이아웃 (0) | 2023.03.09 |
| [Thymeleaf] 템플릿 조각 (0) | 2023.02.01 |
| [Thymeleaf] 자바스크립트 인라인 (0) | 2023.01.31 |
| [Thymeleaf] 블록 (0) | 2023.01.30 |
