label
<label>을 폼 컨트롤(예: <input> 또는 <textarea>)과 연결하는 것은 여러 가지 중요한 장점이 있습니다:- 레이블 텍스트는 시각적으로만 폼 입력과 연결되는 것이 아니라, 프로그래밍적으로도 연결됩니다.
- 즉, 예를 들어 화면 판독기(
screen reader)가 사용자가 폼 입력에 포커스를 맞추었을 때 레이블을 읽어주어, 보조 기술을 사용하는 사용자가 어떤 데이터를 입력해야 하는지 이해하는 데 도움이 됩니다.
- 사용자가 레이블을 클릭하거나 터치/탭하면, 브라우저는 포커스를 해당 입력 필드로 전달합니다(이벤트는 입력에도 발생).
이로 인해 입력을 활성화하려는 사용자가 터치스크린 장치에서도 더 쉽게 접근할 수 있게 됩니다.
연결 요소
<label> 요소와 연결할 수 있는 요소들에는 <button>, <input> (type="hidden" 제외), <meter>, <output>, <progress>, <select>, <textarea> 등이 있습니다.연결 방법 (2가지)
id=””: 연결되고자 하는 요소 (버튼, 인풋, 드롭박스, 텍스트입력 등)
- label
for=””
두 값을 일치시키면 연결됩니다.
라벨 여러개가 하나의 요소에 연결될 수도 있습니다.
<label for="username">Enter your username:</label> <input id="username" name="username" type="text" /> <label for="username">Forgot your username?</label>
다른 방법으로는,
<input>을 <label> 내부에 직접 넣을 수도 있습니다. 이 경우 연결이 암시적으로 이루어집니다:
// label 내부에 포함시키면 알아서 연결됨. <label> Do you like peas? <input type="checkbox" name="peas" /> </label>