1. input (입력) 요소에서, type 속성
ㅇ input 요소에서 type 속성 : <input type=... >
ㅇ 거의 대부분의 폼 컨트롤들이 지원됨 ☞ 폼 요소 참조
- type 例) button, checkbox, color, datetime-local, date, email, file, hidden, image, month,
number, password, radio, range, reset, search, submit, tel, text, time, url, week
2. input (입력) 요소에서, 지원되는 (type=''), 폼 컨트롤 유형들
ㅇ 기존 HTML 지원
- 텍스트 입력
. text (텍스트)
. password (암호, `***`로 표시됨)
- 선택 항목 입력
. checkbox (다중 선택)
. radio (단일 선택)
- 파일명 입력
. file (파일명 입력 대화상자 나타남)
. [추가 속성 (Attribute)]
.. accept (MIME 타입)
.. capture
.. files
.. multiple (다수 파일 선택)
- 버튼 형식 입력
. submit (입력 데이터 웹서버 전송)
. reset (초기화)
. button (버튼)
- 쓰지 못함
. readonly (form 전송 가능)
. disabled (form 전송시 값이 전달되지 않음)
ㅇ HTML 5 지원
- 숫자 입력 (특정 범위내)
. (직접 범위 지정) : number [min=최소값,max=최대값,step=간격,value=초기값]
. (슬라이더 형태) : range
- 색상 입력 : color
- 이메일 주소 (자동 유효성 검사) : email
- URL 입력 (자동 유효성 검사) : url
- 전화번호 입력 : tel
- 검색어 입력 : search, image, hidden
- 캘린더 형식으로 선택 입력 가능
. date : 날짜 (년 월 일)
. month : 월 (년 월)
. week : 주 (년 몇번째주)
. time : 시간 컨트롤 생성 입력
. datetime-local : 해당 지역의 날짜(년월일) 및 시간(시분초) 입력
2. input (입력) 요소에서, 기타 속성
ㅇ 입력 내용에 대한 힌트 제공 : placeholder
- 폼 필드 값이 비어있으면, 좀더 밝은 회색 글씨체로 표시하며, 입력 힌트 제공
ㅇ 특정 폼 필드에 자동적으로 포커스를 줌 : autofocus
ㅇ 입력 필드가 비었으면 폼 전송 못함 : required
ㅇ 자동 완성 기능 : autocomplete
ㅇ 옵션 리스트 선택 기능 : list
- 옵션 리스트 내용은, datalist 요소 밑에 option value로써 넣어둠
1.
2.