LABEL 태그를 이용하여 폼 컨트롤 다루기

LABEL 태그를 이용하여 폼 컨트롤 다루기

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

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

라디오 버튼을 직접 선택하지 않고, "예", "아니오" 같은 텍스트를 선택해도 체크박스가 선택됩니다. LABEL 태그를 사용해 본 적이 있습니까? 예 아니오 체크박스를 직접 선택하지 않고, "네트웍 프로그래밍" 같은 텍스트를 선택해도 체크 박스가 선택됩니다. 관심분야를 선택하세요! 네트웍 프로그래밍 웹 프로그래밍 CS 프로그래밍l 아래 "주소를 입력하세요"란 텍스트를 클릭하면 입력상자가 선택이 됩니다. 주소를 입력하세요! 위 실행 결과에 대한 소스는 다음과 같다. LABEL { cursor:hand; color: black; }   라디오 버튼을 직접 선택하지 않고, "예", "아니오" 같은 텍스트를 선택해도 체크 박스가 선택됩니다. LABEL 태그를 사용해 본 적이 있습니까? 예 아니오 체크박스를 직접 선택하지 않고, "네트웍 프로그래밍" 같은 텍스트를 선택해도 체크 박스가 선택됩니다. 관심분야를 선택하세요! 네트웍 프로그래밍 <LABEL FOR="int2" TITLE="관심분야 : 웹 프로그래밍">웹 프로그래밍 <LABEL FOR="int3" TITLE="관심분야 : CS 프로그래밍">CS 프로그래밍 아래 "주소를 입력하세요"란 텍스트를 클릭하면 입력 상자가 선택이 됩니다. 주소를 입력하세요! 사용 방법은 간단하다. LABEL 태그의 속성으로 FOR를 사용하여 연결된 폼 컨트롤의 ID를 할당해 주면 된다.