HTML Form   폼 요소, form 요소

(2022-02-11)

폼 , form , Button 요소, Fieldset 요소, enctype 속성, x-www-form-urlencoded


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 등) 태그에 초점이 옮겨짐
        . 용도 : 스크린리더,신체 마우스 등의 사용자에게 접근성 높은 폼 서식을 구현 가능

form 요소
   1. form 요소   2. Input 요소  


Copyrightⓒ written by 차재복 (Cha Jae Bok)               기술용어해설 후원
"본 웹사이트 내 모든 저작물은 원출처를 밝히는 한 자유롭게 사용(상업화포함) 가능합니다"