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 속성
  1.   기술공통
  2.   기초과학
  3.   진동/파동
  4.   방송/멀티미디어/정보이론
  5.   전기전자공학
  6.   통신/네트워킹
        1. 통신 이란?
        2. 신뢰적 통신
    1.   통신이론
    2.   선로/전송
    3.   통신망 일반
    4.   회선교환(PSTN)
    5.   무선/이동통신
    6.   광통신
    7.   인터넷/데이터통신
          1. 데이터통신망
          2. 인터넷
          3. 데이터 네트워크 설계
      1.   데이터 단위
      2.   프로토콜/계층
      3.   데이터 링크
      4.   TCP/IP
      5.   라우팅
      6.   인터넷 QoS
      7.   인터넷 관리
      8.   인터넷 응용
        1.   NetBIOS
        2.   DNS
        3.   가상단말
        4.   FTP
        5.   전자메일
        6.   VoIP
        7.   웹기술
              1. 웹 이란?
              2. 하이퍼텍스트
          1.   웹 구성
          2.   HTTP
          3.   웹 페이지
            1.   마크업 언어
                  1. 마크업 언어
                  2. SGML
                  3. DTD
              1.   HTML
                    1. HTML
                    2. HTML 용어
                    3. DHTML
                    4. HTML5
                1.   HTML 요소
                  1.   1. HTML 구성 요소
                      2. A 요소
                      3. Form 요소
                      4. HTML 기타 요소
                      5. html 속성
              2.   XML
            2.   DOM,BOM
            3.   기능 요소
            4.   웹 디자인
          4.   웹 식별
          5.   웹 서비스
          6.   차세대 웹
          7.   웹기술 기타일반
        8.   VPN
        9.   무선인터넷
        10.   전자상거래
        11.   개인 컨텐츠
        12.   인터넷 기타 응용
      9.   인터넷 기타
      10.   패킷교환(PSN)
      11.   인터넷 관련 기관
  7.   정보기술(IT)
  8.   공업일반(기계,재료등)
  9.   표준/계측/품질
  10.   기술경영

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