라디오버튼, 체크박스를 좀더 편리하게 클릭하게 해주는 label 태그

※ 내용 업데이트와 홈페이지 관리 다시 시작하겠습니다. ^^;

라디오 버튼이나 체크박스를 클릭할때
해당 버튼을 클릭하지 않고 버튼옆에 텍스트를 클릭해도
그 버튼이 선택되도록 하는 태그입니다.
스크립트를 쓰지 않고 태그로 간단하게 사용이 가능합니다.

일반 사용예 : <input type="checkbox" name="chk1">체크박스1
label 사용예 : <label for="chk2"><input type="checkbox" id="chk2" name="chk2">체크박스2</label>

해당 input 태그에 사용할 id 를 정해주고
위 처럼 라벨 태그의 for="해당id" 해주시면 됩니다.

예제

일반적인 사용

체크박스1
라디오1 라디오2

해당 버튼만 클릭해야 선택이 됨

label 태그 사용

체크박스2
라디오3 라디오4

버튼을 클릭해도 되지만 버튼옆에 텍스트를 클릭해도 됨

소스

일반적인 사용<br><br>
<input type="checkbox" name="chk1">체크박스1<br>
<input type="radio" name="r1" checked>라디오1
<input type="radio" name="r1">라디오2<br><br>
해당 버튼만 클릭해야 선택이 됨<br><br><br>

label 태그 사용<br><br>
<label for="chk2"><input type="checkbox" id="chk2" name="chk2">체크박스2</label><br>
<label for="r2_1"><input type="radio" id="r2_1" name="r2" checked>라디오3</label>
<label for="r2_2"><input type="radio" id="r2_2" name="r2">라디오4</label><br><br>
버튼을 클릭해도 되지만 버튼옆에 텍스트를 클릭해도 됨

일반적인 사용<br><br>
<input type="checkbox" name="chk1">체크박스1<br>
<input type="radio" name="r1" checked>라디오1
<input type="radio" name="r1">라디오2<br><br>
해당 버튼만 클릭해야 선택이 됨<br><br><br>

label 태그 사용<br><br>
<label for="chk2"><input type="checkbox" id="chk2" name="chk2">체크박스2</label><br>
<label for="r2_1"><input type="radio" id="r2_1" name="r2" checked>라디오3</label>
<label for="r2_2"><input type="radio" id="r2_2" name="r2">라디오4</label><br><br>
버튼을 클릭해도 되지만 버튼옆에 텍스트를 클릭해도 됨

☞ 달팽이홈2

등록일 : 2008-07-06