input 모아보기
입력 관련
text
한 줄 짜리 텍스트 정의 (여러줄은 textarea)
password
비밀번호 필드로 값이 보여지지 않음
이메일 주소 입력필드 사용 (자동 유효성 검사와 모바일의 경우 .com 버튼이 추가되어 빠른 입력 가능
search
검색시 사용되며 일반 텍스트 필드처럼 작동
tel
전화번호 입력 필드
url
URL 링크 주소 포함 (자동 유효성 검사 가능, 스마트폰의 경우 이메일과 같이 .com 버튼으로 빠른 입력 지원)
버튼
button
일반 버튼 (추가 이벤트 핸들러로 활용 가능)
value 속성으로 버튼 내 삽입될 텍스트 지정이 가능하다.
submit
데이터 제출용 버튼
reset
모든 양식 기본 값으로 재설정 버튼
image
이미지를 제출 버튼으로 사용 가능
src 속성으로 이미지를 지정하여 활용가능
선택 관련
radio
한개 옵션만 선택 가능
button1 button2- input의 id값과 label의 for값이 동일하면 label 문구를 눌러도 선택가능
- input의 name값이 같은 것끼리 그룹으로 묶어 선택 가능
checkbox
0개 혹은 1개 이상의 옵션 선택 가능
button1
button2
- input의 id값과 label의 for값이 동일하면 label 문구를 눌러도 선택가능
- name 속성은 데이터에 전송되는 이름 값이다.
color
색상 선택기가 표시
number
허용되는 숫자 선택 가능
- min, max 속성으로 숫자 범위 제한이 가능
- value 속성으로 기본 시작 숫자 지정 가능
range
숫자 슬라이더 컨트롤로 조절 (볼륨버튼과 비슷)
- min, max 사용 가능 step 속성으로 범위 조절시 변경할 단위 설정이 가능
날짜 관련
date
날자 입력 필드 표시
- 다른 숫자와 마찬가지로 시작, 종료 날짜, 기본 설정 날자 지정이 가능하다.
datetime-local
날짜 및 시간 입력 필드 표시
month
월, 년도 선택가능
time
시간 선택 가능
week
주, 연도 선택가능
기타
file
파일 선택 및 업로드 가능
hidden
숨겨진 입력 필드 정의 (사용자 표시x)
속성
value 초기 값 지정시 사용
readonly 읽기 전용으로 수정, 입력 불가
disabled 비활성화로 수정, 입력 불가
size 입력 너비값 지정 기본값은 20
text, search, tel, url, email, password에서 작동
10
default
30
maxlength 입력 가능 최대문자 지정
10글자 가능 이후는 작성 불가
min max 숫자 관련 입력 유형에서 최소값, 최대값 지정
number, range, date, datetime-local, month, time, week 에서 사용
step 범위 이동시 간격 지정
number, range, date, datetime-local, month, time, week 에서 사용
multiple 여러개 입력시 사용
email, file 등 에서 사용 가능
pattern 유효성 검사가 가능한 정규식 지정 가능
placeholder 임시 텍스트로 예상 값 설명
value
placeholder
required 필수 입력임을 지정
text, search, url, tel, email, password, number, radio, file 등에서 사용
autofocus 페이지 로드시 가장 먼저 포커스 지정할 요소
autocomplete 양식 자동 완성 기능 사용여부
사용시 브라우저에서 값을 예상할 수 있다.
form, input, text, search, url, tel, email, password, time, color 등에서 사용할 수 있다.
