<label>

시도해 보기

<div class="preference">
  <label for="cheese">Do you like cheese?</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

<div class="preference">
  <label for="peas">Do you like peas?</label>
  <input type="checkbox" name="peas" id="peas" />
</div>

.preference {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin: 0.5rem;
}

<label> 을 <input> 요소와 연결하면 몇 가지 이점이 있습니다:

• label 텍스트는 텍스트 입력과 시각적으로 관련이 있을뿐만 아니라 프로그래밍적으로도 관련이 있습니다. 예를 들어, 화면리더기(screenreader) 는 폼 입력(form input)에서 label 을 읽어서 보조기술(assistive technology) 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 합니다.
• 관련 label 을 클릭해서 input 자체에 초점을 맞추거나 활성화를 시킬 수 있습니다. (활성되어서)늘어난 누를 수 있는 영역(hit area)은 터치스크린 사용자를 포함해 입력하려하는 모든 사람에게 이점을 줍니다.

<label> 을 <input> 요소와 연관시키려면, <input> 에 id 속성을 넣어야합니다. 그런 다음 <label> 에 id 와 같은 값의 for 속성을 넣어야합니다.

또는, <label> 안에 <input> 을 중첩시킬 수 있습니다. 이 경우 연관이 암시적이므로 for 및 id속성이 필요없습니다.

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

다른 사용법 메모:

• label 이 붙여진 양식 컨트롤(form control) 은 레이블된 제어 labeled control 라고 불립니다. 하나의 input 은 여러 label들에 연관되어있습니다.
• 연관된 양식 컨트롤(form control) 이 있는 <label> 이 클릭되거나 터치되면, 이 label의 click 이벤트는 연관된 control 도 동작시킵니다.

특성

이 요소는 전역 특성을 포함합니다.

for

같은 문서 내의 <label> 요소로서, 레이블 가능한 form-related 요소의 id. 레이블 가능한 요소일 때, for 속성값과 일치하는 id를 가진 문서의 첫 번째 요소는 ê·¸ label 요소의 *라벨 제어(labeled control)*라고 합니다. label을 지정할 수 없으면 for 속성은 영향을 미치지 않습니다. 문서의 뒷부분에 id 값과 일치하는 다른 요소들은 무시합니다.

참고 : <label> 요소는 for 속성과 제어control 요소를 동시에 가질 수 있습니다. 이 때 for 속성은 포함되어있는 제어control 요소를 가리키고 있어야 합니다.

form

labelê³¼ 연관된 <form> 요소(양식 소유자 form owner). 이 속성이 지정된 경우, 이 속성 값은 동일한 문서의 <form> 요소의 id입니다. 따라서 label 요소를 양식 요소의 자손이 아닌 문서의 어느 곳에나 배치 할 수 있습니다.

CSS 스타일링

<label> 요소에 대한 특별한 스타일 ê³ ë ¤ 사항은 없습니다. 구조적으로 단순한 인라인 요소이므로 <span> 또는 <a> 요소와 같은 방식으로 스타일을 지정할 수 있습니다 }}. 텍스트를 읽기 어렵게하지 않는 한 원하는 방식으로 스타일을 적용 할 수 있습니다.

예제

간단한 label 예제

<label>Click me <input type="text" /></label>

"for" 속성 예제

<label for="username">Click me</label> <input type="text" id="username" />

접근성 고려사항

인터랙티브 콘텐츠

Don't place interactive elements such as anchors or buttons inside a label. Doing so makes it difficult for people to activate the form input associated with the label.

label 안에 anchors 또는 buttons와 같은 인터랙티브 요소를 배치하지 마십시오. 그렇게하면 사람들이 labelê³¼ 관련된 양식을 입력하기 어렵습니다.

하지 마세요

<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 for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
</label>
<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>

제목

제목은 일반적으로 탐색 목적의 ë³´ì¡° 도구로 사용되므로 <label> 내에 제목 요소를 배치하면 많은 종류의 ë³´ì¡° 기술을 방해합니다. label의 텍스트를 시각적으로 조정해야하는 경우, <label> 요소에 적용된 CSS 클래스를 사용하십시오.

양식(form) 또는 양식의 섹션에 제목이 필요한 경우 <fieldset> 내에 배치 된 <legend> 요소를 사용하십시오.

하지 마세요

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

이렇게 하세요

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

버튼

type="button"선언과 유효한 value 속성을 가진 <input> 요소에는 연관된 레이블이 필요하지 않습니다. 그렇게하면 ë³´ì¡° 기술이 버튼 입력을 구문 분석하는 방법을 실제로 방해 할 수 있습니다. <button> 요소에도 동일하게 적용됩니다.

기술 요약

명세

브라우저 호환성