[TIL] 2022. 12. 16. HTML label-input 태그

label - input 연결 효과

• Web Accessibility 웹 접근성을 향상시킬 수 있음.
• Browser 이벤트를 연결해줌. label을 클릭해도 checkbox가 체크 됨.

연결 방법

1. label 하위에 input 요소 넣기

label에 htmlFor 속성이 없어도 됨.

<label>
  <input
    type='checkbox'
  />
  {text}
</label>

2. label htmlFor 속성에 아이디 연결하기

label이 htmlFor 속성을 가져야 하고, 그 값은 input의 id 이어야 함.

<input
  type='checkbox'
  id={id}
/>
<label htmlFor={id}>
  {text}
</label>