[기술정리] HTML의 <input> 태그의 type

주요 타입

text

• 단일 행의 텍스트 입력 필드

• ex) 이름, 이메일 등 일반적인 텍스트 입력

<input type="text" name="username" placeholder="Enter your name">

password

• 비밀번호 입력 필드

• 입력값이 마스킹 처리됨

<input type="password" name="password" placeholder="Enter your password">

email

• 이메일 주소 입력을 위한 필드

• 브라우저에서 유효성 검사 제공

<input type="email" name="email" placeholder="Enter your email">

number

• 숫자 입력 필드

• 화살표 버튼으로 값 증감 가능

<input type="number" name="age" min="1" max="100">

tel

• 전화번호 입력 필드

<input type="tel" name="phone" placeholder="Enter your phone number">

url

• URL 입력 필드

• 브라우저에서 유효성 검사 제공

<input type="url" name="website" placeholder="Enter your website">

checkbox

• 체크 박스

<input type="checkbox" name="agree" value="yes"> I agree

radio

• 라디오 버튼

• 같은 이름을 가진 그룹에서 하나만 선택 가능

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

submit

• 폼 데이터 제줄하는 버튼

<input type="submit" value="Submit">

button

• 일반 버튼

• 동작은 JavaScript로 정의

<input type="button" value="Click me">

reset

• 폼 데이터를 초기화하는 버튼

<input type="reset" value="Reset">

file

• 파일 업로드를 위한 필드

<input type="file" name="upload">

hidden

• 사용자에게 표시되지 않는 숨겨진 입력 필드

<input type="hidden" name="userID" value="12345">

date

• 날짜 선택 필드

<input type="date" name="birthday">

time

• 시간 선택 필드

<input type="time" name="appointment">

datetime-local

• 날짜와 시간 입력

<input type="datetime-local" name="meeting">

color

• 색상 선택 필드

<input type="color" name="favcolor">

range

• 범위 입력 (슬라이더)

<input type="range" name="volume" min="0" max="100">

search

• 검색 입력 필드

• 특화된 검색 UI 제공

<input type="search" name="query" placeholder="Search...">