HTML 강좌 / label과 input으로 입력 필드 만들기
input은 사용자의 값을 받는 필드이고, label은 그 필드가 무엇을 입력받는지 알려 줍니다. 가장 확실한 연결 방법은 label의 for와 input의 id를 같게 만드는 것입니다.
label과 input 연결하기
<form method="get">
<label for="visitor-name">이름</label>
<input id="visitor-name" name="name" type="text">
<button type="submit">확인</button>
</form>이 코드를 HTML 파일의 body에 넣어 브라우저에서 열고 ‘이름’ 글자를 눌러 보세요. 연결이 올바르면 입력칸에 초점이 이동합니다. 같은 문서에서 id는 중복하지 않는 것이 중요합니다. 여러 필드에 같은 id를 쓰면 레이블이 의도한 필드와 연결되지 않을 수 있습니다.
마우스뿐 아니라 키보드로도 확인해 보세요. Tab으로 입력칸에 이동했을 때 시각적 초점이 보이고, 보조 기술이 필드 이름을 알 수 있어야 합니다. 레이블은 단순한 장식 문구가 아니라 입력 필드와 연결되는 이름입니다. 화면에 ‘이름’이라는 글자가 바로 옆에 있다고 해서 자동으로 연결되는 것은 아닙니다.
id와 name은 서로 다른 역할
id는 문서 안에서 요소를 식별하고 레이블·링크·스크립트와 연결합니다. name은 양식을 제출할 때 값에 붙는 이름입니다. 위 예제에서는 visitor-name이 레이블 연결에, name이 전송 데이터의 키에 쓰입니다. 서버로 전달되는 이름과 요청 방식은 form의 구조와 GET·POST 제출 방식의 데이터 목록 실습으로 확인합니다.
입력칸을 클릭했을 때 커서가 보이지만 제출한 주소에 값이 없다면 name을 확인하세요. 반대로 값은 전송되는데 레이블을 눌러도 반응이 없다면 for와 id가 같은지 확인합니다.
for에는 필드의 name이 아닌 id를 적습니다. 반대로 서버에서 받는 키를 바꾸고 싶다면 name을 수정해야 합니다. 예를 들어 위 코드에서 id="visitor-name"을 id="person-name"으로 바꾼다면 레이블의 for도 함께 바꾸지만, name="name"은 그대로 둘 수 있습니다.
연결이 끊긴 레이블을 고쳐 보기
<!-- for가 name을 가리키는 잘못된 연결 -->
<label for="full_name">이름</label>
<input id="person-name" name="full_name">
<!-- for와 id를 일치시킨 연결 -->
<label for="person-name">이름</label>
<input id="person-name" name="full_name">두 조각은 각각 별도 파일에서 시험합니다. 고친 조각에서 이름 문구를 누르면 person-name 입력칸에 초점이 이동해야 합니다. 두 예를 한 문서에 함께 넣으면 id가 중복되므로 비교 방식 자체가 잘못됩니다. 값의 전송 이름은 계속 full_name으로 남습니다.
placeholder는 label을 대신하지 않습니다
placeholder는 입력 형식에 대한 짧은 힌트입니다. 사용자가 글을 입력하면 사라지므로 필드의 이름을 대신할 수 없습니다. 다음처럼 보이는 레이블을 유지하고 보조 예시만 추가하세요. 입력 중에도 남아야 할 도움말 연결은 양식에 안내 문구 추가하기에서 구체적으로 설명합니다.
<label for="email">이메일 주소</label>
<input id="email" name="email" type="email"
placeholder="name@example.com">시각적으로 레이블을 숨겨야 하는 디자인에서도 적절한 접근 가능한 이름은 필요합니다. 입력칸의 목적을 먼저 명확히 표현한 뒤 디자인을 조정하세요. MDN label 요소 문서에 연결 방식과 주의점이 정리돼 있습니다.
체크박스나 라디오 버튼은 입력 요소를 레이블 안에 넣는 방식으로도 연결할 수 있습니다. 예를 들어 <label><input type="checkbox" name="agree"> 동의합니다</label>라면 문구를 눌러 선택 상태를 바꿀 수 있습니다. 어느 방식을 쓰든 한 필드가 무엇을 의미하는지 분명한 문구를 제공하고, 클릭 동작으로 연결 여부를 검사하세요.
