웹모아 
웹모아  로그인  회원가입   
웹모아
 
버턴관련테그
  


  label 태그
  등록: 2009-02-15 12:57:37 조회:8687


label 이라는 매우 편리한 태그가 존재함에도 불구하고 아직도 많은 사람들은 라디오 버튼이나 체크박스를 찍을때 박스를 정확히 찍도록 만들며, 혹은 스크립트 삽질로 같은 기능을 구현하는 경우가 있다.
<br><br>
label 태그를 써보자.
각각의 input 들은 label이라고 하는 태그를 통해서 접근할 수도 있다. label 태그를 이용하면 사용자는 label 안의 내용을 클릭해도 input 을 클릭한 효과를 얻을 수 있다(실제로 onclick 이벤트도 발생한다).
<br><br>
간단한 예제를 보자.
<br>
<input type="radio" value="1" name="ex">IE에서는 지원안되는 예제<br>
<input type="radio" value="2" name="ex" id="radio1">IE, FF 둘 다 지원하는 예제<br>
<input type="radio" value="3" name="ex">라벨이 없는 경우<br>
<br>
<label><input type="radio" value="1" name="ex" />IE에서는 지원안되는 예제</label><br>
<input type="radio" value="2" name="ex" id="radio1" /><label for="radio1">IE, FF 둘 다 지원하는 예제</label><br>
<input type="radio" value="3" name="ex" />라벨이 없는 경우<br>
<br><br>

세번째 라벨이 없는 경우의 값을 클릭할 때 사용자들은 원모양의 조그만 점에 커서를 집중시키기 위한 스트레스를 받아야 한다. 반면에 널찍한 텍스트를 클릭해도 된다면, 상대적으로 스트레스는 조금 덜할 것이다. 물론 label 태그에는 이미지도 사용가능하다(IE에서는 사용할 수 없다).
<br>
<input type="checkbox" name="searchengine" /><br>
<input type="checkbox" name="searchengine" id="cbox2" /><br>
<input type="checkbox" name="searchengine" id="cbox3" /><br>
<br>

<label><input type="checkbox" name="searchengine" /><img align="middle" src="http://www.google.co.kr/images/logo_sm.gif" /></label><br>
<input type="checkbox" name="searchengine" id="cbox2" /><label for="cbox2"><img align="middle" src="http://img.yahoo.co.kr/globalnav/yk_logo.gif" /></label><br>
<input type="checkbox" name="searchengine" id="cbox3" /><label for="cbox3"><img align="middle" src="http://wstatic.naver.com/w/n_c600.gif" /></label><br>
<br>


훨씬 사용하기가 낫다는 생각이 들지 않는가?<br>
게다가 accesskey 속성을 이용하면 로컬응용프로그램에서 보던 단축키 기능도 가능하다(Alt + 단축키).<br>

바로가기(S) <input type="text" value="여기로 포커스가 온다." id="txt1" /><br>
<br>
이렇듯 많은 장점과 보다 편리한 접근성을 제공해주는 LABEL 태그지만 아직도 많은 사람들은 이 태그의 효용성을 잘 모르고 있다. 이제는 알았으니 사용자를 위한 작은 배려를 실천해보자.

실행해보기   (실행2)



 

 댓글 (0)





버턴관련테그
 페이지: 1 / 1   


⊙label 태그8688
   ⊙  [RE] Label 태그를 Image로 하기6724
   ⊙Select 꾸미기 optgroup 사용(홈마스타)6774
   ⊙체크박스라디오버튼체크유무검사.html(홈마스타)6659
   ⊙input type="file" 의 value값(홈마스타)6722
   ⊙  [RE] input type=\(홈마스타)6594
   ⊙  [RE] input type=\(홈마스타)6624
   ⊙input 버턴의 모양(홈마스타)6516
   ⊙중보입력 방지 루틴(홈마스타)6528
   ⊙파일업로드 버턴을 이미지로(홈마스타)332
   ⊙  [RE] [JavaScript] input type(홈마스타)267
   ⊙    [RE] [JavaScript] input typ(홈마스타)284
   ⊙버터느 글상자 꾸미기(홈마스타)294
   ⊙체크박스가 하나이상 체크 되었는지 검사하는 루틴(홈마스타)291
   ⊙셀렉트박스 보이는 리스트 갯수 조정(홈마스타)275
   ⊙파일 업로드 버턴을 이미지로 만들기(홈마스타)301
   ⊙  [RE] 파일 업로드 버턴을 텍스트로 만들기(홈마스타)398
   ⊙    [RE] 파일 업로드 버턴을 텍스트로 만들기(홈마스타)288
   ⊙  [RE] 파일 업로드 버턴을 이미지로 만들기-다른 (홈마스타)288
   ⊙INPUT 을 다양하게 표현하기(홈마스타)245
   ⊙버튼에 링크걸기(홈마스타)290
   ⊙버턴크기 모양 색상 변경(홈마스타)310
   ⊙버턴 모양 부드럽게 - style 사용(홈마스타)(1) 259
   ⊙버턴 태그 관련 팁(홈마스타)(2) 262
   ⊙폼 전송 버턴(홈마스타)348
≪ [1]   ≫

복수단어 검색은 공백(space)로 구분해 주세요.




공지사항
 
인기 글
4008
3767
9918
19164
5460
4469
4128
3959
4428
5127
3973
6259
6724
[홈마스타] oledb 접근 오류
4454
3763
 
최근 글
128
200
169
134
104
127
2932
755
740
929
804
4014
3361
3407
3798