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에서 터치했을때에도 사용가능한지 테스트 해봤는데, 안된다.
'WEB CookBook > HTML' 카테고리의 다른 글
HTML에서 acronym 두문자어 태그 (0) | 2012.10.08 |
---|---|
HTML5에서 abbr 약어 태그 (0) | 2012.07.09 |
HTML5에서 em, strong, dfn, code, samp, kbd, var 구문태그 (0) | 2012.07.08 |
HTML에서 textarea 태그 rows, cols 속성 (0) | 2012.07.06 |
HTML에서 머릿글 태그 h1 ~ h6 크기 비교 (0) | 2012.07.04 |
HTML5에서 표(테이블, table) 그리기 (0) | 2012.07.03 |
HTML에서 이미지 넣기 (1) | 2012.07.02 |
HTML에서 링크걸기 a 태그 (0) | 2012.06.29 |
댓글