<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>
라벨태그는 단순히 마우스 사용자에게 편의성을 제공한다.
라벨태그로 텍스트를 싸지 않은 일반적인 라디오 버튼은 직접 라디오 버튼을 눌러야 선택할 수 있지만, 라벨태그로 싸여진 텍스트는 (위의 예제 중 핑크색으로 표기된) 텍스트를 클릭했을때에 라디오 버튼이 클릭된다.
주의 할점은 <label>태그의 속성(attribute) for 와 해당 <input>태그의 속성(attribute) id 값이 동일해야 한다.
스마트폰, 태블릿PC에서 터치했을때에도 사용가능한지 테스트 해봤는데, 안된다.
'Programming > Web' 카테고리의 다른 글
| [html5] Visual Cheat Sheet (1) | 2012.07.31 |
|---|---|
| 왜 div에 있는 p에 float:left를 하면 div의 background가 없어지나요? (0) | 2012.07.31 |
| HTML Color Codes (0) | 2012.07.11 |
| HTML escape 이스케이프 문자 (0) | 2012.02.15 |
| google map & tabs with jquery (0) | 2012.02.10 |
댓글