HTML Form   폼 요소, form 요소

(2019-05-21)

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

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


2. 폼 컨트롤

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


3. 폼 요소 형식,속성,하위요소

  ㅇ 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 요소 등


4. input (입력) 요소

  ㅇ 거의 대부분의 폼 컨트롤들이 지원됨
     - 例) button, checkbox, color, datetime-local, date, email, file, hidden, image, month,
           number, password, radio, range, reset, search, submit, tel, text, time, url, week

  ㅇ 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 : 해당 지역의 날짜(년월일) 및 시간(시분초) 입력


5. 기타 하위 요소들

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

     - Button 요소 속성
        . autofocus, disabled, form, name, type (button|submit|reset), value
        . formaction, formenctype, formmethod, formnovalidate, formtarget

  ㅇ label 요소
     - ...

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


[HTML 요소] 1. HTML 구성 요소/종류 2. 기본 구조 요소 (html,head,title,body 등) 3. a 요소 4. form 요소 5. img 요소 6. html 속성 7. 기타 요소

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