현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
개요
HTML Label 요소 (<label>)는 유저 인터페이스 아이템의 캡션을 나타낼 때 사용합니다. 이는 Label 안에 컨트롤 요소를 넣거나, 혹은 for 속성을 사용해 컨트롤 요소를 제어할 수 있습니다. 이는
label element의 labeled control라고 불립니다.
- 콘텐츠 범주 Flow content, phrasing content, interactive content, form-associated element, palpable content.
- 허용되는 콘텐츠 Phrasing content, but no descendant
label
elements. No labelable elements other than the labeled control are allowed. - 태그 생략 None, both the starting and ending tag are mandatory.
- 허용되는 부모 요소 Any element that accepts phrasing content.
- DOM 인터페이스
HTMLLabelElement
속성
이 요소는 global attributes를 포함하고 있습니다.
accesskey
HTML 4 HTML5- A shortcut key to access this element from the keyboard.
for
- The ID of a labelable form-related element in the same document as the label element. The first such element in the document with an ID matching the value of the
for
attribute is the labeled control for this label element.Note: A label element can have both afor
attribute and a contained control element, as long as thefor
attribute points to the contained control element. form
HTML5- The form element that the label element is associated with (its form owner). The value of the attribute must be an ID of a
<form>
element in the same document. If this attribute is not specified, this<label>
element must be a descendant of a<form>
element. This attribute enables you to place label elements anywhere within a document, not just as descendants of their form elements.
예제
간단한 label 예제
<label>Click me <input type="text" id="User" name="Name" /></label>
Using the "for" attribute
<label for="User">Click me</label> <input type="text" id="User" name="Name" />
사양
사양 | 상태 | 주석 |
---|---|---|
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 | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
기능 | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
참고
Click events in nested <label>
elements
Starting with Gecko 8.0 (Firefox 8.0 / Thunderbird 8.0 / SeaMonkey 2.5), a bubbling click event triggers at most one <label>
, and the synthetic click event cannot trigger additional <label>
s. In Gecko, a click event will still bubble up past a <label>
, while in WebKit or Internet Explorer the click event will stop at the <label>
. The behavior prior to Gecko 8.0 (triggering multiple <label>
s) caused Firefox to stop responding (see bug 646157).
같이 보기
- Other form-related elements:
<form>
,<button>
,<datalist>
,<legend>
,<select>
,<optgroup>
,<option>
,<textarea>
,<keygen>
,<fieldset>
,<output>
,<progress>
and<meter>
.