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

230130 

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

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

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

 참고: https://dasima.xyz/input-id-label-for/

You add the for attribute to the <label> element, where the value of for is the same as the id in the <input> element.
Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:
참고: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

<label> 태그의 장점은 label의 for 속성이 label 값을 누르면 label과 연결되어 있는 input 태그를 선택하는 효과를 줄 수 있다는 것이다. 라디오나 체크박스의 작은 영역에서 텍스트까지 그 클릭 영역을 늘리면서 사용자가 더 편리하게 이용할 수 있게 하는 것이 목적이다. 라벨 너비가 다른데 CSS로 너비를 맞춰주는 작업이 필요하다.

---