HTML <label>: 사용자 인터페이스 레이블 요소

HTML <label> 요소는 사용자 인터페이스 항목의 설명을 나타냅니다.

<div>
  <label for="cheese">치즈를 좋아하시나요?</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

<div>
  <label for="peas">콩을 좋아하시나요?</label>
  <input type="checkbox" name="peas" id="peas" />
</div>

<input> 요소에 <label>을 연결하는 것에는 큰 장점이 있습니다.

• 레이블 텍스트는 시각적으로만 컨트롤에 연결된 것이 아니라, 프로그램 상에서도 연결됩니다. 이 말은 보조 기술 역시 어떤 컨트롤의 설명이 정확히 무엇인지 알 수 있다는 것이므로, 사용자가 양식 입력 칸에 포커스를 한 경우, 스크린 리더가 그 칸에 대한 올바른 설명을 읽어줄 수 있어서 사용자가 어떤 데이터를 입력해야 하는지 이해하기가 쉬워집니다.
• 레이블을 클릭하거나 터치하는 경우, 브라우저는 레이블이 연결된 요소로 포커스를 전달합니다(이 과정에서 대상 요소에서도 관련 이벤트가 발생합니다).

<label>을 <input>과 연결하려면 우선 <input>에 id 특성을 지정해야 합니다. <label>에는 for 특성에 그 id와 동일한 값을 지정하세요.

또는, <input>을 <label>의 안에 배치하는 방법도 있습니다. 이 때는 암시적으로 서로의 관계를 생성하므로 id와 for 특성을 지정할 필요는 없습니다.

<label
  >치즈를 좋아하시나요?
  <input type="checkbox" name="cheese" />
</label>

특성

전역 특성을 포함합니다.

for

같은 문서 내의 레이블 가능한 요소 중 <label>과 연결할 요소의 id 특성 값입니다. 이 값과 동일한 id를 지닌 요소가 레이블 가능한 요소에 속하지 않을 경우 아무런 효과도 없습니다.

같은 id를 사용하는 요소가 다수여도 맨 처음 요소 하나만 고려합니다. 맨 처음 요소가 레이블 가능한 요소에 속하지 않으면 아무것도 하지 않습니다.

여러 <label> 요소가 같은 for 값을 가질 수 있습니다. 이 경우, 하나의 요소가 다수의 레이블을 갖게 됩니다.

<label> 요소의 자손으로 레이블 가능한 요소가 이미 존재하는 경우, for 특성은 해당 자손 요소의 id를 값으로 가져야 합니다.

접근성

상호작용 콘텐츠

<a>나 <button>처럼 상호작용 가능한 요소를 <label> 안에 배치하면 사용자가 레이블과 연결된 컨트롤을 활성화하기 힘들어집니다. 상호작용 가능한 요소를 레이블 콘텐츠에 포함하지 마세요.

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  <a href="/terms-and-conditions">이용약관</a>에 동의합니다.
</label>

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  이용약관에 동의합니다.
</label>
<p>
  <a href="/terms-and-conditions">이용약관</a>
</p>

헤딩

<h1-6> 요소는 보조 기술이 탐색 시 자주 사용합니다. 따라서 <label> 안에 <h1-6>를 배치하면 다양한 종류의 보조 기술과 충돌할 수 있습니다. 레이블의 시각적인 모습을 바꾸려면 CSS를 사용하세요.

양식이나 양식의 일부에 제목을 붙여야 하면 <fieldset> 요소 안쪽에 배치하는 <legend> 요소를 사용하세요.

버튼

유효한 value를 지정한 <input type="button"> 요소에는 별도의 레이블이 필요하지 않습니다. <label>을 연결할 경우 보조 기술이 버튼을 인식하는 방법과 충돌할 수 있습니다. 마찬가지로 <button> 요소에도 <label>을 연결하지 않아야 합니다.

명세

HTML Standard

브라우저 호환성