AI가 만든 폼의 이름표를 눌러도 입력칸이 안 잡힐 때: label의 for와 id 확인
AI가 만든 HTML 폼에 이름표가 보이는데 이를 눌러도 입력칸에 연결되지 않는다면, label의 for와 입력칸의 id를 먼저 비교하세요. 화면에서 가까이 놓였다는 것과 코드로 연결됐다는 것은 별개의 확인입니다. 목차 1. for는 입력칸의 id와 연결합니다 2. 보기에는 비슷해도 연결이 끊어진 예시 3. 저장한 화면에서 클릭과 키보드를 함께 확인 4. 입력칸을 label 안에 넣는 방식도 있습니다 5. 자주 묻는 질문 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 visitor-name 연결할 입력칸의 id와 같은가 input의 id visitor-name 이름표가 가리키는 대상인가 input의 name visitor 전송 항목 이름으로 의도한 값인가 2. 보기에는 비슷해도 연결이 끊어진 예시 <label for="visitor-name">방문자 이름</label> <input id="guest-name" name="visitor" type="text"> 두 번째 예시는 label...