label element - by. UXKM

label element 설명

<label> 요소는 사용자 인터페이스(UI) 요소의 레이블(label)을 정의할 때 사용합니다.
<label> 요소는 for 전역 속성을 사용하여 다른 요소와 결합할 수 있으며, 이때 <label> 요소의 for 속성값은 결합하고자 하는 요소의 id 속성값과 같아야 합니다.
또한, <label> 요소를 결합하고자 하는 요소 내부에 위치시키면 for 전역 속성을 사용하지 않더라도 해당 요소와 결합시킬 수 있습니다.
이러한 <label> 요소는 브라우저에 의해 일반적인 텍스트로 렌더링되지만, 사용자가 마우스로 해당 텍스트를 클릭할 경우 <label> 요소와 연결된 요소를 곧바로 선택할 수 있어 사용자의 편의성을 높일 수 있습니다.

<label> 요소를 사용할 수 있는 요소는 다음과 같습니다.
<input>, <meter>, <output>, <progress>, <select>, <textarea> <button> 요소, <input> type 속성이 button, submit, image, hidden, reset인 경우은 제외.

<label> 요소에 대한 코드 작성 방식에는 명시적(explicit)과 암시적(implicit)으로 분류됩니다.
명시적 방식은 <label> 의 for 속성과 <input> 의 id 속성을 명시함으로써, 연결해주는 방식을 의미합니다.
암시적 방식은 <label> 요소 안에 <input> 요소를 넣음으로써, for 속성을 명시하지않더라도 암묵적으로 연결하는 방식입니다.
<label> 자체가 폼과 직접적으로 연결되어 있는 것은 아닙니다. 레이블과 폼은 맥락상 간접적인 제어를 통하여 연결됩니다.

HTML5에서는 <label> 요소에 form 속성이 새롭게 추가되었으나, 2016년 4월 28일 부로 HTML 표준서에서 제거되었습니다.