<label>

HTML <label> 요소는 유저 인터페이스 내 아이템의 캡션을 나타낸다.

콘텐츠 범주 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

속성

이 요소는 전역 속성을 포함한다.

for
같은 도큐먼트 내 라벨 가능(labelable) 폼 관련 요소의 ID 참조. for 속성의 값은 도큐먼트 내 동일 ID를 가지는 첫번 째 요소를 가리키며, 그 라벨 요소에 대한 라벨 제어(labeled control)라고 한다.
라벨 요소는 for 속성과 제어 요소를 동시에 가질 수 있다. 이 때 for 속성은 제어 요소를 가리키고 있어야 한다.
form HTML5
라벨(폼 소유자)이 연관된 폼 요소. 지정된 속성 값은 <form>의 동일 도큐먼트 내 ID이다. 이것은 라벨 요소가 폼 요소에서 파생된 위치 뿐만 아니라 도큐먼트 내 어디에나 위치할 수 있게 한다.
이 콘텐트의 속성에 대한 사항은 2016년 4월 28일 부로 HTML 표준서에서 제거되었다. 그러나 관련 내용은 HTMLLabelElement.form 스크립트를 통하여 확인해 볼 수 있다; 문서에는 폼이 연동된 라벨은 대상을 반환하고, 그렇지 않은 경우 null을 반환한다고 되어 있다.

참고 사항

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

용례

간단한 라벨 예제

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

"for" 속성을 이용한 예

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

사양

사양 상태 주석
WHATWG 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 최초 정의

브라우저 호환성

기능 Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
지원 여부 (Yes) (Yes) (Yes)[1] (Yes) (Yes) (Yes)
기능 Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
지원 여부 (Yes) (Yes) (Yes)[1] (Yes) (Yes) (Yes)

[1] Gecko 8.0부터 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5), 버블링 이벤트는 많아야 하나의 <label>을 작동시키고, 인위적인 클릭 이벤트는 추가적인 <label>을 동작시키지 못한다. Gecko에서는 클릭 이벤트가 여전히 버블링 되어 <label>을 지나갈 수 있으나, Webkit이나 Internet Explorer에서는 <label>에서 멈추게 된다. Gecko 8.0 이전의 여러 <label>에 걸쳐 동작하는 방식은 Firefox의 응답을 멈추게 할 수 있었다. (bug 646157 참고)

[2] 2016년 4월에 관련 HTML 명세가 개정되면서 form 속성을 제거하였다. 스크립트 상에는 여전히 사용 가능하지만 그 정의가 변경되었다: 문서에는 폼이 연동된 라벨은 대상을 반환하고, 그렇지 않은 경우 null을 반환한다고 되어 있다. (즉, HTMLLabelElement.controlnull). HTMLLabelElement.form 문서 참고.

이 변경 사항은 Firefox 49에 반영되었다.

See also

문서 태그 및 공헌자

 이 페이지의 공헌자: danhojin, teoli, SphinxKnight, jayjin, azunyan3
 최종 변경: danhojin,