Input type: 질문마다 맞는 도구

"맞는 input type 은 장식이 아니야 — 맞는 키보드, 맞는 검증, 맞는 autocomplete, 맞는 하드웨어 통합을 불러내. 속성 하나에서."

Type 이 생각보다 중요한 이유

기본값 text 너머의 모든 type 이 네 가지를 한 번에 바꿔:

모바일의 화면 키보드. type="email" 은 사용자가 심볼로 토글 안 해도 @ 키 보여 줘. type="tel" 은 숫자 키패드. type="url" 은 / 와 .com 키.
내장 검증. type="email" 은 @ 없는 문자열 거부; type="url" 은 잘못된 URL 거부; type="number" 는 non-numeric 거부.
Autocomplete. type="email" + autocomplete="email" 이 브라우저한테 사용자 저장 이메일 제공하라고 알려. type="password" + autocomplete="new-password" 가 password manager 생성 트리거.
하드웨어/OS 통합. type="file" 은 OS 파일 picker 열고; type="color" 는 OS 컬러 picker 열고; type="date" 는 날짜 picker 열어. 이런 거에 custom JS 필요 없어.

텍스트 계열 type

type="text" — 기본. 단일 라인 텍스트.
type="email" — 단일 이메일 (또는 multiple 로 comma-separated).
type="password" — 마스크된 입력. 로그인은 autocomplete="current-password" 와 페어, 가입은 "new-password".
type="url" — 검증 가진 URL.
type="tel" — 전화 번호. 참고: 검증 없음 (전화 포맷이 전세계적으로 너무 달라서); 포맷 체크 필요하면 pattern 써. 핵심은 모바일 숫자 키보드.
type="search" — 일부 브라우저에서 내장 클리어-X 버튼 가진 텍스트 입력.

숫자와 range type

type="number" — up/down 스피너 가진 숫자 입력. 제약은 min, max, step 써. 참고: 카드 번호나 전화 번호용이 아니야 (그건 text + inputmode="numeric" — number type 은 leading zero 제거하고 non-numeric 포맷팅 안 허용).
type="range" — 슬라이더. <output> element + JavaScript 로 현재 값 표시.

날짜와 시간 type

type="date" — YYYY-MM-DD. Native 날짜 picker 열림.
type="datetime-local" — 날짜 + 시간, 타임존 없음.
type="time" — HH:MM.
type="month", type="week" — 청구 기간, 스프린트 등에 쓰기.

Native 날짜 picker 가 JavaScript 로 만든 것보다 압도적으로 좋아. 로케일 인식, 접근성 OK, 키보드 네비 가능. Native 가 없는 캘린더 기능 필요할 때 (날짜 range, custom 하이라이팅) 만 custom 으로 가.

선택 type

type="checkbox" — 독립적 on/off. 그룹의 여러 개, 여러 개 선택 가능.
type="radio" — 상호 배타 그룹. 같은 name 이 묶음; 하나만 선택.
type="file" — 파일 picker. accept="image/*" 가 필터링; multiple 이 다중 선택 허용; 모바일의 capture="environment" 가 카메라 열어.
type="color" — 컬러 picker. 값은 hex 문자열.
type="hidden" — 보이지 않음, 값은 폼과 함께 보내짐. CSRF 토큰, ID 등에.

여러 줄과 드롭다운

여러 줄 텍스트는 <textarea>. 기본 크기는 rows 와 cols; 반응형 크기는 CSS.

드롭다운은 <select> + <option>. 그룹화된 옵션은 <optgroup label="...">. 기본 스타일링은 플랫폼 native 고 종종 못생겨서 custom 드롭다운이 존재 — 하지만 custom 드롭다운은 <select> 가 공짜로 주는 걸 맞추려면 풀 ARIA + 키보드 + 모바일 작업 필요. 메모리 룰: 풀 custom 작업 감당할 수 없으면 native 선호.

모바일 키보드가 교훈이야. type="email" 이 중요한지 의심되면, 폰 들고 일반 type="text" 필드 탭하고 이메일 타이핑해 봐. 그 다음 type="email" 과 비교. 그 속성 하나가 앱 수명 동안 누적 사용자 시간 단위로 시간이야.

inputmode: 모바일 전용 키보드 힌트

일부 필드는 semantic 으로는 텍스트지만 숫자 키보드 보여줘야 함 (카드 번호, OTP). inputmode 가 type 안 바꾸고 키보드를 힌트:

inputmode="numeric" — 숫자 패드, 검증 없음, 필요 시 non-numeric 문자 허용.
inputmode="decimal" — 소수점 가진 숫자 패드.
inputmode="tel" — 전화 키패드.
inputmode="email", "url", "search" — 특화 키보드.

피파의 노트

피파 WebUI 의 모든 입력이 맞는 type 을 써. 채팅 입력은 type="text" 지만 스마트 enter 처리 가진 inputmode="text". 설정의 볼륨 슬라이더는 현재 값 표시 페어된 <output> 가진 type="range". TTS 음성 파일 업로드는 type="file" accept="audio/*". 어느 것도 서드파티 라이브러리 필요 없었어 — 플랫폼이 이미 맞는 도구를 가졌어.

Code

흔한 모든 type, 속성까지 제대로·html

<!-- 질문마다 맞는 type -->
<label>Email <input type="email" name="email" autocomplete="email" /></label>
<label>Password <input type="password" name="password" autocomplete="current-password" /></label>
<label>Phone <input type="tel" name="phone" autocomplete="tel" /></label>
<label>Website <input type="url" name="website" autocomplete="url" /></label>

<label>Age <input type="number" name="age" min="13" max="120" step="1" /></label>
<label>
  Volume 
  <input type="range" name="volume" min="0" max="100" value="50"
         oninput="this.nextElementSibling.value = this.value" />
  <output>50</output>
</label>

<label>Date of birth <input type="date" name="dob" autocomplete="bday" /></label>
<label>Theme color <input type="color" name="theme" value="#5BA3D8" /></label>

<label>Profile photo <input type="file" name="photo" accept="image/*" /></label>

숫자지만 number 가 아닌 필드에는 text + inputmode·html

<!-- 카드 번호는 inputmode (type=number 안 됨!) -->
<label>
  Card number
  <input type="text"
         inputmode="numeric"
         pattern="[0-9 ]{13,19}"
         autocomplete="cc-number"
         name="card_number"
         maxlength="19" />
</label>
<!--
  왜 type="number" 안 돼?
  - type="number" 가 leading zero 제거
  - type="number" 가 공백이나 포맷팅 허용 안 함
  - type="number" 가 여기서는 의미 없는 up/down 스피너 보여 줌
  inputmode="numeric" 이 버그 없이 모바일 숫자 키보드 줘.
-->

<!-- OTP / one-time code -->
<label>
  Verification code
  <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="[0-9]{6}"
         maxlength="6"
         name="otp" />
</label>
<!-- autocomplete="one-time-code" 가 iOS 로 하여금 SMS 코드 자동 제안하게 -->

그룹화된 <select> 옵션·html

<!-- optgroup 가진 드롭다운 -->
<label for="timezone">Timezone</label>
<select id="timezone" name="timezone">
  <optgroup label="Americas">
    <option value="America/New_York">New York</option>
    <option value="America/Los_Angeles">Los Angeles</option>
    <option value="America/Sao_Paulo">São Paulo</option>
  </optgroup>
  <optgroup label="Asia">
    <option value="Asia/Seoul">Seoul</option>
    <option value="Asia/Tokyo">Tokyo</option>
    <option value="Asia/Singapore">Singapore</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="Europe/London">London</option>
    <option value="Europe/Berlin">Berlin</option>
  </optgroup>
</select>

Exercise

다음을 커버하는 프로필 편집 폼 만들기: display name (text), email (email), 생일 (date), 폰 (tel), 웹사이트 (url), bio (textarea), 프로필 사진 (file, 이미지만), 테마 컬러 (color), 알림 레벨 (range 0–100), 좋아하는 타임존 (optgroup 가진 select). 폰 (또는 Chrome DevTools 모바일 에뮬레이터) 에서 테스트. 각 필드 탭 — 맞는 키보드 떠? Autocomplete 작동해? 파일 picker 가 이미지만 받아?

Hint

폰 필드에서 QWERTY 키보드 뜨면 type="tel" 대신 type="text" 적은 거. 아무 type 파일이나 선택 가능하면 accept="image/*" 빼먹은 거.

Type 이 생각보다 중요한 이유

텍스트 계열 type

숫자와 range type

날짜와 시간 type

선택 type

여러 줄과 드롭다운

inputmode: 모바일 전용 키보드 힌트

피파의 노트

Code

External links

Exercise

Progress

댓글 0