많은 개발자들이 label을 이용하거나 라벨을 이용하는 것처럼 여러가지 지원을 해준다. 하지만 몇몇 개발자 분들은!!!!! 사소한 부분을 신경을 쓰지 않기도 한다. 뭐 물론 아직 많이 사용하지 않는 혹은 아직 사용성에 신경쓸정도가 되지 않을 정도로 기능 우선적 개발이 필요한 경우가 있을 수 있지만... 몇몇 서비스의 경우 이미 오래되었음에도 불구하고, 신경을 안쓰는 곳이 있다.
웹을 공부를 하셨던 분이라면 html을 공부를 할 때, input과 관련 하여 label을 공부하게 될 것이다. 하지만 도덕 공부를 해도 쓰레기를 바닥에 버리는 것처럼, 잘 신경 쓰지 않는 것 같다.
위의 코드를 보면 사용법은 간단하다.
<input type="radio" id="html" name="fav_language" value="HTML" />
<label for="html">HTML</label>
for와 id를 맞춰주기만 하면 label의 클릭이 input을 클릭한것처럼 처리가 된다.
<label>
<input type="radio" name="fav_language" value="HTML" />
HTML
</label>
혹은 for와 id를 제공하지 않고 label안쪽으로 input을 위치 시켜주어도 된다.
<input type="radio" id="html" name="fav_language" value="HTML" />
<label for="html">HTML</label>
참고로 조심하여야 하는것이 같은 id와 for를 이용하면 안되는 것이다.
만약에 label에 for와 id를 사용 하는 방식이라면 id를 유일하게 생성되게 처리하여야 한다.
html, html2글자만 클릭을해보고, ImproveHtml, ImproveHtml2 클릭을 해보면 차이를 알 수 있을것이다.
오늘의 결론 체크박스나 라디오 버튼은 생각보다 클릭하기 귀찮으니 클릭 label을 이용 해보자.
댓글
댓글 쓰기