일반적으로 잘 사용하지 않는 태그 중 LABEL 태그가 있다. 이 LABEL 태그를 잘 활용하면 라디오 버튼, 체크 박스, 입력 상자 등의 폼 컨트롤을 직접 선택하지 않고 텍스트만 눌러도 폼 요소가 선택이 되는 효과를 줄 수가 있다.

먼저 실행 결과부터 살펴 보도록 하자.


라디오 버튼을 직접 선택하지 않고, "예", "아니오" 같은 텍스트를 선택해도 체크박스가 선택됩니다.

LABEL 태그를 사용해 본 적이 있습니까?


체크박스를 직접 선택하지 않고,
"네트웍 프로그래밍" 같은 텍스트를 선택해도 체크 박스가 선택됩니다.

관심분야를 선택하세요!



아래 "주소를 입력하세요"란 텍스트를 클릭하면 입력상자가 선택이 됩니다.




위 실행 결과에 대한 소스는 다음과 같다.



LABEL {
cursor:hand;
color: black;
}

 

라디오 버튼을 직접 선택하지 않고, "예", "아니오" 같은 텍스트를 선택해도 체크 박스가 선택됩니다.

LABEL 태그를 사용해 본 적이 있습니까?


체크박스를 직접 선택하지 않고, "네트웍 프로그래밍" 같은 텍스트를 선택해도 체크 박스가 선택됩니다.

관심분야를 선택하세요!


아래 "주소를 입력하세요"란 텍스트를 클릭하면 입력 상자가 선택이 됩니다.


사용 방법은 간단하다. LABEL 태그의 속성으로 FOR를 사용하여 연결된 폼 컨트롤의 ID를 할당해 주면 된다.