8. 사용자와의 커뮤니케이션을 위한 폼 태그

1. form - 사용자가 입력한 데이터를 수집하기 위해 사용되면 입력 양식 태그를 포함할 수 있다.

 

속성

action(value: URL) - 입력 데이터가 전송될 URL 지정

method(value: get/post) - 입력 데이터 전달 방식 지정

 

get/post는 HTTP 프로토콜을 이용해서 사용자 입력 데이터를 서버에 전달하는 방식을 나타내며 HTTP request method라고 한다.

 

GET

- 전송 URL에 입력 데이터를 쿼리 스트링으로 보내는 방식

예) http://tistory.com/posts?userId=1&id=1

전송 URL 바로 뒤에 '?'를 통해 데이터의 시작을 알려주고 key-value형태의 데이터를 추가한다.

1개 이상의 전송 데이터는 '&'로 구분한다

- URL에 전송 데이터가 모두 노출되기 때문에 보안의 문제가 있고 전송할 수 있는 데이터의 한계가 있다(최대 255자)

- REST API에서 GET 메소드는 모든 또는 특정 리소스의 조화를 요청한다.

 

POST

- POST 방식은 Request Body에 담아 보내는 방식

예)http://tistory.om/posts

- URL에 전송 데이터가 모두 노출되지 않지만 GET에 비해 속도가 느리다.

- REST API에서 POST 메소드는 특정 리소스의 생성을 요청

 

2. input - form 태그 중에서 가장 중요한 태그로 사용자로부터 데이터를 입력받기 위해 사용

 

type 속성 값

button, checkbox, color, date, datetime, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week

 

3. select - 복수개의 리스트에서 복수개의 아이템을 선택할 때 사용

서버에 전송되는 데이터는 select 요소의 name 속성을 키로, option 요소의 value 속성을 값으로 하여 key=value의 형태로 전송된다.

 

태그

select - select form 생성

option - option 생성

optgroup - option을 그룹화한다.

 

4. textarea - 여러 줄의 글자를 입력할 때 사용

 

5. button - 클릭할 수 있는 버튼을 생성 input 태그와 유사하지만 input 태그는 빈 태그인 반면 button 태그는 텍스트나 이미지 같은 콘텐츠를 사용할 수 있다.

 

type 속성은 반드시 지정하는 게 바람직하고 속성 값으로 button, reset, submit을 지정할 수 있다.

 

6. fieldset / legend

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