Label

폼을 구조화하고 접근성을 높이는 데 사용할 수 있는 또 하나의 엘리먼트는 label 입니다. 이 이름이 말해주듯이 이 엘리먼트는 각 폼 요소의의미와 설명을 추가할 수 있도록 합니다. 대부분의 브라우저에서 레이블 엘리먼트를 클릭하면 연결된 폼 엘리먼트에 포커스가 옮겨집니다. 레이블을 사용할 때의 진정한 장점은 접근성 측면에 있습니다. 품에 레이블을 사용하면 스크린리더 프로그램이 관련된 폼 요소와 레이블을 정확하게 연결할 수 있습니다. 레이블을 사용하지 않으면 스크린리더 프로그램은 폼 요소와 연관된 텍스트를 나름대로 추측할 수 밖에 없으며 항상 맞는다는 보장을 할 수 없겠죠. 마치 일반 사용자들이 항목들을 한눈에 훑어 보듯이 스크린리더 프로그램 사용자들도 폼 안에 포함된 모든 레이블 목록을 한번에 들을 수 있게 해주기도 합니다.

폼 요소와 레이블을 연관짓는 것은 매우 쉽습니다. 여기엔 두 가지 방법이 있습니다. 하나는 묵시적인 방법으로 폼 요소를 label 엘리머트에 포함시키는 방법입니다.


묵시적 연결의 예

							<label>이메일 주소 <input type="text" name="email" /></label>
						

명시적 연결의 예

다른 하나는 명시적인 방법으로 label 엘리먼트의 for라는 속성과 폼 요소의 id 값을 동일하게 작성하는 방법입니다.

							<label for="email">이메일 주소</label>
							<input type="text" name="email" id="email" />
						

이 장에서 사용한 모든 폼 요소에는 name과 id를 모두 지정한 것을 보게 될 것입니다. id 속성은 폼 입력요소와 레이블간의 관계를 위해서 필요하고, name은 서버에 폼 데이터를 전송하기 위해서 필요합니다.

for 속성을 사용해서 폼 요소와 레이블을 연결할 경우 항상 소스코드에서 바로 위아래에 붙여서 작성할 필요는 없습니다. 문서내에서는 완전히 독립적인 요소이기 때문이죠. 하지만 구조적인 관점에서 본다면 현명한 방법은 아닙니다. 곡 그래야 하는 이유가 아니라면 항상 같이 쓰는 것이 좋습니다.