HTML <label> 태그 사용

🏷 input을 감쌀 수 있는 label

💡 label 사용의 장점

1. label 을 클릭해도 input 내용이 작동한다.
2. label 로 묶여 있는 내용도 input과 한 그룹으로 인식하므로, 화면리더기 등 보조기술 사용 시 input을 인식할 때 label도 함께 읽어준다.

🏷 laber 표현 ① for 사용

✔️ label의 for = " " 와
input의 id = " " 를 일치시켜 연동시켜주어야 한다

<!--input의 id === label의 for가 동일한 내용끼리 하나의 라벨-->
<!--name="age"인 radio 들 중 1가지만 체크 가능-->

<input id="teenage" type="radio" name="age"> 
<label for="teenage">10대</label>

<input id="twenty" type="radio" name="age"> 
<label for="twenty">20대</label>

<input id="thirty"  type="radio" name="age">
<label for="thirty">30대</label>

<input id="forty" type="radio" name="age" >
<label for="forty">40대</label>

10대 20대 30대 40대

💡 for 값과 일치하는 id를 가진 문서의 첫 번째 요소는 그 label 요소의 라벨 제어(labeled control) 라고 한다.
label을 지정할 수 없으면 for 속성은 영향을 미치지 않음
문서의 뒷부분에 id 값과 일치하는 다른 요소들은 무시함

🏷 laber 표현 ② label 안에 input 기재

✔️ <label> <input type=" "> 내용 </label>
label 안에 type을 넣어줄 경우 labe for 와 input 가 필요 없다.

<label> <input type="radio" name="ages"> 10대 </label>
<label> <input type="radio" name="ages"> 20대 </label>
<label> <input type="radio" name="ages"> 30대 </label>
<label> <input type="radio" name="ages"> 40대 </label>

10대
20대
30대
40대

✘ display : inline 요소임 주의 (velog에서 줄바꿈으로 나온 것일 뿐
😓)

🏷 그 외 주의할 점

❌ label 안에 < a > 태그(링크), < buttons > 과 같은 인터랙티브 요소를 배치하면 사람들이 label과 관련된 양식을 입력하기 어려우므로 지양할 것

<!--비추천-->
<label for="linkInLabel">
  <input id="linkInLabel" type="checkbox" name="terms-and-conditions">
  I agree to go to the <a href="https://velog.io/@iberis">iberis2의 Velog</a>
</label>

I agree to go to the iberis2의 Velog

<!--input이 들어 있는 label과 링크는 따로 배치하길 추천-->
<label for="linkOutLabel">
  <input id="linkOutLabel" type="checkbox" name="link-out-label">
  I agree to go to the Velog of iberis2
</label>
<p>
  <a href="https://velog.io/@iberis">iberis2의 Velog</a>
</p>

I agree to go to the Velog of iberis2

iberis2의 Velog

❌ < label> 내에 제목 태그 (h1, h2 ..) 넣는 것 지양
제목은 일반적으로 검색 엔진에서 필터링할 때 보조 도구로도 사용되어 < label> 내에 제목 요소(h1, h2 ...)를 배치하면 많은 종류의 보조 기술을 방해합니다.
⭕️ label의 텍스트를 디자인하는 경우, < label> 요소에 적용된 CSS 클래스를 사용할 것을 추천

<!--비추천-->
<label for="myVelog">
  <h3>My Velog</h3>
  <input id="myVelog" name="velog" type="text">
</label>

My Velog

<!--추천-->
<style> /*또는 CSS파일에서 디자인*/
  .velogDesign {
  font-size: 28px;
  font-weight: bold;
  }
</style>

<label class="velogDesign" for="myVelog">
  My velog <br>  <!--br 태그는 줄바꿔주기 위해 사용-->
  <input id="myVelog" name="velog" type="text">
</label>

My velog

출처: https://developer.mozilla.org/ko/docs/Web/HTML/Element/label
MDN에서 셀프 학습한 내용을 정리 & 기록하기 위해 작성된 글입니다.
잘 못된 부분이 있으면 알려주세요~~