[HTML 태그] label 태그와 input 태그

<label>

 

: label 태그는 사용자 인터페이스 항목의 설명을 나타내며, 주로 <input> 태그와 함께 사용한다.

체크박스 타입의 input 태그와 label 태그를 함께 사용하면 label을 클릭해서 input의 체크박스를 활성화/비활성화 할 수 있다.

또한, 화면 리더기에서 label을 읽어서 사용자가 입력해야 하는 텍스트가 무엇인지 쉽게 알 수 있다.

 

<label> 요소와 함께 사용할 수 있는 요소

<button>, <input>, <meter>, <output>, <progress>, <select>, <textarea>

 

<label> 과 <input> 을 연결하여 사용하면 좋은 점

• 화면리더기는 폼 입력(input)에서 label을 읽어서 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 한다.
• 관련 label을 클릭해서 input 자체에 초점을 맞추거나 활성화 시킬 수 있다. 누를 수 있는 영역이 넓어져서 화면이 작은 스크린 사용자를 포함해 입력하려는 모든 사람에게 이점을 준다.

 

<label> 과 <input> 을 연결하기 위한 두 가지 방법

label, input 태그 예시

• for 속성

<label for="apple">Do you like apple?</label>
<input type="checkbox" name="apple" id="apple" />

<label>의 for 속성의 값과 <input>의 id 값을 일치시킨다.

 

• <label> 안에 <input> 중첩시키기

<label>Do you like apple? 
  <input type="checkbox" name="pass"/> 
</label>

input 태그를 label 태그로 감싸주면 for 속성을 사용하지 않아도 된다.