<label>

This translation is in progress.

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

Associating a <label> with an <input> element offers some major advantages:

  • The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screenreader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
  • You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.

To associate the <label> with an <input> element, you need to give the <input> an id attribute. The <label> then needs a for attribute whose value is the same as the input's id.

Alternatively, you can nest the <input> directly inside the <label>, in which case the for and id attributes are not needed because the association is implicit:

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

특성

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

for
같은 도큐먼트 내 라벨 가능(labelable) 폼 관련 요소의 ID 참조. for 속성의 값은 도큐먼트 내 동일 ID를 가지는 첫번 째 요소를 가리키며, 그 라벨 요소에 대한 라벨 제어(labeled control)라고 한다.
라벨 요소는 for 속성과 제어 요소를 동시에 가질 수 있다. 이 때 for 속성은 제어 요소를 가리키고 있어야 한다.
form HTML5
라벨(폼 소유자)이 연관된 폼 요소. 지정된 속성 값은 <form>의 동일 도큐먼트 내 ID이다. 이것은 라벨 요소가 폼 요소에서 파생된 위치 뿐만 아니라 도큐먼트 내 어디에나 위치할 수 있게 한다.

참고 사항

  • <label>의 제어 연동은 <label> 요소 내부에 제어 요소를 두는 방법과 for 속성을 통한 방법이 있다. 후자의 방법을 라벨 요소에 대한 라벨 제어라고 한다. 하나의 입력은 여러개의 라벨과 연동할 수 있다.
  • 라벨 자체가 폼과 직접적으로 연결되어 있는 것은 아니다. 라벨과 폼은 맥락 상 간접적인 제어를 통하여 연결된다.

용례

간단한 라벨 예제

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

"for" 속성을 이용한 예

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

기술 요약

콘텐츠 범주 Flow content, phrasing content, interactive content, form-associated element, palpable content.
허용되는 콘텐츠 Phrasing content, 하지만 상속으로 파생된 라벨 요소는 제외한다. 라벨된 제어 요소외 다른 라벨 요소도 허용되지 않는다.
태그 생략 None, both the starting and ending tag are mandatory.
허용되는 부모 요소 phrasing content를 받는 요소
허용되는 ARIA 역할 없음
DOM 인터페이스 HTMLLabelElement

명세

명세 상태 주석
HTML Living Standard
The definition of '<label>' in that specification.
Living Standard
HTML5
The definition of '<label>' in that specification.
Recommendation
HTML 4.01 Specification
The definition of '<label>' in that specification.
Recommendation 최초 정의

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
labelChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
forChrome Full support YesEdge Full support 12Firefox Full support YesIE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes
form
Deprecated
Chrome Full support YesEdge Full support 12Firefox No support ? — 49IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android No support ? — 49Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.

같이 보기