label 태그

Input 태그를 작성시 label 태그는 왜 필요한지???? 어떤 이점이 있을지 알고 싶었습니다.

 

크게 2가지의 이유로 필요하다고 생각합니다.

1. label 태그와 input 태그를 연결해주면 label 태그를 클릭함으로써 input 태그가 체크 or focusing 되게 할 수 있습니다. 

이러한 동작은 웹의 ux에 도움을 줄것 같네요

2. 스크린 리더기에서 label 태그를 읽어서 사용자가 입력해야 하는 텍스트가 무엇인지 더 쉽게 이해할 수 있습니다.

 

이러한 두가지 이유가 있으니 이제 어떻게 사용하는지 알아보도록 하겠습니다.

<label for="test">click me</label>
<input type="text" id="test">

<label>
  click me
  <input type="text" id="test">
</label>

 

input 태그는 Label 밖에 위치할 수도 있고 안에 위치할 수도 있습니다. 

밖에 위치할 경우 label의 for와 input의 id 값이 일치하여야 합니다.

안에 위치할 경우 일치시켜주는 과정은 필요 없습니다.

 

두개의 경우 모두 lable을 클릭하면 input창에 focusinig이 잡히게 됩니다.

type이 checkbox, radio면 check 값이 토글 되게 됩니다.

 

 

 

---

 

주의사항 

 

접근성 측면에서  lable 태그 안에 anchor태그나 button tag는 넣지 않는것이 좋습니다.

이렇게 하면 lable을 클릭했을때 해당 태그들이 트리거 되므로 입력에 방해가 될 수도 있습니다.

<!-- 지양 해야할 사례 -->

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions">
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

 

헤더 태그들 또한 사용하지 않는것이 좋습니다.

헤더 태그는 주로 탐색 목적의 보조 도구로 사용되는데 Label 태그 안에 헤더 태그가 존재하게 되는 경우 

많은 보조 기술들을 방해하게 됩니다.

 

<!-- 지양 해야할 사례 -->

<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text">
</label>

 

 

https://developer.mozilla.org/ko/docs/Web/HTML/Element/label

<label> - HTML: Hypertext Markup Language | MDN

 

https://codepen.io/woobottle/pen/BamGKNy

BamGKNy