사용자 의견이나 정보를 알기 위해 입력할 큰 틀을 만드는 데 사용.
입력된 데이터를 한 번에 서버로 전송.
전송한 데이터는 웹 서버가 처리, 결과에 따른 또 다른 웹 페이지를 보여준다.
1. Form tag 동작방법
-1. 폼이 있는 웹 페이지방문
-2. 폼 내용 입력
-3. 폼 안에 있는 모든 데이터를 웹 서버로 보낸다.
-4. 웹 서버는 받은 폼 데이터를 처리하기 위해 웹 프로그래으로 넘긴다.
-5. 웹 프로그램은 폼 데이터를 처리한다.
-6. 처리결과에 따른 새로온 html 페이지를 웹 서버에 보낸다.
-7. 웹 서버는 받은 html 페이지를 브라우저에 보낸다.
-8. 브라우저는 받은 html 페이지를 보여준다.
2. Form tag 속성
action : 폼을 전송할 서버 쪽 스크립트 파일을 지정
name : 폼을 식별하기 위한 이름을 지정
accept-charset : 폼 전송에 사용할 문자 인코딩 지정
target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정
method : 폼을 서버에 전송할 http 메소드 지정 (GET or POST)
폼 태그 속성 지정의 예
GET 방식 : 폼 데이터를 URL 끝에 붙여서 눈에 보이게 보냄.
- 데이터가 외부에 노출되어 보안에 취약. / 지정된 리소스에서 데이터를 요청하는 경우인 읽을 때 사용
POST 방식 : 내부적으로 보이지 않는다.
- 보내려는 데이터가 개인정보나 보안을 해야 하는 경우에 사용. / 지정된 리소스에서 데이터를 처리할 경우인 쓰고, 수정, 삭제시에 사용
GET 방식과 POST 방식에 대한 정보
http://www.w3schools.com/tags/ref_httpmethods.asp
3. Form을 구성하는 다양한 Element
(1) 폼 엘리먼트 그룹 <field>, <legend> tag
<fieldset> 태그는 폼 태그 안에 관련 있는 폼 엘리먼트들을 그룹화할 때 사용.
<fieldset> 태그 하위에 <legend> 태그를 사용하여 그룹화한 폼 엘리먼트들을 목적에 맞게 이름 지정.
(2) 다양한 모양을 가진 <input> tag
type : 태그 모양을 다양하게 변경. <text> <radio> <checkbox> <password> <button> <hidden> <fileupload> <submit> <reset>
name : 태그 이름 지정
readonly : 읽기 전용
maxlength : 해당 태그 최대 글자 수 지정
required : 해당 태그가 필수태그로 지정. 필수 태그 입력하지 않고, submit 버튼을 누르면 에러 발생
autofocus : 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동
placeholder : 태그에 입력할 값에 대한 힌트 부여
pattern : 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용
(3) 목록태그 <select> <optgroup> <option>
<select>는 항목을 선택할 수 있는 태그. 속성 중에 size와 multiple 속성이 있음
- size : 한 번에 표시할 항목 수 (기본값 4)
- multiple : 다중선택을 허용할 것인지를 지정
<optgroup>는 <select> 태그 안에서 목록들을 그룹화 label 속성을 사용하여 그룹 이름 지정.
<option>은 <optgroup>태그 하위에 있음. 목록을 나타내는 태그
(4) 여러 줄 글상자 <textarea>
- 여러 줄을 입력받는 태그. 속성 중에 rows(줄) 와 cols(한 줄에 입력될 크기 지정)가 있음
4. HTML5에서 추가된 엘리먼트
(1) 입력 값 후보 <datalist> - 텍스트 상자에 입력 값 후보 목록을 지정할 경우 사용.
<datalist> 태그 id 값을 <input> 태그 list 속성값으로 지정하여 텍스트 박스 아래 그룹리스트로 출력.
(2) <input> 태그의 date
- 날짜를 입력받기 위한 속성값. 달력도 함께 표시된다. 이 값이 서버 프로그램에 전달되면 자바 date 객체에 데이터가 전달
(3) <input> 태그의 number와 range
- 숫자를 입력할 때 사용. range 태그는 슬라이더 형태의 UI로 렌더링. min, max 사용하여 값 범위 지정.
(4) <input> 태그의 color
- 색상을 입력받을 때 사용. color 타입은 아직 모든 웹 브라우저에서 지원하진 않음. Color Picker 형태의 UI로 렌더링
5. Form Tag 공부는...
http://www.nextree.co.kr/p8428/
- 감사합니다. 덕분에 공부 잘 했습니다.
2018.07.26 - ino