html label

<label> 태그는 HTML에서 폼 컨트롤에 레이블을 붙이는 데 사용됩니다. <label> 요소는 사용자 인터페이스에서 사용자가 선택하거나 활성화할 수 있는 폼 관련 요소를 설명하는데 유용합니다. 예를 들어, 체크박스나 라디오 버튼과 같은 입력 필드 옆에 설명 텍스트를 제공하는 경우에 주로 사용됩니다.

<label> 태그의 가장 중요한 기능 중 하나는 연관된 폼 컨트롤을 클릭 가능하게 만드는 것입니다. 즉, <label> 내부의 텍스트를 클릭하면 연관된 폼 컨트롤이 선택되거나 활성화됩니다. 이 기능은 특히 작은 대상(예: 체크박스)을 선택하기 어려운 경우에 유용합니다.

<label>과 폼 컨트롤 사이의 연결은 두 가지 방법으로 설정할 수 있습니다:

1. 암시적 연결: <label> 요소가 해당 입력 필드를 감싸고 있는 경우, 암시적으로 둘이 연결되어 있습니다.

   <label>
     Name:
     <input type="text" name="name">
   </label>

   위 코드에서 "Name:"을 클릭하면 자동으로 텍스트 필드가 활성화됩니다.

2. 명시적 연결: for 속성을 사용하여 <label> 요소와 해당 입력 필드를 명시적으로 연결할 수 있습니다.

   <label for="name">Name:</label>
   <input id="name" type="text" name="name">

   위 코드에서 "Name:"을 클릭하면 id가 "name"인 텍스트 필드가 활성화됩니다.

따라서, <label> 태그 안에 다른 요소들(예: 이미지)이 포함되어 있다면 그것들도 동일한 방식으로 동작합니다. 예를 들어, 이미지가 레이블 내부에 있다면 이미지를 클릭해도 연관된 폼 컨트롤이 선택되거나 활성화됩니다:

<label for="check">
  <img src="/path/to/image.jpg" alt="">
  Click the image to check the box!
</label>
<input id="check" type="checkbox">

위 코드에서 이미지를 클릭하면 체크박스가 선택됩니다.

이런 방식으로 <label> 태그는 사용자 인터페이스의 접근성을 향상시키는 데 중요한 역할을 합니다.