HTML 폼 입력 타입 치트시트 (input type 정리)
text, email, number, date, file 등 HTML input type과 폼 관련 속성(required·placeholder 등)을 용도별로 정리한 치트시트입니다.
input type 모음
| type | 용도 | 비고 |
|---|---|---|
text | 일반 텍스트 | 기본값 |
email | 이메일 | 형식 자동 검증 |
password | 비밀번호 | 입력 가림 |
number | 숫자 | min max step |
tel | 전화번호 | 모바일 숫자 키패드 |
url | URL | 형식 검증 |
date / time | 날짜 / 시간 | 달력 UI |
checkbox / radio | 다중 / 단일 선택 | |
file | 파일 업로드 | accept, multiple |
range | 슬라이더 | min max |
color | 색상 선택 | |
search | 검색어 |
<form>
<input type="email" name="email" placeholder="you@example.com" required />
<input type="number" name="age" min="0" max="120" step="1" />
<input type="file" accept="image/*" multiple />
<button type="submit">제출</button>
</form>
자주 쓰는 속성
| 속성 | 효과 |
|---|---|
required | 필수 입력 |
placeholder | 안내 문구 |
disabled / readonly | 비활성 / 읽기전용 |
pattern | 정규식 검증 |
autocomplete | 자동완성 힌트 |
maxlength | 최대 글자 수 |
label은 꼭 연결
<label for="nick">닉네임</label>
<input id="nick" name="nick" />
label의 for와 input의 id를 맞추면 라벨 클릭 시 입력란에 포커스되고, 스크린리더 접근성도 좋아집니다.
브라우저 기본 검증(
required,type="email"등)을 활용하면 JavaScript 없이도 기본적인 폼 유효성 검사를 할 수 있습니다.