설명
The HTML Label Element (<label>) represents a caption for an item in a user interface. It can be associated with a control either by using the for attribute, or by placing the control element inside the label element. Such a control is called the labeled control of the label element.
Label 요소(<label>)는 사용자 인터페이스(주로 form인 듯)에 속해 있는 아이템(이를 테면 라디오버튼, 체크박스)에 설명(캡션)을 붙일 때 사용한다. 어떤 컨트롤에 for 속성을 지정하거나 label 태그 안에 컨트롤을 넣으면 된다. 이런 컨트롤을 labeled 컨트롤(레이블 붙은 컨트롤)이라고 부른다.
예를 들어, (<label>을 쓰지 않고)라디오버튼 옆에 텍스트를 표시하면 라디오버튼을 클릭해야 그것을 선택한 상태로 만들 수 있는데 <label>로 텍스트를 감싸고 for 속성에 라디오버튼의 ID를 지정하면 텍스트를 클릭해도 라디오버튼을 클릭한 것과 같은 효과를 내므로 사용성을 높일 수 있다(제가 맘대로 추가한 부연설명입니다).
Usage Context
| Permitted content | Phrasing content, but no descendant label elements. No labelable elements other than the labeled control are allowed. |
| Tag omission | None, both the start tag and the end tag are mandatory. |
| Permitted parent elements | Any element that accepts phrasing content. |
| Normative document | HTML 5, Section 4.10.6 HTML 4, Section 17.9.1 |
속성
이 엘리먼트는 전역속성을 지원한다.
accesskey - HTML 4, Obsolete in HTML5
A shortcut key to access this element from the keyboard.
키보드의 특정 키를 눌러 이 <label> 요소에 접근할 수 있는 단축키
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.
<label> 요소가 속해 있는 문서에 있는 폼 관련 labelable 요소의 ID 값. for 속성에 지정된 값과 동일한 ID 값을 가진 요소(가 여러 개 있다면 그것들) 중에서 첫번째 요소가 이 <label> 요소의 labeled 컨트롤이다.
참고 : A label element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.
label 요소의 for 속성 값이 contained 컨트롤 요소를 가리킨다면, label 요소는 for 속성과 contained 컨트롤 요소를 둘 다 가질 수 있다. (아래 예 중 두번째를 보면 라디오버튼을 <label>이 감싸고 있는데, 만약 <label>에 for 속성 값을 주고 싶다면 라디오버튼에도 ID 속성에 같은 값을 주어야 한다는 뜻이다.)
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> 요소가 연관되어 있는 폼 요소. form 속성 값은 같은 문서 안에 있는 <form>의 ID 값과 같아야 한다. <label> 요소에 form 속성 값이 지정되어 있지 않으면, 이 <label> 요소는 <form> 요소의 자식이 되어야 한다(즉, <form></form> 사이에 있어야 한다는 뜻 같은데 정확하게 이해하지 못했어요). 이 속성은 <label> 요소가 <form> 요소의 자식이 아니더라도 문서 어디든 <label> 요소들을 배치할 수 있게 해준다.
예제
<!-- Simple label example with for attribute --> <input type="radio" name="clickmebutton" id="clickmebutton"> <label for="clickmebutton">Click me</label> <!-- or more simply --> <label><input type="radio" name="clickmebutton"> Click me</label> <!-- 이해를 돕기 위해 추가한 예 --> <label for="myRadio"><input type="radio" name="clickmebutton" id="myRadio"> Click me</label>
DOM Interface
This element implements the HTMLLabelElement interface.
<label> 요소는 HTMLLabelElement 인터페이스를 구현한다.
호환성
| 기능 | 구글크롬 | 파이어폭스Gecko) | 인터넷 익스플로러 | Opera | Safari |
|---|---|---|---|---|---|
| 기본적인 지원 |
| 기능 | 안드로이드 | 파이어폭스 모바일(Gecko) | 인터넷 익스플로러 모바일 | 오페라 모바일 | 사파리 모바일 |
|---|---|---|---|---|---|
| 기본적인 지원 |
