label element - by. UXKM

Publishing
HTML
폼 콘텐츠(Forms content)
label element

요약 설명
<label> 요소는 폼 요소(<input>, <textarea>, <select> 등)와 연결되어 해당 입력 요소의 제목이나 설명을 제공하는 시맨틱 태그로, 사용자가 어떤 값을 입력해야 하는지 명확하게 안내하는 역할을 합니다.
for 속성을 사용해 특정 id를 가진 폼 요소와 연결하거나, 폼 요소를 <label> 내부에 직접 포함할 수도 있습니다. 사용자가 라벨을 클릭하면 해당 입력 필드에 포커스가 이동되어 사용성과 접근성을 크게 향상시키며, 스크린 리더 등 보조 기술에서도 필수적인 역할을 합니다.

주요 역할 및 특징

입력 필드의 설명 제공
사용자가 어떤 정보를 입력해야 하는지 안내하는 역할을 합니다.
for 속성으로 연결
- <label> 요소는 for 속성을 사용하여 특정 입력 요소와 연결할 수 있습니다. for 속성 값은 해당 입력 필드의 id 속성과 일치해야 합니다.
- <label>을 클릭하면 연결된 <input> 필드가 자동으로 포커스를 받습니다.
접근성 향상
<label>은 접근성(Accessibility) 측면에서 중요한 역할을 합니다. 화면 리더기나 키보드 네비게이션을 사용할 때, 폼 필드에 대한 정보를 제공하여 시각 장애인이나 입력 장애가 있는 사용자에게 유용합니다.
명시적, 암묵적 <label> 사용
- 명시적 방식 : <label>의 for 속성을 사용하여 특정 폼 요소(id)와 연결하는 방식으로, 위치와 상관없이 명확한 연관성을 가질 수 있습니다.
- 암묵적 방식 : <label> 내부에 폼 요소를 포함하여 자동으로 연결하는 방식으로, 코드가 간결하지만 위치가 변경될 경우 연관성이 약해질 수 있습니다.

CSS 기본 값

<label> 요소는 기본적으로 인라인 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.

							label {
								display: inline;
								cursor: auto;
							}

명시적(Explicit)과 암묵적(Implicit) 방식

요약 설명
접근성을 위해 명시적 방식(label 요소를 명확히 연결하는 방식)이 권장되지만, 암묵적 방식(라벨과 입력 요소를 구조적으로 배치하는 방식)도 HTML 표준에서 허용됩니다.
암묵적 방식은 주로 디자인 목적으로 사용되며, <input> 요소 중 radio 및 checkbox 타입을 커스텀 스타일링할 때 많이 활용됩니다.

명시적(Explicit) 방식

<label>의 for 속성을 사용하여 특정 폼 요소와 연결하는 방법입니다. for 속성 값은 연결할 폼 요소의 id 값과 일치해야 합니다.

기본 문법

									<!-- 명시적 방식 기본 문법 -->
									<label for="username">이름:</label>
									<input type="text" id="username" name="username">

특징

<label>과 <input>이 직접 연결되므로 위치와 관계없이 연관이 유지됩니다.
<input>을 클릭하지 않아도, <label>을 클릭하면 자동으로 포커스가 이동됩니다.
스크린 리더가 올바르게 읽을 수 있도록 접근성이 향상됩니다.

암묵적(Implicit) 방식

<label> 요소 내부에 폼 요소를 포함하여 암묵적으로 연결하는 방법입니다. 별도의 for 속성이 필요하지 않습니다.

기본 문법

									<!-- 암묵적 방식 기본 문법 -->
									<label>
										이름: <input type="text" name="username">
									</label>

특징

<label>과 <input>이 같은 요소 내에 있어야 하며, 암묵적으로 연결됩니다.
<label>을 클릭하면 내부의 <input>에 포커스가 자동 이동합니다.
다만, 위치가 변할 경우 연관이 명확하지 않을 수 있습니다.

속성

[for] 명시적 방식 - 필수 <label for="값">

명시적 방식을 사용할 때는 반드시 <label>의 for 속성과 <input>의 id 속성을 동일하게 지정해야 합니다.
반면, 암묵적 방식을 사용할 때는 <label> 내부에 <input>을 포함하여 for 속성을 생략해도 자동으로 연결됩니다.
for 속성을 사용하면 <label>을 클릭했을 때 해당 입력 요소에 포커스가 이동합니다.

								<!--
									<label> for의 값과 <input> id의 값을 동일하게 지정
								-->
								<label for="email">이메일:</label>
								<input type="email" id="email">

예제

명시적과 암묵적의 차이

체크박스와 <label> 연결

라디오 버튼과 <label> 연결

드롭다운(<select>)과 <label> 연결

접근성을 고려한 aria-labelledby 사용

								<!-- 접근성을 고려한 aria-labelledby 사용 -->
								<label for="username" id="username-label">사용자명:</label>
								<input type="text" id="username" name="username" aria-labelledby="username-label">

주의사항

<label>의 for 속성 값은 반드시 연결할 입력 요소의 id 속성과 동일해야 합니다. 일치하지 않으면, 레이블을 클릭해도 해당 입력 필드로 포커스가 이동하지 않습니다.
<label> 내부에 입력 요소를 포함하는 경우, for 속성을 생략해도 텍스트를 클릭할 수 있으며, 이 경우 레이블이 자동으로 해당 입력 요소와 연결됩니다.