1. Form 요소
ㅇ 서버와의 복잡한 상호작용을 가능케하는 사용자 인터페이스 구현 요소
- 여러 입력 양식을 만들기 위한 다양한 폼 컨트롤이 존재
2. 폼 요소의 선언/지정
ㅇ form 요소의 범위 지정 : <form> ... </form>
- 웹 페이지 내 폼 입력 양식을 지정하기 위한 범위를 줌
ㅇ 한편, form 요소에 대한 자바스크립트 지원은,
- HTMLFormElement에 의함 ☞ MDN web docs (HTMLFormElement) 참조
3. 폼에 의한 제어(컨트롤) 가능 기능
ㅇ 폼에 의한 제어(컨트롤) 가능한 기능들을 크게 다음 3가지로 구분
- `입력` : 사용자 텍스트 입력을 위한 컨트롤
- `선택` : 옵션 선택을 위한 컨트롤
- `전송` : 서버측으로의 데이터 전송을 위한 컨트롤
4. 폼 요소에 부여 가능한 속성(Attribute)
ㅇ action 속성 : 서버 측 실행 프로그램을 지정함
- 만일, action 속성값이 빈 값("")이면, 현재 url을 대상으로 폼을 전송하게 됨
ㅇ accept-charset 속성 : 폼 데이터 만의 인코딩
- 웹 문서 전체에 적용된 문자 세트와는 달리, 폼 데이터 만의 인코딩
ㅇ enctype 속성 : 인코딩 형식을 지정함 ☞ 컨텐트 타입(Content-Type) 참조
- enctype=`application/x-www-form-urlencoded` : (디폴트) 문자 형식
. 이름과 값 쌍을 `=`로 묶고, 각 쌍(항목)을 `&`로 구분한 형태
. 알파벳,수치,별표,하이픈,마침표,언더스코어 6종 외에는 변환 필요 (RFC 1866)
. 例) 빈칸은 `+`로, 특수 문자는 ASCII HEX 코드 값으로 변환
- enctype=`multipart/form-data` : 문자 이외 이진 파일 형식으로, 복수개 전송 가능
. 파일 업로드 등에 사용 (RFC 1867,2854)
- enctype=`text/plain` : 일반 텍스트 형식 (거의 사용 안함)
. 빈칸은 `+`로 변환, 특수 문자에 대한 변환 없음, 개행으로 각 쌍(항목)을 구분
ㅇ method 속성 : HTTP 요청 메소드(GET,POST 등)를 말함 ☞ HTTP 메소드 참조
ㅇ name 속성 : 폼 이름을 나타냄
- 자바스크립트와 같은 언어에서는, 이 이름을 통해 폼을 참조
ㅇ novalidate 속성 : 사용자에게 굳이 입력 오류를 알리지 않고 그냥 서버측에 전송
5. 폼 요소 내 하위 요소들
ㅇ form 요소 내 하위 요소들의 종류
- input 요소, button 요소, label 요소, fieldset 요소, legend 요소, label 요소 등
ㅇ input 요소 ☞ 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
ㅇ Button 요소
- 폼 컨트롤 일부를 지원하며, 클릭 가능한 요소
. input 요소와는 달리, button 내 컨텐츠,이미지 등도 들어갈 수 있음
- Button 요소 속성
. autofocus, disabled, form, name, type (button|submit|reset), value
. formaction, formenctype, formmethod, formnovalidate, formtarget
※ [참고] 입력 양식을 설명하는 요소들
ㅇ 폼 내 컨트롤 그룹핑 : fieldset (그룹핑 기능), legend (그룹핑에 대한 제목)
- fieldset 요소
. 폼 내 여러 컨트롤들을 묶어 하나의 단일 그룹 컨트롤화 할 수 있음
. 특정 form 과 fieldset 요소 사이에 관계를 명시적으로 연결시킬 수 있어서,
. 심지어, fieldset 요소가 form 요소 밖에 있더라도, 이 둘 사이에 관계를 연결지을 수 있음
- legend 요소
. fieldset 내에서 만 사용 가능
. fieldset 요소로 폼 컨트롤 그룹핑한 곳에 대한 제목을 붙여줌
. (통상, fieldset 근처에 외곽선을 보여줌)
ㅇ 폼 내 요소별 레이블 컨트롤 : label 요소
- label 요소
. 폼 입력 태그 각각(input,textarea,select 등)에 대해 제목을 붙일 때 사용
. (input,textarea,select 등) 태그의 id 속성명과 (label) 태그의 for 속성명을 일치시킴
. 동작 : label 태그를 클릭하면, 해당 (input,textarea,select 등) 태그에 초점이 옮겨짐
. 용도 : 스크린리더,신체 마우스 등의 사용자에게 접근성 높은 폼 서식을 구현 가능