HTML 강좌 / label과 input으로 입력 필드 만들기

input은 사용자의 값을 받는 필드이고, label은 그 필드가 무엇을 입력받는지 알려 줍니다. 가장 확실한 연결 방법은 label의 for와 input의 id를 같게 만드는 것입니다.

label과 input 연결하기

<form action="" 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이 전송 데이터의 키에 쓰입니다.

입력칸을 클릭했을 때 커서가 보이지만 제출한 주소에 값이 없다면 name을 확인하세요. 반대로 값은 전송되는데 레이블을 눌러도 반응이 없다면 for와 id가 같은지 확인합니다.

for에는 필드의 name이 아닌 id를 적습니다. 반대로 서버에서 받는 키를 바꾸고 싶다면 name을 수정해야 합니다. 예를 들어 위 코드에서 id="visitor-name"을 id="person-name"으로 바꾼다면 레이블의 for도 함께 바꾸지만, name="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>라면 문구를 눌러 선택 상태를 바꿀 수 있습니다. 어느 방식을 쓰든 한 필드가 무엇을 의미하는지 분명한 문구를 제공하고, 클릭 동작으로 연결 여부를 검사하세요.