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

웹 & 안드로이드/HTML5|2014. 6. 9. 21:41

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

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

라디오 버튼을 직접 선택하지 않고, "예", "아니오" 같은 텍스트를 선택해도 체크 박스가 선택됩 니다.
LABEL 태그를 사용해 본 적이 있습니까?


 

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

 

 

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

 

 

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

<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를 할당해 주면 된다.

 

댓글()