입력 양식 기초

잘 만든 입력 양식에서 칸 옆의 「이메일」 글자를 누르면 커서가 칸 안으로 들어갑니다. 작은 부분이지만 label 요소가 제 일을 하고 있다는 뜻입니다.

입력 양식이 하는 일

검색창, 회원 가입 페이지, 결제 화면은 모두 입력 양식입니다. <form> 요소가 입력 장치들을 묶고, 방문자가 양식을 제출하면 브라우저는 장치마다 name과 값을 짝지어 form의 action 속성에 적힌 주소로 보냅니다. method 속성은 보내는 방식을 정합니다. get은 데이터를 주소에 붙여서 즐겨찾기할 수 있는 검색에 어울리고, post는 요청 본문에 담아 보내서 주문처럼 데이터를 바꾸는 일에 어울립니다. 양식은 HTML이 만들고, 도착한 데이터를 어떻게 처리할지는 서버의 프로그램이 정합니다.

<form action="/subscribe" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" autocomplete="name">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <button type="submit">Subscribe</button>
</form>

모든 입력 장치에는 이름표가 필요합니다

<label> 요소는 입력 장치에 이름을 붙입니다. input에 id를 주고 label에 같은 값의 for 속성을 주거나, input을 label 안에 넣어서 둘을 잇습니다. 이어 두면 좋은 점이 두 가지입니다. 칸에 초점이 오면 화면 낭독기가 이름표를 읽어 주므로, 사용자는 「입력 칸」이 아니라 「이메일, 입력 칸」이라고 듣습니다. 또 이름표를 누르면 칸에 초점이 가거나 체크상자가 선택되므로, 누구에게나, 특히 휴대전화 사용자에게 누를 자리가 넓어집니다. placeholder(칸 안의 흐린 안내 글자)는 이름표가 아닙니다. 입력하는 순간 사라지고, 대비가 낮은 경우가 많으며, 일부 보조 기술은 읽지도 않습니다.

입력 종류

<input>의 type 속성을 바꾸면 장치가 달라집니다. text는 기본인 한 줄 입력 칸입니다. email, tel, url은 비슷해 보이지만 휴대전화에서 알맞은 자판을 띄우고, 브라우저가 이메일 주소의 형식을 검사해 줍니다. number는 숫자를 받고 min, max를 정할 수 있습니다. password는 입력한 글자를 가리고, date는 달력을 보여 주며, checkbox와 radio는 고르는 상자입니다. 긴 글에는 <textarea>를, 목록에서 고르는 선택에는 안에 <option>을 넣은 <select>를 씁니다.

선택지 묶기

한 질문에 속한 라디오 버튼은 같은 name을 씁니다. 그러면 한 번에 하나만 고를 수 있습니다. 묶음을 <fieldset>으로 감싸고 질문은 <legend>에 넣습니다. 그러면 화면 낭독기가 선택지마다 질문을 함께 읽어 줍니다. 「빵 크기, 작은 것, 라디오 버튼, 2개 중 1번째」처럼요. 라디오 버튼마다 이름표는 따로 붙입니다.

버튼과 브라우저 검사

form 안의 <button>은 기본으로 양식을 제출합니다. type="submit"을 쓰면 이 점이 분명해지고, type="button"은 JavaScript가 일을 주기 전까지 아무 일도 하지 않는 버튼입니다. 보내기 전에 브라우저가 칸을 대신 검사해 줄 수도 있습니다. required는 칸이 비어 있으면 제출을 막고, type="email"은 @가 없는 글자를 거부하며, minlength, min, max는 한계를 정합니다. 이런 검사는 방문자가 실수를 일찍 고치도록 돕지만, 방문자의 브라우저에서 돌아가므로 우회할 수 있습니다. 그래서 서버가 데이터를 다시 검사해야 합니다. email, name 같은 값을 주는 autocomplete 속성은 브라우저가 저장된 정보를 채우게 해서, 누구에게나 입력을 줄여 주고 특히 손을 쓰기 불편하거나 기억에 어려움이 있는 사람에게 도움이 됩니다.