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

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

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

<form 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, autocomplete로 양식 설명하기의 fieldset·legend 예제와 함께 비교하세요.

<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이 전달됩니다. 선택하지 않은 상태와 ‘아니오’를 명시적으로 선택한 상태를 구별해야 하는 서비스라면 양식과 서버 처리를 함께 설계해야 합니다.

화면 표시와 제출값 비교하기

전체 예제를 visit.html로 저장하고 테스트 주소 name@example.com을 사용하세요. 라디오 그룹을 고르지 않으면 필수 검증이 제출을 막고, 소식 받기는 선택 여부에 따라 데이터 목록이 달라집니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>방문 입력 유형 실습</title>
</head>
<body>
  <h1>방문 신청 연습</h1>
  <form id="visit-form" method="get">
    <p><label for="visit-email">이메일</label>
      <input id="visit-email" name="email" type="email" required></p>
    <p><label for="visit-day">방문일</label>
      <input id="visit-day" name="date" type="date" required></p>
    <p><label for="visit-quantity">수량</label>
      <input id="visit-quantity" name="quantity" type="number" min="1" step="1" value="1"></p>
    <fieldset>
      <legend>연락 방법</legend>
      <label><input type="radio" name="contact" value="email" required> 이메일</label>
      <label><input type="radio" name="contact" value="phone"> 전화</label>
    </fieldset>
    <p><label><input type="checkbox" name="news" value="yes"> 소식 받기</label></p>
    <button type="submit">입력값 확인</button>
  </form>
</body>
</html>

날짜를 고른 뒤 콘솔에서 document.getElementById("visit-day").value를 확인합니다. 예를 들어 2030년 5월 20일을 고르면 값은 2030-05-20 형태입니다. 표시되는 지역별 달력 모양과 서버에 보낼 값의 형식을 구분하세요. 소식 받기를 체크하거나 해제한 뒤 아래 명령으로 news 항목의 차이도 비교합니다.

Array.from(new FormData(document.getElementById("visit-form")).entries())

MDN date 입력의 값 형식

유형 선택 뒤에도 확인할 것

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

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