HTML - label for

<label> 태그 정리

• <label> 태그사이에 위치한 text, checkbox, radio 등은 클릭 가능 영역이 텍스트로 확장됩니다.
• <label for=""> 와 <태그 id="">값은 서로 그룹을 형성합니다.

HTML label 태그

<label> 태그는 <input> 태그를 도와주는 역할입니다. <input> 태그가 디자인 하기 힘들 때 <label> 태그로 연결해서 쉽게 디자인하거나 클릭 편의성을 높일 수 있습니다.

 

예시를 보면 <label> 태그는 단순히 <p> 태그와 같은 단어 입력처럼 보일 수 있습니다. 그런데 아래 예제에서 글자 부분을 클릭해보면 키보드 커서가 우측의 text 창에 표시됩니다.

 

<label for="babo">여기를 클릭하세요.</label> <input type="text" id="babo">

 

가장 좋은 예시는 radio나 checkbox 속성값을 사용할 때 입니다. 보통 이런 버튼은 너무 작아서 클릭할 때 비효율적입니다.

 

<label> 태그의 for 값을 nunu로 주고, <input type="checkbox">의 id 값을 nunu로 작성합니다. 이럴 경우 누누를 괴롭히지마라는 텍스트를 클릭해도 자동으로 체크박스의 체크 on/off가 가능합니다.

 

 

for 쓰지 않고 label 사용법

<label> 태그를 <input> 태그 바깥에 사용하면, for 속성을 사용하지 않을 수 있습니다.

 

<label>
  <input type="checkbox">손오공</label>
  <br>
<label>
  <input type="checkbox">베지터</label>
  <br>
<label>
  <input type="checkbox">피콜로</label>

for 속성을 사용하지 않을 경우 <label>태그로 값을 묶어야 합니다. 사용할 경우 물리적으로 떨어져 있어도 서로 연결됩니다. 두 요소는 결과가 같습니다.