클릭을 좀더 편하게 - label

일반적으로 체크박스에 체크(?)를 하기 위해서는 체크박스를 클릭해야 합니다. 하지만 그 영역이 너무 작고, 성질급한 저같은 사람에겐 속터지는 일이지요... 체크박스와 연관되어 있는 텍스트에까지 클릭의 영역을 지정하고 싶을 경우를 위한 태그가 있습니다. 바로 <label>이라는 것인데... 아는 사람은 다 알지만 필요성을 느끼지 못해 사용하지 않는 경우가 있습니다. 그런데 예를 들어서 

이럴경우는... 일일이 체크하려면 눈이 빠지고, 손가락 후달립니다... 게다가 글작성시마다... 카테고리를 분류하기 위해 빈번하게 체크가 일어날 경우라면 여간 짜증나는 일이 아닐 수가 없겠죠..
이럴때 작은 배려가 큰 감동이 될수 있다나요.. ㅋㅋㅋ 방법은 간단합니다. 체크박스와 텍스트를 연결 시켜주는 label을 사용하면 됩니다.

<input type="checkbox" name="check" id="email_save" />
<label for="email_save">이메일 저장</label>

여기서 중요한것은 체크박스의 id값입니다. 모 굳이 얘기 하자면 email_save라는 아이디값을 가진 체크박스를 위한 레이블!.. 정도로 해석이 되겠지요.. 영작문 해석하는것 같군요.. ^^;;

이것은 클릭할 수 있는 영역이 넓어져 사용자 편의를 위한것도 있지만, 레이블과 폼의ID 관계를 정의해 주어 스크린리더가 각 폼에 해당하는 레이블을 올바르게 읽어주게 하는 아주 중요한 태그입니다. 게다가 마크업에 한발 다가서는 태그기도 하구요..

이렇게 하면 코드가 한결 깔끔해 지겠지요.. ^ ^v