input 태그 타입 정리

라용·2022년 10월 19일
0

MDN 문서를 보고 정리한 내용입니다. 관련 속성 등 더 자세한 내용은 공식 문서를 참고하세요.

input 요소는 다양한 타입이 존재하고, 각 타입에 따라 사용자의 데이터를 받을 수 있는 다양한 대화형 컨트롤을 제공합니다. 이렇게 기본 제공되는 컨트롤은 디자인이 획일적이라 커스텀하는 경우가 있지만, 기본적으로 어떤 type 이 존재하고, 어떤 데이터를 받을 수 있는지 알아두면 좋습니다. (type 을 지정하지 않을 경우 기본값은 text)

button - value 를 레이블로 사용하는 푸쉬버튼
checkbox - 단일 값을 선택하거나 선택 해제할 수 있는 체크박스
color - 색을 지정할 수 있는 컨트롤
date - 날짜(연월일)를 지정할 수 있는 컨트롤
datetime-local - 날짜와 시간을 지정할 수 있는 컨트롤
email - 이메일 주소를 편집하는 필드, 텍스트 입력 필드와 비슷하지만 유효성 검증 매개변수가 존재(이메일만 입력가능한?)
file - 파일을 저장하는 컨트롤
hidden - 보이지 않지만 값을 서버로 전송하는 컨트롤
image - src 특성에 지정한 이미지로 나타나는 시각적 제출 버튼
month - 연과 월을 지정할 수 있는 컨트롤
number - 숫자를 입력하기 위한 컨트롤
password - 값이 가려진 한줄 텍스트 필드
radio - 같은 name 을 가진 여러개의 선택중 하나의 값 선택하는 라디오 버튼
range - 값이 가려진 숫자를 입력하는 컨트롤, 클릭 드래그로 범위 설정하는 가로바 생성
reset - 양식 내용을 디폴트 값으로 초기화하는 버튼
search - 검색할 문자열을 입력하는 한줄 텍스트 필드
submit - 양식을 전송하는 버튼
tel - 전화번호를 입력하는 컨트롤
text - 디폴트 값
time - 시간값을 입력하는 컨트롤
url - URL 입력하는 필드, 텍스트 입력처럼 보이지만 검증 매개변수 있음?
week - 주, 년의 값을 구성하는 날짜 입력 컨트롤

profile
Today I Learned

0개의 댓글