HTML Form   폼 요소, form 요소

(2019-01-10)

폼, form, Input 요소, input type, Button 요소, Fieldset 요소

1. Form 요소서버와의 복잡한 상호작용을 가능케하는 사용자 인터페이스 구현 요소 
     - 여러 입력 양식을 만들기 위한 다양한 폼 컨트롤이 존재

  ㅇ 폼 컨트롤을 크게 다음과 같이 구분 가능
     - `입력` : 사용자 텍스트 입력을 위한 컨트롤
     - `선택` : 옵션 선택을 위한 컨트롤
     - `전송` : 서버측으로의 데이터 전송을 위한 컨트롤

  ㅇ form 요소 형식 : <form> ... </form>
     - 웹 페이지 내 폼 입력 양식을 지정하기 위한 범위를 줌

  ㅇ form 요소 속성
     - action 속성  : 서버 측 실행 프로그램을 지정함
     - accept-charset 속성 : 웹 문서 전체에 적용된 문자 세트와 다르게 폼 데이터 인코딩
     - enctype 속성 : 인코딩 형식을 지정함
        . enctype=`application/x-www-form-urlencoded` : (디폴트) 문자 형식
           .. 빈칸은 `+`로, 특수 문자는 ASCII HEX 코드 값으로 변환
        . enctype=`multipart/form-data` : 문자 이외 이진 파일 형식 (파일 업로드 등)
        . enctype=`text/plain` : 일반 텍스트 형식
           .. 빈칸은 `+`로 변환, 특수 문자에 대한 변환 없음
     - method 속성  : HTTP 요청 메소드(GET,POST 등)를 말함
     - name 속성    : 폼 이름을 나타냄. 자바스크립트와 같은 언어에서 이를통해 폼을 참조
     - novalidate 속성 : 사용자에게 굳이 입력 오류를 알리지 않고 그냥 서버측에 전송

  ㅇ form 요소 내 하위 요소들
     - input 요소, button 요소, label 요소, fieldset 요소 등


2. input (입력) 요소

  ㅇ 거의 대부분의 폼 컨트롤들이 지원됨

  ㅇ input 요소에서 type 속성 : <input type=... >
     - 기존 HTML 지원
        . 텍스트 입력    : text (텍스트), password (암호, `***`로 표시됨)
        . 선택 항목 입력 : checkbox (다중 선택), radio (단일 선택)
        . 파일명 입력    : file (파일명 입력 대화상자 나타남)
        . 버튼 형식 입력 : submit (입력 데이터 웹서버 전송), reset (초기화),
                               button (버튼)
     - HTML 5 지원
        . 숫자 입력 (특정 범위내)
           .. (직접 범위 지정) : number [min=최소값,max=최대값,step=간격,value=초기값]
           .. (슬라이더 형태)  : range
        . 색상 입력 : color
        . 이메일 주소 (자동 유효성 검사) : email
        . URL 입력 (자동 유효성 검사) : url
        . 전화번호 입력 : tel
        . 검색어 입력 : search, image, hidden
        . 캘린더 형식으로 선택 입력 가능
           .. date  : 날짜 (년 월 일)
           .. month : 월 (년 월)
           .. week  : 주 (년 몇번째주)
           .. time  : 시간 컨트롤 생성 입력
           .. datetime-local : 해당 지역의 날짜(년월일) 및 시간(시분초) 입력


3. 기타 요소들

  ㅇ Button 요소
     - 폼 컨트롤 일부를 지원하며, 클릭 가능한 요소
        . Form 요소의 input 과는 달리 요소 안에 컨텐츠,이미지 등도 들어갈 수 있음

     - Button 요소 속성
        . autofocus, disabled, form, formaction, formenctype, formmethod, formnovalidate,
 	  formtarget, name, type, value

  ㅇ label 요소
     - ...

  ㅇ fieldset 요소
     - 폼 내 관련 컨트롤들을 하나의 그룹으로 묶을 수 있음
     - 특정 form 과 fieldset 요소 사이에 관계를 명시적으로 연결시킬 수 있어서,
     - 심지어, fieldset 요소가 form 요소 밖에 있더라도 그 둘 사이의 관계를 연결지을 수 있음


[HTML 요소] 1. HTML 구성 요소 2. A 요소 3. Form 요소 4. HTML 기타 요소 5. html 속성

 
        최근수정     요약목록     참고문헌