입력 양식과 라벨 만들기

연락받을 사람의 이름과 이메일 주소를 받으려면 두 입력란이 각각 어떤 정보를 원하는지 분명해야 합니다. HTML에서는 입력란을 <form> 안에 배치하고, 각 입력란에 <label>을 연결해 목적을 알려 줄 수 있습니다.

입력란과 라벨의 역할

<form>은 사용자가 입력할 항목들을 담는 요소입니다. <input>은 값을 입력하는 요소이며, type 속성으로 입력 목적을 나타냅니다. text는 일반적인 한 줄 텍스트에, email은 이메일 주소에 사용합니다.

<label>은 입력란의 이름을 나타냅니다. 라벨의 for 값과 입력란의 id 값을 같게 지정하면 둘이 연결됩니다. 그러면 라벨을 클릭해 해당 입력란에 초점을 옮길 수 있고, 스크린 리더 같은 보조 기술도 입력란의 이름을 전달할 수 있습니다.

입력란의 name은 나중에 폼 데이터를 제출할 때 값과 함께 사용되는 이름입니다. id는 문서에서 요소를 구별하고 라벨을 연결하는 데 쓰이므로 name과 역할이 다릅니다. 이번 예제는 입력란을 만드는 데 집중하며 제출 기능은 다음 강의에서 다룹니다.

이름과 이메일 입력하기

환경은 Chromium입니다. 아래 코드는 외부 파일 없이 사용할 수 있는 HTML 문서입니다. 이름 입력란에는 김하늘, 이메일 입력란에는 sky@example.com을 입력해 보세요.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>연락 양식</title>
</head>
<body>
  <h1>연락 양식</h1>
  <form>
    <p>
      <label for="contact-name">이름</label>
      <input type="text" id="contact-name" name="name">
    </p>
    <p>
      <label for="contact-email">이메일 주소</label>
      <input type="email" id="contact-email" name="email">
    </p>
  </form>
</body>
</html>

예상 화면에는 연락 양식 제목과 이름, 이메일 주소 라벨이 보이고, 각 라벨 옆에 빈 입력란이 있습니다. 입력 후에는 첫 번째 칸에 김하늘, 두 번째 칸에 sky@example.com이 표시됩니다. 이름 라벨을 클릭하면 이름 입력란에 초점이 갑니다.

코드가 동작하는 이유

첫 번째 라벨의 for="contact-name"은 id="contact-name"인 입력란을 가리킵니다. 이메일 입력란도 contact-email이라는 같은 값으로 연결됩니다. id는 한 문서 안에서 겹치지 않도록 정합니다.

name="name"과 name="email"은 각각 이름과 이메일 값에 붙일 데이터 이름입니다. 현재 예제에는 제출 버튼이나 데이터를 처리하는 기능이 없으므로 값을 입력해도 다른 곳으로 전달되지는 않습니다. <p>는 각 라벨과 입력란을 문단 단위로 묶어 구분합니다.

흔한 실수와 경계 조건

• for와 id가 다르면 라벨이 의도한 입력란에 연결되지 않습니다. 값의 철자와 대소문자를 확인하세요.
• 입력란 옆에 글자만 적는 것으로는 <label>을 사용한 연결이 만들어지지 않습니다. 입력란 안에 잠시 보이는 안내 문구도 라벨을 대신하지 않습니다.
• name을 빼면 해당 입력값은 일반적인 폼 제출 데이터에 포함되지 않습니다. id가 있더라도 제출할 이름은 따로 지정해야 합니다.
• type="email"은 이메일 주소의 형식을 검사하는 데 쓰이지만 주소의 실제 존재 여부나 소유자는 확인하지 않습니다. required가 없는 이 예제에서 빈 값은 허용됩니다. 형식 검사는 폼 제출 시 적용되며, 이 예제에는 제출 버튼이 없습니다.

연습과 해설

연락 양식에 별명을 입력할 수 있는 한 줄 입력란을 추가해 보세요. 라벨을 클릭했을 때 새 입력란에 초점이 가도록 연결하고, 나중에 제출할 데이터 이름은 nickname으로 정합니다.

풀이에서는 기존 두 문단 뒤, </form> 앞에 다음을 추가합니다.

<p>
  <label for="contact-nickname">별명</label>
  <input type="text" id="contact-nickname" name="nickname">
</p>

for와 id가 모두 contact-nickname이므로 라벨이 새 입력란을 가리킵니다. name="nickname"은 제출할 값의 이름을 지정합니다. 이 id는 기존 입력란의 id와도 겹치지 않습니다.

참고 문서: WHATWG HTML 표준: 폼, WHATWG HTML 표준: label 요소, WHATWG HTML 표준: 이메일 입력.