본문 바로가기
WEB CookBook/HTML

HTML에서 마우스 사용자의 편의를 위한 라벨(label) 태그

by 쵸빵닷컴 2012. 7. 5.
반응형

HTML <label> 태그
http://www.w3schools.com/html5/tag_label.asp


<label> 태그 사용 결과

라벨태그 사용했을때


라벨태그 사용 안했을때

좋아요
싫어요


<label> 태그 사용 방법

HTML 코드

<!DOCTYPE html>

<html>

  <head><title></title></head>

  <body>

<form>

  <h3>라벨태그 사용했을때</h3>

  <label for="like">좋아요</label>

  <input type="radio" name="hobulho" id="like" />

  <br />

  <label for="dislike">싫어요</label>

  <input type="radio" name="hobulho" id="dislike" />

  <br />

</form>

<form>

  <h3>라벨태그 사용 안했을때</h3>

        좋아요

  <input type="radio" name="hobulho" id="like" />

        <br />

  싫어요

        <input type="radio" name="hobulho" id="dislike" />

</form>

  </body>

</html>


comment.

라벨태그는 단순히 마우스 사용자에게 편의성을 제공한다.

라벨태그로 텍스트를 싸지 않은 일반적인 라디오 버튼은 직접 라디오 버튼을 눌러야 선택할 수 있지만, 라벨태그로 싸여진 텍스트는 (위의 예제 중 핑크색으로 표기된) 텍스트를 클릭했을때에 라디오 버튼이 클릭된다.

주의 할점은 <label>태그의 속성(attribute) for 와 해당 <input>태그의 속성(attribute) id 값이 동일해야 한다.


스마트폰, 태블릿PC에서 터치했을때에도 사용가능한지 테스트 해봤는데, 안된다.


반응형

댓글