HTML 입력 요소 치트시트

<input>은 type 하나로 텍스트 칸, 체크박스, 날짜 선택기, 버튼까지 완전히 다른 컨트롤이 된다. 알맞은 type을 고르면 브라우저가 형식 검증, 모바일 키보드, 선택 UI를 공짜로 제공한다. 폼과 input의 기본 문법은 HTML 기초와 HTML5 노트에 있고, 여기서는 입력 요소를 용도별로 모았다.

텍스트 입력

<input type="email" name="email" placeholder="hello@world.com" required />
<input type="number" name="age" min="0" max="120" step="1" />
<input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}" />

선택

선택 컨트롤 고르기

판단이 애매하면 실제 사용자에게 시험한다.

<input type="radio" name="flavor" value="chocolate" id="choco" />
<label for="choco">Chocolate</label>
<input type="radio" name="flavor" value="vanilla" id="vanilla" checked />
<label for="vanilla">Vanilla</label>
 
<input type="checkbox" name="fruit" value="apple" checked /> Apples
<input type="range" name="volume" min="0" max="100" value="65" />
<input type="file" name="avatar" accept="image/*" />

파일을 보내는 폼은 <form method="post" enctype="multipart/form-data">여야 한다.

날짜와 시간

화면에 보이는 형식(dd/mm/yyyy, AM/PM)은 브라우저와 OS 언어 설정을 따르지만, 전송되는 값은 항상 위의 ISO 형식이다. min·max로 선택 가능한 범위를 제한할 수 있다.

버튼

<input type="submit">보다 <button type="submit">이 아이콘 등 내용을 자유롭게 넣을 수 있어 더 많이 쓰인다. <button>의 기본 type이 submit이라서, 폼 안의 일반 버튼에는 type="button"을 꼭 적어야 의도치 않은 제출을 막는다.

숨김 값

type="hidden"은 화면에 보이지 않고 값만 폼과 함께 전송된다. 수정 중인 글의 ID, CSRF 토큰 같은 메타데이터를 실어 보낼 때 쓴다.

<input type="hidden" name="postId" value="42" />

사용자에게 안 보일 뿐 개발자 도구로 얼마든지 볼 수 있고 바꿀 수도 있다. 서버는 hidden 값을 믿지 말고 검증해야 한다. (CSRF 토큰은 웹 보안: CSRF와 XSS 참고)

input이 아닌 입력 요소

label

for와 input의 id를 연결하면 label을 눌러도 input이 선택되고, 스크린 리더가 label을 읽어 준다. input을 label 안에 넣어도 같은 효과다.

<label for="name">이름</label>
<input id="name" name="name" />
 
<label><input type="checkbox" name="dm" /> Open DM</label>

select와 option: 드롭다운

<select name="option">
  <option value="1">Option 1</option>
  <option value="2" selected>Option 2</option>
  <option value="3">Option 3</option>
</select>

multiple을 주면 여러 개를 고를 수 있다. 긴 선택지는 <optgroup label="...">로 제목 붙은 묶음으로 나눈다. 묶음 제목은 선택할 수 없고, <optgroup disabled>는 묶음 전체를 비활성화한다.

textarea: 여러 줄 입력

<textarea name="bio" rows="4" cols="40">hello,
follow @reactive_dude</textarea>

기본값은 value 속성이 아니라 태그 사이의 내용이다.

<textarea>는 기본으로 크기를 조절할 수 있다. 레이아웃을 지키려고 resize: none으로 막지 말고 resize: vertical로 세로만 허용한다. 내용에 맞춰 늘게 하려면 field-sizing: content가 있다(폼 스타일링).

fieldset과 legend: 관련 입력 묶기

<fieldset>
  <legend>User Profile</legend>
  <input name="username" placeholder="username" />
  <input name="bio" placeholder="bio" />
  <label><input type="checkbox" name="dm" /> Open DM</label>
</fieldset>

legend가 그룹의 제목이 되어 스크린 리더가 함께 읽어 준다. fieldset에 disabled를 주면 안의 입력이 한꺼번에 비활성화된다.

datalist: 입력 추천 목록

input의 list 속성과 datalist의 id를 연결하면, 자유롭게 입력할 수 있으면서도 미리 정한 후보를 추천해 준다. select와 달리 목록에 없는 값도 입력 가능하다.

<input list="browsers" name="browser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>

type 고르기: 쓸 곳과 피할 곳

지원하지 않는 type은 text로 대체되므로 써서 손해 볼 일은 거의 없다. 다만 type마다 맞는 쓰임이 있다.

입력 type과 함께 autocomplete(예: email, tel, bday, one-time-code)를 지정하면 브라우저 자동 완성이 정확해진다. 토큰 목록과 문법은 자동 완성과 autocomplete 토큰에 있다.

inputmode: 키보드만 바꾸기

type은 데이터 형식·검증·UI까지 바꾸고, inputmode는 가상 키보드 모양만 바꾼다. 검증을 바꾸지 않고 키보드만 맞추고 싶을 때 쓴다. 2021년 말부터 주요 브라우저가 모두 지원한다.

<input name="otp" inputmode="numeric" autocomplete="one-time-code">
<input name="amount" inputmode="decimal">

enterkeyhint: 엔터 키에 할 일을 적는다

inputmode가 키보드 종류를 정한다면 enterkeyhint는 엔터 키의 문구·모양을 정한다. 입력 요소와 contenteditable에 붙는다. 값은 enter, done, go, next, previous, search, send 일곱 가지뿐이고, 그 밖의 값은 무시된다. 검색창은 search, 여러 단계 폼의 중간 칸은 next, 마지막 칸은 done, 채팅 입력은 send처럼 다음에 일어날 일을 알린다.

<input type="search" enterkeyhint="search">
<input type="text" inputmode="numeric" enterkeyhint="next">

핵심 정리

• 값의 성격에 맞는 type을 고르면 검증, 모바일 키보드, 선택 UI를 브라우저가 대신 해 준다.
• radio는 같은 name으로 묶어야 하나만 선택된다.
• 날짜·시간 값은 화면 표시와 상관없이 ISO 형식으로 전송된다.
• <button>의 기본 type은 submit이다.
• hidden 값은 숨겨질 뿐 안전하지 않다.
• 모든 입력에는 label을 연결하고, 관련 입력은 fieldset으로 묶는다.

관련 노트: 더 나은 폼을 만드는 팁, 자동 완성과 autocomplete 토큰, 제약 검증: required·pattern·ValidityState, HTML 기초와 HTML5, 브라우저 기본 동작을 존중하기