폼이란?
HTML 폼 은 사용자와 웹 사이트 또는 어플리케이션이 서로 상호 작용하기 위한 기술 중 하나이다.
폼은 사용자가 웹 사이트에 데이터를 전송할 수 있게 한다.
일반적으로 웹 서버로 데이터를 전송하지만, 웹 페이지 내 필요한 데이터를 위해 전송할 수도 있다.
HTML 폼은 하나 이상의 위젯들로 형성될 수 있으며, 이러한 위젯들은 텍스트 필드, 셀렉트 박스, 버튼, 체크 박스, 라디오 버튼 등이 있다.
위젯(widget)
사전적 의미로 "소형 장치" 또는 "요소"를 뜻 한다.
컴퓨터 프로그래밍에서는 사용자가 웹 사이트 및 어플리케이션과 상호작용을 하기위한 인터페이스 요소이다.
위젯들을 사용하여, 그래픽 사용자 인터페이스(Graphical User Interface, GUI)를 만들 수 있다.
폼 구성 방법
폼은 HTML 중 복잡한 구조를 지닌 요소 중 하나이다.
폼을 구성할 땐 구조화를 하는 것이 중요한 데, 그 이유는 접근성을 향상시킬 수 있기 때문이다.
폼 구성 시 사용되는 HTML 요소와 각 속성들은 다음과 같다.
HTML 요소
요소 설명 사용자가 정보를 웹 서버로 전송할 수 있도록 상호작용하는 요소를 포함하는 문서의 부분 폼 안에 여러 폼 요소들을 그룹화 하는데 사용 상위 요소인 컨텐트를 위한 캡션을 나타내는데 사용 사용자 인터페이스 항목에 대한 캡션을 나타내는 데 사용 대화형 컨트롤 폼들을 생성하는데 사용 다중 라인, 일반 텍스트 편집이 필요한 컨트롤을 나타내는데 사용 옵션 메뉴를 제공하는 컨트롤을 나타내는데 사용 , , 요소 안에 항모을 나타내는 컨트롤을 생성하는데 사용 요소 안에 있는 옵션 그룹을 생성하는데 사용 < datalist > 다른 폼 요소의 값에 대한 가능한 옵션들을 나타내는 요소의 집합을 표시하는데 사용 < button > 클릭할 수 있는 버튼을 나타내는데 사용 < keygen > 쉽게 키 데이터를 생성하고, 공개키 전송이 필요할 시 사용 < meter > 알려진 범위나 분수 값 내에서 차지하는 크기와 같은 비율을 나타내는데 사용 완료까지 남은 작업 진행 상태를 나타내는데 사용 < output > 계산 결과를 나타내는데 사용
HTML 속성
속성명 태그 설명 accept , 서버가 받는 형식 목록, 일반적으로 file 형식을 사용 accept-charset 승인된 문자 세트(accepted character set encoding)을 지정할 때 사용 action 폼을 통해서 전송 정보를 처리하는 프로그램의 URL autocomplete , 해당 요소에서 자동 완성 기능을 사용할 지 여부 설정 autofocus ,
,
페이지가 로드될 때, 자동으로 포커스가 해당 요소로 이동 challenge 공개 키(public key)와 함께 전송되는 문자열 checked 해당 요소가 페이지가 로드될 때 체크된 상태로 나타나도록 설정 cols textarea의 세로줄 수를 설정 dirname , 폼 데이터가 서버로 제출될 때 서버로 보낼 입력 필드의 텍스트 방향성(text directionality)을 저장할 이름을 명시함 disabled ,
, 사용자가 요소와 상호 작용 할 수 있는지를 설정 encrype POST방식으로 전송되는 데이터의 타입을 설정 for 라벨과 관련된 컨트롤을 지정할 시 사용 form
해당 요소가 속해 있는 폼을 명시적 관계를 연결할 시 사용 high keytype list 요소에서 사용하기 위해 미리 정의해 놓은 요소를 명시 low max
해당 요소의 최댓값 설정 maxlength 요소에서 허용되는 최대 문자수를 설정 method 클라이언트와 서버 간 데이터를 전달 시 HTTP 메소드(GET/POST)를 설정 min 해당 요소의 최솟값 설정 multiple 해당 요소에 사용자가 둘 이상의 값을 입력이 필요할 시 설정 name
스크립트에서 폼 참조 시 필요한 요소의 이름 설정 novalidata 서버로 보낼 때 데이터를 체크하지 않는 유효성 미확인을 지정할 때 사용 optimum pattern 요소 내의 정규 표현 패턴을 지정 placeholder readonly 해당 요소의 입력 필드가 수정이 불가한 읽기 전용일 시 사용 required
폼 데이터(form data)가 서버로 제출 되기 전, 반드시 채워져 있어야 하는 입력 필드 설정 rows selected size 해당 요소의 너비를 문자수(in characters) 단위로 명시 src 요소의 type 속성값이 "image" 일 때 이미지의 URL을 설정 step 요소에 입력할 수 있는 숫자들 사이의 간격을 설정 target type 해당 요소가 나타낼 타입을 설정 value
요소의 초기 설정값을 설정 wrap
...
요소는 폼의 형태와 동작을 결정하는 속성을 정의한다.
폼 사용시 주의사항은 폼 안에 다른 폼을 중첩하면 안된다는 것이다.
폼의 중첩사용을 한다면 데이터 전송 시 예상치 못한 방식으로 작동될 가능성이 있다.
요소 외부에서 양식 컨트롤을 사용하는 것이 가능하다.
요소는 폼 필드 세트(form field set)를 표시한다.
폼 필드 세트란 폼 내에서 관련있는 위젯들을 하나의 그룹으로 지정하는 것을 의미한다.
폼 필드 세트를 사용하면 폼을 효과적으로 계층화 할 수 있다는 장점이 있다.
영역에 테두리 선이 생성된다.
요소는 요소의 제목을 표시할 때 사용한다.
음료 사이즈 Small Medium Large
요소는 위젯의 제목이나 이름을 표시할 시 사용한다.
for 속성값에 결합하고자 하는 요소의 id 속성값을 입력하여 다른 요소와 결합할 수 있다.
요소는 사용자로부터 입력을 받을 수 있는 입력 필드(input filed)를 표시할 때 사용한다.
요소의 type 속성값을 달리함으로 여러 가지 컨트롤을 표시할 수 있다.
요소는 사용가 여러 줄의 텍스트를 입력할 수 있는 텍스트 입력 영역을 표시할 때 사용한다.
요소는 옵션 메뉴를 제공하는 드롭다운 리스트(drop-down list)를 표시할 때 사용한다.
요소를 통해 드롭다운 리스트에서 사용되는 각각의 옵션을 정의할 수 있다.
요소는 드롭다운 리스트(drop-down list)에서 사용되는 하나의 옵션을 정의할 때 사용한다.
요소, 요소 내부에 위치된다.
요소는 드롭다운 리스트(drop-down list)에서 옵션의 개수가 많아질 때, 옵션끼리 각각의 그룹으로 묶어주어 사용자가 쉽게 드롭다운 리스트를 사용할 수 있도록 한다.
옵션1 옵션2 옵션3 옵션4 옵션5
요소는 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의하기 위해 사용한다.
사용자가 요소에 데이터를 입력할 때, 미리 정의된 옵션을 드롭다운 리스트로 보여줌으로써 자동완성 기능을 제공할 수 있다.
요소의 list 속성값으로 요소의 id 속성값을 명시하면, 해당 요소에서 미리 정의한 옵션들을 요소에서 사용할 수 있다.
학과 : 이름 : 제출하기
학과 :
이름 :
제출하기
output
작동원리
내용
예시
장점과 단점
장점
단점
참고자료
Mozilla -
Mozilla - 나의 첫 HTML 폼
Mozilla - HTML 폼 구성 방법
Mozilla - 기본 폼 위젯
Mozilla - HTML 폼 스타일
Mozilla - HTMl 폼을 위한 고급 스타일
Mozilla - 폼 위젯을 위한 호환성 테이블 속성
Mozilla - 데이터 주고 받기
Mozilla - 데이터 유효성 검사
Mozilla - 사용자 폼 위젯 만드는 방법
Mozilla - 자바스크립트를 통해서 폼 전달 하기
Mozilla - FormData 객체 사용
Mozilla - 기존 브라우저에서 HTMl 폼
W3schools - HTML form
WEBDIR - 폼 요소
http://www.tcpschool.com/html-tags/label
from http://mystudy.tistory.com/26 by ccl(A) rewrite - 2021-12-21 18:26:45