label 이라는 매우 편리한 태그가 존재함에도 불구하고 아직도 많은 사람들은 라디오 버튼이나 체크박스를 찍을때 박스를 정확히 찍도록 만들며, 혹은 스크립트 삽질로 같은 기능을 구현하는 경우가 있다.
label 태그를 써보자.
각각의 input 들은 label이라고 하는 태그를 통해서 접근할 수도 있다. label 태그를 이용하면 사용자는 label 안의 내용을 클릭해도 input 을 클릭한 효과를 얻을 수 있다(실제로 onclick 이벤트도 발생한다).
간단한 예제를 보자.
라벨이 없는 경우
라벨이 없는 경우
세번째 라벨이 없는 경우의 값을 클릭할 때 사용자들은 원모양의 조그만 점에 커서를 집중시키기 위한 스트레스를 받아야 한다. 반면에 널찍한 텍스트를 클릭해도 된다면, 상대적으로 스트레스는 조금 덜할 것이다. 물론 label 태그에는 이미지도 사용가능하다(IE에서는 사용할 수 없다).
훨씬 사용하기가 낫다는 생각이 들지 않습니까?
게다가 accesskey 속성을 이용하면 로컬응용프로그램에서 보던 단축키 기능도 가능하다(Alt + 단축키).
이렇듯 많은 장점과 보다 편리한 접근성을 제공해주는 LABEL 태그지만 아직도 많은 사람들은 이 태그의 효용성을 잘 모르고 있다. 이제는 알았으니 사용자를 위한 작은 배려를 실천해보자.
저도 label 태그를 꼬박꼬박 사용하는데 1번 방법을 사용하고 있습니다.
하나하나 마다 id주기도 싫고 지원 못하는 IE가 밉고 해서 그냥 1번방식으로 하고 있습니다.
굿..
작은 배려 동감입니다.
긴~텍스트 두고 작은 상자 클릭하려면 골치아프죠.
검색 사이트 중에서 그나마 label 쓰는데가 구글하고 엠파스 정도인 것 같아요.
이미지 사용한 label 태그, 아무리 찍어봐도 반응이 없네요.. 익스 6.0인데요..
이상하네요.. 저만 안되는 건가....
밤별// IE에서는 사용할 수 없다고 적어놨는데... -_-a
IE가 표준을 제대로 지원하지 못하는게 많거든요.
크어어억!! 존경해요^^
크로스 브라우저에 대한 홈페이지 하나 만들어주세요...(퍼버벅!!)
좋은 팁이네요!
label 이라는 매우 편리한 태그가 존재함에도 불구하고 아직도 많은 사람들은 라디오 버튼이나 체크박스를 찍을때 박스를 정확히 찍도록 만들며, 혹은 스크립트 삽질로 같은 기능을 구현하는 경우가 있다. label 태그를 써보...
좋은 정보 감사합니다.
제 블로그에 좀 퍼 갈게요~
크어 태곤 블로그는 읽을거 무자게 많넹