[html] label for속성에 관해서

<lable> 태그는 양식 입력 창(form control)을 설명하는 이름표입니다.

 

lable 요소로 묶인 텍스트를 클릭하면, form control(양식 입력 창)이 선택 됩니다.

(다시 클릭하면 선택 해제됨)

 

*form control이란-> input, textarea, button, select 요소로 생성된 입력 제어 장치

 

 

▶함께 사용할 수 있는 속성

속성	속성값	설명
for	요소id	label로 묶을 id. 관련 요소의 id와 같음
form	form id	label이 속한 form의 id

lable로 묶는 방법은 두 가지가 있는데,

1. for 속성을 사용하거나
2. <lable> 요소 안에 form cotrol을 두는 것.

예시코드) 방법1을 사용한 예시

https://codesandbox.io/s/elastic-cache-ksvx1?file=/index.html

elastic-cache-ksvx1 - CodeSandbox

<div><label for="action" >1. 액션</label><input type="checkbox" name="movie" value="action" id="action"></div>
<div><label for="sf" >2. 공상과학</label><input type="checkbox" name="movie" value="sf" id="sf"></div>
<div>3. 스릴러<input type="checkbox" name="movie" value="thrill"></div>

여기서 1.액션2.공상과학과 달리 3.스릴러는 label for속성으로 id값을 가르키지 않았는데 이는

이름을 클릭해도 체크박스가 체크가 되지 않지만

1.액션과 2.공상과학은 label 이름만 클릭해도 체크박스가 클릭된다!!! 꼭 기억하자