HTML <label> 태그

정의 및 특징

・<label> 태그는

　사용자 인터페이스(UI) 요소의 라벨(label)을 정의할 때 사용한다

 

・<label> 요소는 for 속성을 사용하여

　다른 요소와 결합할 수 있으며

　이때 <label> 요소의 for 속성값은

　결합하고자 하는 요소의 id 속성값과 같아야 한다

　다른 요소와 결합할 수 있으며

　또한, <label> 요소를

　결합하고자 하는 요소 내부에 위치시키면

　for 속성을 사용하지 않더라도

　해당 요소와 결합시킬 수 있다

 

・<label> 요소는

　브라우저에 의해 일반적인 텍스트로 랜더링 되지만

　사용자가 마우스로 해당 텍스트를 클릭할 경우

　<label> 요소와 연결된 요소를

　곧바로 선택할 수 있어 사용자의 편의성을 높일 수 있다

 

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

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

 

 

지원하는 브라우저

지원함	지원함	지원함	지원함	지원함	지원함

 

속성

속성명	속성값	설명
for	요소 id	라벨(label)과 결합될 요소를 명시한다
form	form id	라벨과 결합될 하나 이상의 <form> 요소를 명시한다 HTML5에서 새롭게 추가된 속성

 

예제

<div class="preference">
    <label for="cheese">Do you like cheese?</label>
    <input type="checkbox" name="cheese" id="cheese">
</div>

<div class="preference">
    <label for="peas">Do you like peas?</label>
    <input type="checkbox" name="peas" id="peas">
</div>

Do you like cheese? Do you like peas?

 

 

■HTML 태그 레퍼런스

HTML 태그 레퍼런스 - MAIN 돌아가기