[PoiemaWeb]폼 태그

1. form

• form 태그는 사용자가 입력한 데이터를 수집하기 위해 사용된다.
• input, textarea, button, select, checkbox, radio button, submit button 등의 입력 양식태그를 포함할 수 있다.
• submit button이 클릭되면 input 태그에 입력된 데이터가 form태그의 method 어트리뷰트에 지정된 방식으로
  action 어트리뷰트에 지정된 서버축의 처리 로직에 전달된다.

attribute	Value	Description
action	URL	입력 데이터(form data)가 전송될 URL 지정
method	get / post	입력 데이터(form data) 전달 방식 지정

  1.1. GET

• GET 방식은 전송 URL에 입력 데이터를 쿼리스트링으로 보내는 방식이다.
  예) http://jsonplaceholder.typicode.com/posts?userId=1&id=1
• 전송 URL 바로 뒤에 ‘?’를 통해 데이터의 시작을 알려주고, key-value형태의 데이터를 추가한다. 1개 이상의 전송 데이터는 ‘&’로 구분한다.
• URL에 전송 데이터가 모두 노출되기 때문에 보안에 문제가 있으며 전송할 수 있는 데이터의 한계가 있다. (최대 255자).
• REST API에서 GET 메소드는 모든 또는 특정 리소스의 조회를 요청한다.

  1.2. POST

• POST 방식은 Request Body에 담아 보내는 방식이다.
  예) http://jsonplaceholder.typicode.com/posts
• URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다.
• REST API에서 POST 메소드는 특정 리소스의 생성을 요청한다.

2. input

• input태그는 form태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용된다.
• input태그는 type어트리뷰트에 의해 구분된다. 
• 서버에 전송되는 데이터는 name어트리뷰트를 키로, value어트리뷰트를 값으로하여 key = value의 형태롤 전송된다.

 

type 어트리뷰트 값	Description	HTML5 추가	IE	FF	CR	SF	OP
button	버튼 생성		◯	◯	◯	◯	◯
checkbox	checkbox 생성		◯	◯	◯	◯	◯
color	컬러 선택 생성	◯	X	◯	◯	X	◯
date	date control (년월일) 생성	◯	X	X	◯	◯	◯
datetime	date & time control (년월일시분초) 생성. HTML spec에서 drop되었다.	◯	X	X	X	X	X
datetime-local	지역 date & time control (년월일시분초) 생성	◯	X	X	◯	◯	◯
email	이메일 입력 form 생성. subumit 시 자동 검증한다.	◯	◯(10~)	◯	◯	X	◯
file	파일 선택 form 생성		◯	◯	◯	◯	◯
hidden	감추어진 입력 form 생성		◯	◯	◯	◯	◯
image	이미지로 된 submit button 생성		◯	◯	◯	◯	◯
month	월 선택 form 생성	◯	X	X	◯	◯	◯
number	숫자 입력 form 생성	◯	◯(10~)	◯	◯	◯	◯
password	password 입력 form 생성		◯	◯	◯	◯	◯
radio	radio button 생성		◯	◯	◯	◯	◯
range	범위 선택 form 생성	◯	◯(10~)	◯	◯	◯	◯
reset	초기화 button 생성		◯	◯	◯	◯	◯
search	검색어 입력 form 생성	◯	X	X	◯	◯	X
submit	제출 button 생성		◯	◯	◯	◯	◯
tel	전화번호 입력 form 생성	◯	X	X	X	X	X
text	텍스트 입력 form 생성		◯	◯	◯	◯	◯
time	시간 선택 form 생성	◯	X	X	◯	◯	◯
url	url 입력 form 생성	◯	◯(10~)	◯	◯	X	◯
week	주 선택 입력 form 생성	◯	X	X	◯	◯	◯

3. select

• 복수개의 리스트에서 복수개의 아이템을 선택할 떄 사용한다.
• 서버에 전송되는 데이터는 select요소의 name어트리뷰트를 키로, option요소의 value어트리뷰트를 값으로 하여
  key = value의 형태로 전송된다.

tag	Description
select	select form 생성
option	option 생성
optgroup	option을 그룹화한다

 

4. textarea

 

5. button

• button태그는 클릭할 수 있는 버튼을 생성한다. <input type = "button">과 유사하지만 input태그는 빈 태그인 반면
  button태그는 그렇지 않다. 따라서 button 요소에는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다.
• type어트리뷰트는 반드시 지정하는 것이 바람직하며 어트리뷰트값으로 button, reset, submit를 지정할 수 있다.
• button태그는 어트리뷰트만을 받아들이는 input태그와 달리 콘텐츠로 문자열은 물론 HTML요소를 받을 수도 있다는
  장점이 있다.

 

6. fieldset / legend

• fieldset태그는 관련된 입력 양식들을 그룹화할 때 사용된다.
• legend태그는 fieldset태그 내에서 사용되야 하며 그룹화된 fieldset의 제목을 정의한다.