[html] label 태그 for 사용법

출처 :dasima.xyz/html-label/

 

<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 값이 baboya이고, <input> 태그의 id 값이 baboya로 동일해졌습니다.

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

<label for="baboya">하하하</label> <input type="text" id="baboya">

예제 ▷

 

가장 좋은 예시는 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>태그로 값을 묶어야 합니다. 사용할 경우 물리적으로 떨어져 있어도 서로 연결됩니다. 두 요소는 결과가 같습니다.