HTML label 태그로 폼 컨트롤에 레이블 추가하기

HTML의 <label> 태그는 텍스트 입력창, 텍스트 영역(textarea) 등 다양한 폼 컨트롤에 레이블을 추가할 때 사용합니다. 레이블을 사용하면 사용자가 어떤 항목을 입력해야 하는지 명확하게 알 수 있으며, 접근성 측면에서도 매우 중요한 역할을 합니다.

label 태그의 주요 속성

HTML <label> 태그는 아래와 같은 추가 속성을 지원합니다.

속성	값	설명
form	form_id	레이블이 속한 하나 이상의 폼을 지정합니다.
for	컨트롤 id	연결할 입력 컨트롤의 "id" 속성 값과 동일한 값을 지정해야 합니다.

사용 예제

다음 코드를 실행하면 HTML에서 레이블을 추가하는 방법을 직접 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>HTML label Tag</title>
   </head>
   <body>
      <label for = "email">EMAIL-ID:<br />
      <input type = "email" value = "" name = "emailid"
      size = "30" placeholder = "Enter a valid email address">
      <br />
      <br />

      <label for = "phone">PHONE NO:<br />
      <input type = "text" value = "" name = "phno"
      size = "30" maxlength = "10" placeholder = "Enter a valid phone number"
      pattern = "[0-9]{10}">
      <br />
      <br />
   </body>
</html>

정리

<label> 태그의 for 속성 값은 반드시 해당 입력 요소의 id 값과 일치해야 합니다. 이렇게 연결된 레이블은 클릭 시 해당 입력창으로 포커스가 이동하며, 스크린 리더 사용자에게도 어떤 정보를 입력해야 하는지 정확히 전달해 줍니다. 폼을 만들 때는 항상 레이블을 함께 사용하는 것이 좋은 웹 개발 습관입니다.