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

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

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

라디오 버튼을 직접 선택하지 않고, "예", "아니오" 같은 텍스트를 선택해도 체크 박스가 선택됩 니다. LABEL 태그를 사용해 본 적이 있습니까? 예 아니오   체크박스를 직접 선택하지 않고, "네트웍 프로그래밍" 같은 텍스트를 선택해도 체크 박스가 선 택됩니다. 관심분야를 선택하세요! 네트웍 프로그래밍 웹 프로그래밍 CS 프로그래밍l     아래 "주소를 입력하세요"란 텍스트를 클릭하면 입력 상자가 선택이 됩니다. 주소를 입력하세요!

 

 

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

<STYLE> LABEL { cursor:hand; color: black; } </STYLE>   <p>라디오 버튼을 직접 선택하지 않고, "예", "아니오" 같은 텍스트를 선택해도 체크 박스가 선택됩니다.<br> <b>LABEL 태그를 사용해 본 적이 있습니까?</b> <FORM> <INPUT TYPE=radio ID=FirstButton NAME=radio1> <LABEL FOR=FirstButton TITLE="있으면 예를 선택하세요!">예</LABEL> <BR> <INPUT TYPE=radio ID=SecondButton NAME=radio1> <LABEL FOR=SecondButton TITLE="없으면 아니오를 선택하세요">아니오</LABEL> </p> <p>체크박스를 직접 선택하지 않고, "네트웍 프로그래밍" 같은 텍스트를 선택해도 체크 박스가 선택됩니다.<br> <b>관심분야를 선택하세요!</b><br> <INPUT TYPE="checkbox" NAME="INT" ID="int1"> <LABEL FOR="int1" TITLE="관심분야 : 네트웍 프로그래밍">네트웍 프로그래밍</LABEL> <INPUT TYPE="checkbox" NAME="INT" ID="int2"> <LABEL FOR="int2" TITLE="관심분야 : 웹 프로그래밍">웹 프로그래밍</LABEL> <INPUT TYPE="checkbox" NAME="INT" ID="int3"> <LABEL FOR="int3" TITLE="관심분야 : CS 프로그래밍">CS 프로그래밍</LABEL></p> <p>아래 "주소를 입력하세요"란 텍스트를 클릭하면 입력 상자가 선택이 됩니다.<br> <b><LABEL FOR="addr" TITLE="당신의 주소를 입력하세요!">주소를 입력하세요!</LABEL></b><br> <INPUT TYPE="text" NAME="ADDR" ID="addr"> </p> </FORM>

 

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

[출처] LABEL 태그를 이용하여 폼 컨트롤 다루기 |작성자 똥비