MDN 문서를 보고 정리한 내용입니다. 관련 속성 등 더 자세한 내용은 공식 문서를 참고하세요.
input 요소는 다양한 타입이 존재하고, 각 타입에 따라 사용자의 데이터를 받을 수 있는 다양한 대화형 컨트롤을 제공합니다. 이렇게 기본 제공되는 컨트롤은 디자인이 획일적이라 커스텀하는 경우가 있지만, 기본적으로 어떤 type 이 존재하고, 어떤 데이터를 받을 수 있는지 알아두면 좋습니다. (type 을 지정하지 않을 경우 기본값은 text)
button
- value 를 레이블로 사용하는 푸쉬버튼
checkbox
- 단일 값을 선택하거나 선택 해제할 수 있는 체크박스
color
- 색을 지정할 수 있는 컨트롤
date
- 날짜(연월일)를 지정할 수 있는 컨트롤
datetime-local
- 날짜와 시간을 지정할 수 있는 컨트롤
file
- 파일을 저장하는 컨트롤
hidden
- 보이지 않지만 값을 서버로 전송하는 컨트롤
image
- src 특성에 지정한 이미지로 나타나는 시각적 제출 버튼
month
- 연과 월을 지정할 수 있는 컨트롤
number
- 숫자를 입력하기 위한 컨트롤
password
- 값이 가려진 한줄 텍스트 필드
radio
- 같은 name 을 가진 여러개의 선택중 하나의 값 선택하는 라디오 버튼
range
- 값이 가려진 숫자를 입력하는 컨트롤, 클릭 드래그로 범위 설정하는 가로바 생성
reset
- 양식 내용을 디폴트 값으로 초기화하는 버튼
search
- 검색할 문자열을 입력하는 한줄 텍스트 필드
submit
- 양식을 전송하는 버튼
tel
- 전화번호를 입력하는 컨트롤
text
- 디폴트 값
time
- 시간값을 입력하는 컨트롤
url
- URL 입력하는 필드, 텍스트 입력처럼 보이지만 검증 매개변수 있음?
week
- 주, 년의 값을 구성하는 날짜 입력 컨트롤