HTML에서 <label> 요소의 for 속성을 사용하면 해당 라벨이 어떤 폼 요소(입력 컨트롤)에 바인딩되는지 지정할 수 있습니다. for 속성의 값은 반드시 연결하려는 폼 요소의 id 값과 일치해야 합니다.
for 속성의 역할
라벨과 폼 요소가 올바르게 연결되면 다음과 같은 장점이 있습니다.
- 사용자가 라벨 텍스트를 클릭해도 해당 입력 요소(라디오 버튼, 체크박스 등)가 활성화됩니다.
- 클릭 영역이 넓어져 모바일 환경에서도 조작이 쉬워집니다.
- 스크린 리더 등 보조 기술이 라벨과 입력 필드의 관계를 인식할 수 있어 웹 접근성이 크게 향상됩니다.
예제
다음 코드를 실행하면 for 속성의 동작을 직접 확인할 수 있습니다. 각 라벨의 for 값이 라디오 버튼의 id 값과 일치하는 것에 주목하세요.
<!DOCTYPE html> <html> <body> <p>학력:</p> <form action=""> <label for = "graduate">대학원생</label> <input type = "radio" name = "education" id = "graduate" value = "graduate"><br> <label for = "ugraduate">학부생</label> <input type = "radio" name = "education" id = "ugraduate" value = "ugraduate"><br> <input type = "submit" value = "제출"> </form> </body> </html>
코드 설명
<label for="graduate">는id="graduate"인 라디오 버튼과 연결됩니다.<label for="ugraduate">는id="ugraduate"인 라디오 버튼과 연결됩니다.- 두 라디오 버튼은
name="education"으로 그룹화되어 있으므로, 하나를 선택하면 다른 하나는 자동으로 해제됩니다.
실행 결과, '대학원생' 또는 '학부생'이라는 텍스트를 클릭하더라도 해당 라디오 버튼이 선택되는 것을 확인할 수 있습니다. 이처럼 for 속성을 활용하면 폼의 사용성과 접근성을 동시에 개선할 수 있습니다.