HTML label 태그: for·id 연결과 클릭 영역 넓히기
HTML의 <label>은 입력 요소의 이름을 화면과 보조 기술에 연결합니다. label의 for와 컨트롤의 id를 같게 지정하거나, label 안에 컨트롤을 넣어 연결할 수 있습니다. 연결된 설명 문구를 누르면 입력란에 포커스가 가거나 체크 상태가 바뀝니다.
for와 id로 명시적으로 연결하기
for에는 name이 아니라 같은 문서에 있는 입력 요소의 id를 적습니다. id는 문서 안에서 고유해야 하며, name은 서버로 보낼 항목 이름이므로 서로 역할이 다릅니다. 레이아웃을 위해 label과 input을 떨어뜨려 놓더라도 for·id가 정확히 연결되어 있으면 이름 관계를 유지할 수 있습니다.
다음 문서를 labels.html로 저장해 브라우저에서 엽니다. 첫 입력란은 for로, 체크박스는 감싸는 방식으로 연결했습니다. 서버로 제출하지 않는 화면 조작 실습입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>label 연결 비교</title>
</head>
<body>
<h1>입력 요소의 이름</h1>
<p>
<label for="reader-name">표시할 이름</label>
<input id="reader-name" name="reader" type="text"
aria-describedby="name-help" placeholder="예: 하늘">
</p>
<p id="name-help">화면에 보여줄 별명을 입력하세요.</p>
<p>
<label>
<input type="checkbox" name="tips" value="yes">
학습 소식 받기
</label>
</p>
</body>
</html>- “표시할 이름”을 누르면 해당 입력란에 커서가 놓입니다. 입력하면 placeholder는 사라져도 label은 계속 보입니다.
- “학습 소식 받기” 문구를 누르면 체크박스가 선택되고 다시 누르면 해제됩니다. 작은 체크 상자만 정확히 누르지 않아도 됩니다.
- Tab으로 입력 요소 사이를 이동하고 체크박스에서 Space로 상태를 바꾸어 키보드 조작도 확인합니다.
감싸는 연결과 추가 설명의 차이
label 안에 input을 넣으면 for 없이도 암시적으로 연결됩니다. 하나의 label 안에는 연결할 컨트롤 하나만 넣고 다른 label을 중첩하지 않습니다. 감싸는 방식에서도 id와 for를 함께 지정할 수 있지만 for는 반드시 그 안의 컨트롤을 가리켜야 합니다. 여러 보조 기술과 외부 도구의 호환성을 고려하면 명시적 for·id 연결을 우선 검토할 수 있습니다.
label은 무엇을 입력하는지 알려주는 이름입니다. 작성 조건이나 오류 메시지 같은 추가 설명은 별도 문단으로 두고 aria-describedby로 연결할 수 있습니다. 예제의 “화면에 보여줄 별명”은 이름을 보충하는 설명이며, placeholder를 이름의 대체로 쓰지 않았습니다.
연결되지 않거나 클릭이 이상할 때
for의 오타와 대소문자, 중복 id, 연결 대상의 종류를 확인합니다. hidden 입력처럼 label을 연결할 수 없는 요소에 for를 지정해도 일반 입력란처럼 동작하지 않습니다. label은 select·textarea 등에도 연결할 수 있고, 여러 선택지 묶음의 이름은 fieldset·legend로 구분합니다.
label 안에 별도의 링크나 버튼을 섞으면 클릭했을 때 이동과 선택 중 어느 동작을 의도하는지 불분명해질 수 있습니다. 추가 링크는 바깥에 두고 문맥을 먼저 설명합니다. 크기를 키우려고 label 안에 제목 요소를 넣기보다 CSS로 표현을 조절하세요. 지원되는 컨트롤과 작성 조건은 MDN label 문서에서 확인할 수 있습니다.
