[HTML] input에 label 사용하기 🏷️

input에 label을 함께 사용하는 이유

1️⃣ 웹 접근성 (Web Accessibility)

input과 label의 연관성을 표시해둠으로써 input에 대해 어떤 동작을 하려고 할 때,

이게 어떤 input인지 label을 자동으로 설명해준다.

 

2️⃣ 브라우저가 자동으로 이벤트를 연결해준다.

따라서 label을 클릭하면 input에도 클릭 이벤트가 발생하는 것과 같다.

 

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

 

주의 사항 ⚠️

id는 고유한 것으로 사용해줘야한다.

만약 위의 예시처럼, checkbox라는 id를 갖는 input이 여러 개 있는 경우,

(예를 들어 투두리스트에서 투두의 input이 여러개 있는 경우)

가장 첫 번째 input에만 이벤트가 발생하는 불상사가 발생할 수 있다.

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