label 태그 for 사용법 및 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">
  
  
label for 사용법

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

<label> 태그의 for 값이 babo이고, <input> 태그의 id 값이 baboya로 동일해졌다.

하하하라고 적힌 문자 부분을 클릭하면, text 속성값의 입력창에 자동으로 커서가 생성된다.

<label for="babo">하하하</label>
<input type="text" id="babo">
  
가장 좋은 예시는 radio나 checkbox 속성값을 사용할 때 이다. 
보통 이런 버튼은 너무 작아서 클릭할 때 비효율적이다.

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

<label for="nunu">누누를 괴롭히지마</label>
<input type="checkbox" id="nunu">
  
  
for 쓰지 않고 label 사용법

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

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


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

react에서는 for대신에 htmlFor을 쓴다