<input>
input 요소는 사용자에게 데이터를 받을 수 있는 양식을 제공한다.
유형
text
디폴트 값. 한 줄 텍스트 필드. 다음 줄의 텍스트를 입력 값에서 제거된다.
password
암호 입력 한줄 텍스트 필드. 사이트가 안전하지 않을시 사용자에게 경고한다.
tel
전화번호 입력 텍스트 필드. 모바일이나 태블릿 장비에서는 동적 키패드와 숫자 키패드를 표시한다.
url
URL 입력 텍스트 필드. 텍스트 입력 필드처럼 보이지만 기본적인 유효성 검증을 한다.
이메일 주소 입력 텍스트 필드. 텍스트 입력 필드처럼 보이지만 기본적인 유효성 검증을 한다. 모바일이나 태블릿 장비에서는 이메일에 적합한 키보드가 표시된다.
number
숫자 입력 텍스트 필드. 텍스트 입력 필드처럼 보이지만 숫자를 키우고 낮출 수 있는 버튼이 표시되며 기본적인 유효성 검증을 한다. 모바일이나 태블릿 장비에서는 동적 키패드와 숫자 키패드를 표시한다.
search
검색어 입력 한 줄 텍스트 필드. 지원 브라우저에서 텍스트 필드를 비우기위한 삭제 아이콘이 포함된다. 모바일이나 태블릿 장비에서는 키보드에 Enter 대신 검색 아이콘이 표시된다.
hidden
보이지 않지만 값은 서버로 전송하는 컨트롤. 예제에 코드를 작성해놓았으나 숨겨놓아서 보이지 않는다.
date
날짜를 지정할 수 있는 컨트롤. 아이콘 클릭시 날짜 선택할 수 있는 달력을 보여준다.
datetime-local
날짜와 시간을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없다. 아이콘 클릭시 날짜 선택할 수 있는 달력과 시간 선택할 수 있는 시계를 보여준다.
month
연과 월을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없다. 아이콘 클릭시 년, 월 선택할 수 있는 달력을 보여준다.
week
년도와 몇째주인지 지정할 수 있는 컨트롤. 시간대는 지정할 수 없다. 아이콘 클릭시 년, 월, 주를 선택할 수 있는 달력을 보여준다.
time
시간을 지정할 수 있는 컨트롤. 시간대는 지정할 수 없다. 아이콘 클릭시 시간을 선택할 수 있는 시계를 보여준다.
checkbox
1개 이상의 항목을 선택하거나 선택 해제할 수 있는 체크박스.
checked
특성 값이 없는 불리언 특성. 기본적으로 체크가 되어있게 설정한다.
<input type="checkbox" checked>
이런식으로 사용한다.
radio
같은 name 값을 가진 여러개의 항목 중 하나의 항목을 선택할 수 있는 라디오 버튼.
checked
특성 값이 없는 불리언 특성. 기본적으로 체크가 되어있게 설정한다.
<input type="radio" checked>
이런식으로 사용한다.
image
src 특성에 지정한 이미지로 나타나는 시각적 제출 버튼. 이미지의 src를 입력하지 않으면 alt에 기재한 텍스트를 보여준다. alt 기본값 = 제출.
range
값이 가려진 숫자를 입력하는 컨트롤. 디폴트 값이 중간값인 범위 위젯으로 표시합니다. 접속사 min 와 max 사이에 사용되며 수용가능한 값의 범위를 정의합니다.
button
버튼. 기본 행동을 가지지 않으며 value의 기본값이 없으며, value로 레이블을 설정할 수 있다.
submit
양식을 전송하는 버튼. value의 기본값은 제출, value로 레이블을 설정할 수 있다.
file
파일을 지정할 수 있는 컨트롤.
accept
허용하는 파일 유형을 지정할 수 있다.
<input type="file" accept="image/png, image/jpeg">
이런식으로 사용한다.
유효한 파일 확장자를 입력(확장자 입력시 .(마침표)로 시작하며 대소문자 구분하지 않는다.)하거나 유효한 MIME 유형 문자열을 입력할 수 있다.
예: .jpg, .pdf, .doc , audio/* = “모든 오디오 파일”, video/* = “모든 비디오 파일”, image/* = “모든 이미지 파일”.
capture
어떤 카메라를 이용할지 지정할 수 있다.
capture 특성을 이용하지 않으면 사용자가 직접 선택할 수 있다.
multiple
특성 값이 없는 불리언 특성. 파일을 여러개 선택할 수 있다.
<input type="file" multiple>
이런식으로 사용한다.
webkitdirectory
특성 값이 없는 불리언 특성. 디렉토리만 선택할 수 있다.
✔️ 비표준 특성이므로 대안이 없을때만 사용을 권장한다.
multiple과 같이 사용하면 디렉토리를 여러개 선택할 수 있다.
<input type="file" webkitdirectory multiple>
이런식으로 사용한다.
color
색상 선택기를 열 수 있는 색상 선택 버튼.
reset
양식의 내용을 기본값으로 초기화하는 버튼. 권장하지 않는다.