HTML 강좌 / input 유형 선택하기: 이메일·숫자·날짜·체크박스·라디오

input의 type을 바꾸면 브라우저에 필드의 입력 목적을 알려 줄 수 있습니다. 이메일·숫자·날짜는 값의 형태가 다르고, 체크박스는 독립적인 선택, 라디오 버튼은 같은 그룹에서 하나를 고르는 선택에 알맞습니다.

값의 성격에 맞는 유형 고르기

<form action="" method="get">
  <p><label for="email">이메일</label>
     <input id="email" name="email" type="email"></p>
  <p><label for="quantity">수량</label>
     <input id="quantity" name="quantity" type="number" min="1"></p>
  <p><label for="visit-date">방문일</label>
     <input id="visit-date" name="date" type="date"></p>
  <button type="submit">확인</button>
</form>

코드를 HTML 파일에 넣고 브라우저에서 열어 보세요. email은 이메일 주소 형식 검사와 기기에 알맞은 입력 환경을 제공할 수 있습니다. number에는 최소값을 정할 수 있고, date의 표시 방식은 브라우저와 운영체제에 따라 다를 수 있습니다. 우편번호나 전화번호처럼 숫자로 계산하지 않는 값은 number보다 text 또는 tel이 적합할 수 있습니다.

예제의 수량은 실제 개수를 뜻하므로 숫자 입력이 알맞지만, 우편번호는 앞자리의 0이 중요하고 더하거나 뺄 일이 없습니다. 전화번호에는 국가 번호나 하이픈도 들어갈 수 있습니다. 즉 ‘숫자처럼 보이는가’가 아니라 ‘수치로 계산하는가’를 기준으로 유형을 고르세요. type="date"로 받은 값도 서버에서는 날짜의 유효성과 업무 조건을 다시 검사해야 합니다.

체크박스와 라디오 버튼 비교하기

여러 항목을 각각 선택할 수 있다면 체크박스를, 하나만 선택해야 한다면 같은 name을 가진 라디오 버튼을 사용합니다. 선택하지 않은 체크박스와 라디오 버튼의 값은 보통 전송되지 않습니다.

<fieldset>
  <legend>알림 방식</legend>
  <label><input type="checkbox" name="news" value="yes"> 소식 받기</label>
</fieldset>
<fieldset>
  <legend>연락 방법</legend>
  <label><input type="radio" name="contact" value="email"> 이메일</label>
  <label><input type="radio" name="contact" value="phone"> 전화</label>
</fieldset>

두 라디오 버튼의 name="contact"가 같기 때문에 하나를 선택하면 다른 하나의 선택이 풀립니다. value는 제출되는 값이며 화면에 보이는 레이블과 구분됩니다.

위 두 그룹을 실제로 제출해 보려면 form 안에 넣고 제출 버튼을 추가하세요. ‘소식 받기’를 체크하지 않으면 news 항목은 전송되지 않고, 이메일을 고르면 contact=email이 전달됩니다. 선택하지 않은 상태와 ‘아니오’를 명시적으로 선택한 상태를 구별해야 하는 서비스라면 양식과 서버 처리를 함께 설계해야 합니다.

유형 선택 뒤에도 확인할 것

type이 맞더라도 레이블과 name이 없으면 사용성과 전송 데이터가 불완전할 수 있습니다. 각 필드의 목적을 레이블로 설명하고, 실제 브라우저에서 값을 입력·제출하여 예상한 이름과 값이 전달되는지 확인하세요. HTML의 기본 검사는 서버 측 검사를 대체하지 않습니다. 지원 유형과 세부 규칙은 MDN input 요소 문서에서 확인할 수 있습니다.

라디오 버튼에서 하나를 반드시 고르게 하려면 같은 이름의 그룹에 required를 적용할 수 있습니다. 다만 필수 선택이 실제로 필요한지 먼저 판단해야 합니다. type="email"도 required가 없으면 비워 둘 수 있으므로, 입력 형식과 필수 여부는 서로 다른 조건입니다.