AI가 만든 폼의 이름표를 눌러도 입력칸이 안 잡힐 때: label의 for와 id 확인

노트북 입력 폼과 for·id 연결을 표현한 삽화, AI 폼 이름표와 입력칸 연결 확인이라는 제목

AI가 만든 HTML 폼에 이름표가 보이는데 이를 눌러도 입력칸에 연결되지 않는다면, label의 for와 입력칸의 id를 먼저 비교하세요. 화면에서 가까이 놓였다는 것과 코드로 연결됐다는 것은 별개의 확인입니다.

1. for는 입력칸의 id와 연결합니다

W3C WAI의 폼 이름표 안내는 명시적으로 연결할 때 label의 for 값과 폼 컨트롤의 id 값을 정확히 일치시키도록 설명합니다. 먼저 같은 철자로 연결됐는지 확인하고, 화면의 배치만 보고 연결됐다고 판단하지 마세요.

<label for="visitor-name">방문자 이름</label>
<input id="visitor-name" name="visitor" type="text">

위 예시에서 이름표는 visitor-name이라는 id를 가리킵니다. 입력칸의 name은 visitor입니다. for가 name을 찾는 것으로 생각해 두 값을 함께 바꿀 필요는 없습니다. 전송에 쓰는 이름과 화면 이름표의 연결을 따로 검수하세요.

글자로 비교: label의 for와 입력칸의 id 대조 / 화면에서 확인: 이름표를 클릭해 연결된 입력칸 확인 / 저장 후 반복: CMS 저장 결과와 키보드 이동도 확인

<label for="visitor-name">방문자 이름</label>
<input id="guest-name" name="visitor" type="text">

두 번째 예시는 label의 for가 visitor-name인데 입력칸의 id는 guest-name입니다. 글자 크기·여백·색을 고치더라도 이 연결 차이는 남습니다. 어떤 id를 사용할지 정한 뒤 그 값을 참조하는 이름표도 맞추세요.

AI에게 “이름표가 보이게 해줘”라고만 요청하면 배치와 연결 중 무엇을 고쳐야 하는지 모호할 수 있습니다. “각 label의 for가 해당 입력칸 id와 일치하는지 확인하고, 변경한 쌍을 적어줘”처럼 검수 대상을 명시하는 편이 좋습니다.

같은 조각을 여러 칸에 복사했다면 각 입력칸의 연결을 다시 살펴보세요. 첫 번째 칸에서 정상적으로 동작했다는 사실만으로 다른 칸도 연결됐다고 기록하지 않습니다.

이 절차는 실제 사용자 정보를 제출하지 않는 테스트 화면에서 진행하세요. 이름표 클릭을 확인하기 위해 문의나 신청을 실제로 보낼 필요는 없습니다. 예시 코드도 개인정보를 받는 공개 서비스를 완성한 코드가 아닙니다.

이름표를 눌렀을 때의 반응은 컨트롤 종류와 브라우저에 따라 다를 수 있습니다. 스크린리더 등 보조기술을 위한 이름 제공과 키보드 사용도 함께 검토해야 하며, 클릭 한 번이 접근성 전체 검증을 대신하지 않습니다.

WAI 안내는 label 안에 이름표 글자와 입력칸을 함께 넣는 암시적 연결 방식도 설명합니다. 명시적 for·id 연결이 아니라고 해서 모두 오류인 것은 아닙니다. 먼저 어느 구조를 의도했는지 읽고, 잘 동작하는 방식을 무조건 다른 구조로 바꾸지 마세요.

<label>방문자 이름 <input name="visitor" type="text"></label>

실제 페이지에서는 사용한 편집기와 보조기술 지원 범위를 포함해 확인합니다. 코드 조각만 맞췄다는 이유로 모든 환경에서 동작했다고 보고하지 않는 것이 좋습니다.

name이 label의 for와 다르면 오류인가요?
명시적 이름표 연결에서 대조할 값은 for와 id입니다. name은 별도의 전송 항목 이름입니다.

입력칸 위에 설명 글자가 있으면 충분한가요?
가까이 보이는 글자와 연결된 이름표는 다를 수 있습니다. 코드 연결과 실제 사용을 함께 확인하세요.

공식 안내 확인일 2026년 10월 16일: W3C WAI, Labeling Controls.

대표 삽화는 AI로 제작했으며, 본문 설명 도표는 폼 검수 순서에 맞춰 직접 구성했습니다.