HTML input id 속성과 label for 관계

HTML input id

id 값은 일반적으로 CSS나 자바스크립트 등에서 선택자로 사용됩니다. 하지만 id 값은 HTML의 <input> 태그에서는 <label> 태그와 연결 할 때도 사용할 수 있습니다.

label for

<label> 태그는 checkbox, radio와 같은 체크박스 등의 속성에 설명하는 문자를 삽입할 때 사용하는 태그입니다. for 라는 속성을 삽입해서 <input>id값과 일치 시키면 체크 박스의 클릭 범위를 증가시킬 수 있습니다.

일반적인 <label>checkbox 속성은 아래와 같이 적을 수 있습니다.

이럴 경우 checkbox의 작은 버튼을 직접 클릭해야 하는 불편함이 있습니다.

<label>당신은 밥을 먹었습니까?</label>
<input type="checkbox">

<label for><input id> 값을 일치 시킬 경우 편리하게 이용할 수 있습니다.

for의 값과 id 값을 hahaha라는 임의의 값으로 일치시킨 경우, 당신은 밥을 먹었습니까?라는 텍스트 부분을 클릭해도 checkbox 부분에 클릭이 됩니다.

<label for="hahaha">당신은 밥을 먹었습니까?</label>
<input type="checkbox" id="hahaha>