한 줄 정답 — HTML <input>은 type 값으로 성격이 정해진다. 표준 type은 text, password, email, url, tel, search, number, range, date, time, datetime-local, month, week, color, checkbox, radio, file, hidden, submit, reset, button, image까지 22가지다. 입력 성격에 맞는 type을 고르면 모바일 키보드와 기본 검증이 알아서 따라온다.

핵심 요약#

  • type은 단순 모양이 아니라 입력 규칙이다. email은 형식 검증과 @ 키보드를, number는 숫자 키패드와 min/max를 자동으로 붙여 준다.
  • 표준 input type은 22가지. 아래 표에서 용도와 특징을 한눈에 본다.
  • type을 정한 다음엔 required·placeholder·pattern 같은 속성으로 검증과 힌트를 더한다.
  • date·color 같은 type은 최신 브라우저가 달력·색상 선택 UI를 직접 제공한다.

HTML input type 종류, type을 먼저 정해야 하는 이유#

폼이 어렵게 느껴지는 건 태그가 많아서가 아니라, <input> 하나가 type에 따라 완전히 다른 칸으로 바뀌기 때문이다. 그래서 첫 단추는 "이 칸에 무엇을 받을까"를 정해 type을 고르는 일이다.

type을 제대로 고르면 두 가지가 공짜로 따라온다. 하나는 모바일 키보드다. email은 @가 있는 자판, tel은 숫자 키패드가 뜬다. 다른 하나는 기본 검증이다. email은 형식이 틀리면 제출을 막고, number는 숫자만 받는다. 같은 칸을 전부 text로 만들면 이 둘을 직접 구현해야 한다.

<input>과 <label>을 어떻게 묶고 폼을 제출하는지부터 정리하려면 폼 기초 — form, input, label, button의 올바른 연결 글을 먼저 보면 이 글의 type 선택이 더 잘 붙는다.

텍스트 계열 — text, password, email, url, tel, search#

한 줄 글자를 받는 type들이다. 받는 내용이 무엇이냐에 따라 나뉜다.

  • text — 가장 일반적인 한 줄 입력. 특별한 검증이 없다.
  • password — 입력값이 점(●)으로 가려진다.
  • email — 이메일 형식을 검증한다. multiple을 주면 쉼표로 여러 개를 받는다.
  • url — URL 형식을 검증한다.
  • tel — 전화번호용. 형식 검증은 하지 않지만 모바일에서 숫자 키패드가 뜬다. 형식은 pattern으로 직접 건다.
  • search — 검색어 입력. 일부 브라우저는 지우기(×) 버튼을 붙여 준다.

날짜·시간 계열 — date, time, datetime-local, month, week#

<input type="date" name="birth" />
<input type="time" name="open" />
<input type="datetime-local" name="reserve" />
<input type="month" name="period" />
<input type="week" name="sprint" />

date는 연-월-일, time은 시:분, datetime-local은 둘을 함께 받는다. month는 연-월, week는 연-주차를 고른다. 최신 브라우저는 이 type들에 달력·시계 UI를 직접 띄워 주므로, 날짜 선택기를 별도 라이브러리로 만들지 않아도 되는 경우가 많다.

숫자·범위 계열 — number, range#

  • number — 숫자만 받고 위아래 스피너가 붙는다. min, max, step으로 범위와 증감 폭을 정한다.
  • range — 슬라이더로 값을 고른다. 정확한 숫자보다 "대략의 정도"를 받을 때 쓴다.

선택·색상·파일 계열 — checkbox, radio, color, file#

  • checkbox — 켜고 끄는 다중 선택. 여러 개를 동시에 체크할 수 있다.
  • radio — 같은 name으로 묶인 것 중 하나만 고른다.
  • color — 색상 선택기를 띄우고 #rrggbb 값을 돌려준다.
  • file — 파일 업로드. accept로 형식을, multiple로 다중 선택을 제어한다.

checkbox·radio·select 같은 선택 입력을 제대로 묶는 방법은 폼 심화 — select, textarea, checkbox, radio, fieldset/legend에서 이어서 다룬다.

버튼·숨김 계열 — submit, reset, button, image, hidden#

  • submit — 폼을 제출한다.
  • reset — 폼을 초기값으로 되돌린다.
  • button — 기본 동작이 없는 버튼. 보통 자바스크립트로 동작을 붙인다.
  • image — 이미지를 제출 버튼으로 쓴다.
  • hidden — 화면에 안 보이지만 값은 함께 전송된다(예: 글 ID).

input type 전체 한눈에 보기#

표준 <input> type 22가지를 용도와 특징으로 정리했다.

type받는 값특징
text한 줄 텍스트기본값. 검증 없음
password비밀번호입력이 ●로 가려짐
email이메일형식 검증, multiple 지원
url주소(URL)형식 검증
tel전화번호검증 없음, 모바일 숫자 키패드
search검색어일부 브라우저에 지우기 버튼
number숫자스피너, min/max/step
range범위값슬라이더
date날짜달력 UI
time시각시:분 선택
datetime-local날짜+시각시간대 없는 로컬 값
month연-월월 단위 선택
week연-주차주 단위 선택
color색상색상 선택기, #rrggbb
checkbox켬/끔다중 선택
radio택일같은 name끼리 그룹
file파일accept, multiple
hidden숨은 값화면에 안 보이고 전송됨
submit—폼 제출 버튼
reset—폼 초기화 버튼
button—기본 동작 없는 버튼
image—이미지형 제출 버튼

자주 쓰는 input 속성 모음#

type을 정했다면, 다음은 속성으로 검증과 사용성을 더한다. 폼을 만들 때 반복해서 쓰게 되는 것만 추렸다.

속성역할메모
name서버로 보낼 값의 키없으면 값이 전송되지 않음
value초기값/제출값버튼·hidden에서 특히 중요
placeholder빈 칸 힌트텍스트 계열에만
required필수 입력비면 제출 차단
pattern정규식 검증text·search·url·tel·email·password
min max step범위·증감number·range·날짜 계열
maxlength minlength글자 수 제한텍스트 계열
readonly읽기 전용값은 전송됨
disabled비활성화값이 전송 안 됨
multiple다중 입력email·file
accept허용 파일 형식file 전용 (image/* 등)
autocomplete자동완성on/off 또는 토큰
autofocus로드 시 포커스페이지당 하나만

readonly와 disabled는 비슷해 보이지만 결정적으로 다르다. readonly는 값을 함께 보내고, disabled는 값을 빼고 보낸다. 미리 채운 값을 그대로 제출하고 싶다면 readonly, 아예 무시하고 싶다면 disabled다.

다음은 type과 속성을 함께 쓴, 바로 복사해 쓸 수 있는 폼이다.

<form>
  <label>이메일
    <input type="email" name="email" placeholder="you@example.com" required />
  </label>

  <label>비밀번호
    <input type="password" name="pw" minlength="8" required />
  </label>

  <label>나이
    <input type="number" name="age" min="0" max="120" step="1" />
  </label>

  <label>전화번호
    <input type="tel" name="phone" pattern="[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}" placeholder="010-1234-5678" />
  </label>

  <input type="submit" value="가입" />
</form>

자주 묻는 질문#

Q. input type 종류는 모두 몇 개이고 어디서 확인하나요?

A. 표준 <input> type은 22가지입니다. 위의 "전체 한눈에 보기" 표가 그 목록이고, 공식 정의는 MDN의 input 문서에서 확인할 수 있습니다. 비표준이거나 사라진 type을 빼면 이 22개가 사실상 전부입니다.

Q. input의 date·email·number 같은 type은 직접 검증을 안 해도 되나요?

A. 기본 검증은 브라우저가 해 줍니다. email은 형식이 틀리면, number는 min/max를 벗어나면 제출을 막습니다. 다만 이 검증은 사용자 편의용이라 우회될 수 있으므로, 실제 저장 전에는 서버에서 한 번 더 검사해야 합니다.

Q. input 속성 모음 중에 거의 항상 챙겨야 하는 건 무엇인가요?

A. name과 required입니다. name이 없으면 입력값이 서버로 전송되지 않고, required는 빈 제출을 막는 가장 기본적인 검증입니다. 여기에 텍스트 칸이면 placeholder, 형식이 정해진 칸이면 pattern을 더하면 됩니다.

관련 글#

input의 type은 폼의 절반이다. 나머지 절반인 "구조와 연결"을 보면 폼이 한 덩어리로 정리된다.

더 알아보기#