1. input (입력) 요소
ㅇ 웹 폼(web form) 구현을 위한 폼 요소 내 하위요소 중 하나로써, ☞ 폼 요소 참조
- 사용자가 데이터를 입력할 수 있도록, 다양한 입력 동작 유형의 필드를 생성하는 데 사용
2. input (입력) 요소에서, type 속성 및 폼 컨트롤 유형들 (type='')
ㅇ type 속성
- 사용자가 입력할 수 있는 데이터의 종류를 지정
- input 요소 내 type 속성을 지정하는 문법 : <input type="폼 컨트롤 유형">
* 거의 대부분의 폼 컨트롤(입력 필드의 동작 유형)들이 지원됨
. 例) button, checkbox, color, datetime-local, date, email, file, hidden, image, month,
number, password, radio, range, reset, search, submit, tel, text, time, url, week
ㅇ (기존 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 (입력) 요소에서, 기타 속성
ㅇ 서버로 전송되는 값을 지정 : value
- 해당 체크박스가 체크되고, 폼이 제출되었을 때, value 속성에 지정된 값이 서버로 전송됨
ㅇ 입력 내용에 대한 힌트 제공 : placeholder
- 폼 필드 (입력칸) 값이 비었을때, 입력 힌트로써, 좀더 밝은 회색 글씨체로 표시됨
ㅇ 특정 폼 필드에 자동적으로 포커스를 줌 : autofocus
ㅇ 입력 필드가 비었으면 폼 전송 못함 : required
ㅇ 자동 완성 기능 : autocomplete
ㅇ 옵션 리스트 선택 기능 : list
- 옵션 리스트 내용은, datalist 요소 밑에 option value로써 넣어둠