<label for=""> 과 name 속성(Feat. HTML)

<form action="item.html" th:action th:object="${item}" method="post">
    <div>
        <label for="itemName">상품명</label>
        <input type="text" id="itemName" name="itemName" th:field="*{itemName}"
        class="form-control" placeholder="이름을 입력하세요">
    </div>

 

for 속성의 역할

for="itemName"의 역할은 <label> 태그와 <input> 태그를 연결하는 것입니다.

for 속성의 값은 연결하고자 하는 <input> 태그의 id 속성과 동일해야 합니다.

이렇게 하면 사용자가 <label>을 클릭했을 때, 해당하는 <input> 요소로 포커스가 자동으로 이동합니다.

이는 사용자 경험을 향상시키고 접근성을 높이는 데 중요한 역할을 합니다.

위 코드에서는:

• <label> 태그의 for="itemName"은 <input> 태그의 id="itemName"와 연결됩니다.
• 결과적으로, "상품명" 레이블을 클릭하면 "이름을 입력하세요"라는 입력 필드에 포커스가 이동합니다.

이 기능은 특히 키보드나 화면 읽기 프로그램을 사용하는 사용자들에게 유용합니다.

 

name 속성의 역할

name="itemName"의 역할은 FORM 데이터를 서버로 전송할 때 해당 입력 필드의 값을 식별하기 위한 키로 사용됩니다.

구체적인 역할:

1. 폼 데이터 전송 시 키 역할:
   • 사용자가 입력한 데이터가 서버로 전송될 때, name 속성의 값이 키(key)가 됩니다.
   • 예를 들어, 사용자가 itemName 필드에 "Apple"을 입력하고 폼을 제출하면 서버로 전송되는 데이터는 itemName=Apple 형태가 됩니다.
2. 서버와의 매핑:
   • 서버에서 name 속성을 통해 전송된 데이터를 처리합니다.
   • Spring MVC와 같은 프레임워크에서는 @RequestParam이나 @ModelAttribute(HttpMessageConvert가 사용됨)를 통해 해당 데이터를 쉽게 바인딩할 수 있습니다.
3. 백엔드 데이터 모델과 매핑:
   • 코드에서 th:field="*{itemName}"를 사용하는 경우, name="itemName"은 Thymeleaf가 백엔드 객체와 필드를 연결하는 데 사용됩니다.
   • 예를 들어, Thymeleaf가 사용하는 객체가 Item이고, 이 객체에 itemName이라는 필드가 있다면, name="itemName"은 이를 참조합니다.

요약:

name="itemName"은 HTML 폼에서 데이터를 서버로 전송할 때 식별자 역할을 하며, 서버에서 데이터를 수신하고 처리하는 데 사용됩니다.