[HTML5] label 태그와 for 속성

---

알고있으면 좋은 HTML5 Tip✨

---

label

• <label> 태그사이에 위치한 text, checkbox, radio 등은 클릭 가능 영역이 텍스트로 확장된다.
• <label for=""> 와 <태그 id="">값은 서로 그룹을 형성한다.
• 쉽게 말해, <label> 태그는 <input> 태그를 도와주는 역할을 한다.
• <input> 태그가 디자인 하기 힘들 때 <label> 태그로 연결해서 쉽게 디자인하거나 클릭 편의성을 높일 수 있다.

 

(1) label for 사용법

<label for="username">ID</label>
<input type="text" name="username" id="username">

• <label> 태그는 for 속성을 사용해서 <input> 태그의 id 속성에 연계해서 사용한다.
• label의 for값과 input의 id값을 일치시키면 된다.

<label class="checkLabel" for="checkTime">현재 시각으로 업데이트</label>
<input type="checkbox" id="checkTime" checked />

• 가장 좋은 예시는 radio나 checkbox 속성값을 사용할 때이다.
• 보통 이런 버튼은 너무 작아서 클릭할 때 비효율적 작은 경우가 있다.
• <label> 태그를 이용해 텍스트를 추가하면 텍스트를 클릭해도 자동으로 체크박스의 on/off  기능이 가능하다.