HTML 사전

label

설명

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 인터페이스를 구현한다.

호환성

Desktop
기능 구글크롬 파이어폭스Gecko) 인터넷 익스플로러 Opera Safari
기본적인 지원          
Mobile
기능 안드로이드 파이어폭스 모바일(Gecko) 인터넷 익스플로러 모바일 오페라 모바일 사파리 모바일
기본적인 지원          

참고

댓글

댓글 본문
  1. engfordev
    긴 글인데 수고가 많으셨어요~
    FORM 속성부분 의견 드릴게요~
    <label> 요소에 form 속성 값이 지정되어 있지 않으면, 이 <label> 요소는 <form> 요소의 자식이 되어야 한다(즉, 사이에 있어야 한다는 뜻 같은데 정확하게 이해하지 못했어요). 이 속성은 <label> 요소가 <form> 요소의 자식이 아니더라도 문서 어디든 <label> 요소들을 배치할 수 있게 해준다.
    >> 요 부분이요, 이런 의미인 것 같습니다.
    <label> 요소에 FORM 속성값이 지정되어 있지 않으면, 이 <label>요소는 의 하위 요소이어야 한다. (말씀하신대로, 사이에 있어야 한다는 의미 맞는 것 같고요.) 반면에 Form 속성값으로 form의 id를 지정해 경우에는 <form>안에 넣지 않아도 문서내 어디에든 배치시킬 수 있다. (이 경우에는 <label> 요소를 쓴 부분은 안에 있지 않지만, 부모 요소의 id를 써두었으니, 실질적으로는 그 명시된 id값을 가지는 의 label 역할을 하는게 되지 않을까요? )
    더불어 이런 점이 궁금해지네요. 이런 속성을 잘 활용하는 경우는 어떤 경우가 있는지. 예를 들어 form이 여러 개가 있는데, label 속성은 한꺼번에 모아놓고 싶을때 실제로 이런 것을 쓰는지..
    </label></form></label></label></label></form></label></form></label></label>
버전 관리
graphittie
현재 버전
선택 버전
graphittie 자세히 보기