..

Search

<label>

HTML <label> 태그


정의 및 특징

<label> 태그는 사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용합니다.

 

<label> 요소는 for 속성을 사용하여 다른 요소와 결합할 수 있으며, 이때 <label> 요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 합니다. 또한, <label> 요소를 결합하고자 하는 요소 내부에 위치시키면 for 속성을 사용하지 않더라도 해당 요소와 결합시킬 수 있습니다.

 

이러한 <label> 요소는 브라우저에 의해 일반적인 텍스트로 랜더링되지만, 사용자가 마우스로 해당 텍스트를 클릭할 경우 <label> 요소와 연결된 요소를 곧바로 선택할 수 있어 사용자의 편의성을 높일 수 있습니다.

 

<label> 요소를 사용할 수 있는 요소는 다음과 같습니다.

- <button>, <input>, <meter>, <output>, <progress>, <select>, <textarea>


예제
<form action="/examples/media/action_target.php" method="get">
    여러분의 나이대를 골라보세요.<br>
    <input type="radio" name="ages" id="teen" value="teenage">
    <label for="teen">10대</label><br>
    <input type="radio" name="ages" id="twenty" value="twenties">
    <label for="twenty">20대</label><br>
    <input type="radio" name="ages" id="thirty" value="thirties">
    <label for="thirty">30대</label><br>
    <input type="radio" name="ages" id="forty" value="forties">
    <label for="forty">40대 이상</label><br>
    <input type="submit">
</form>

코딩연습 ▶


지원하는 브라우저 및 버전

태그명

chrome

edge

ie

firefox

safari

opera

<label> 지원함 지원함 지원함 지원함 지원함 지원함

HTML5에서 변경된 사항

HTML5에서는 <label> 요소에 form 속성이 새롭게 추가되었습니다.


사용할 수 있는 속성

html5 : HTML5에서 새롭게 추가된  속성

속성명   속성값 설명

for

 

요소 id

라벨(label)과 결합될 요소를 명시함.

form

html5

form id

라벨과 결합될 하나 이상의 <form> 요소를 명시함.


CSS 기본값

label {

  cursor: default;

}


DOM 인터페이스

interface HTMLLabelElement : HTMLElement {

  readonly attribute HTMLFormElement? form;

  attribute DOMString htmlFor;

  readonly attribute HTMLElement? control;

};


연습문제