05/21 HTML5_WebForm

지난 시간에는 HTML 태그외의 추가적인 태그들을 다뤄봤습니다

Iframe 태그

Div/Span 태그

Multimedia 태그

또한, HTML5 문서의 구조를 다뤄봤습니다

이번시간에는 WebForm 를 다뤄보겠습니다.

사용자가 입력한 데이터를 받기 위한 인터페이스

로그인, 검색, 예약, 등록, 쇼핑 등등

서치를 하기 위한 입력양식을 만드는 것입니다.

Form을 구성하는 원소

webform을 만드는 다양한 테그들이 존재합니다.

<input>, <textarea>,  <select> 등이 있습니다.

① 입력 양식에 데이터를 채워서 서버로 보낸다

② 서버는 입력 양식을 받아서 JSP와 같은 서버 스크립트로 보낸다

③ JSP는 입력 데이터를 처리하여서 새로운 웹페이지를 생성한다.

④ 입력에 대한 응답으로 새로운 웹페이지가 전달된다.

1. form tag : Web Form을 만들기 위한 태그

name, action, method, type, name 속성이 있다.

action은 "웹 프로그램 페이지" 혹은 특정 서버를 정의하는 곳이다. (ASP, PHP, JSP...)

method는 웹 서버와 클라이언트 사이에 통신 방법을 설명한다. (GET, POST)

type은 폼의 기능과 모양을 정한다

name은 폼의 이름을 정한다.

method의 GET 방식

- 입력창에 값을 입력한 후 URL뒤에 파라미터를 추가하여 보내는 방식이다.

- 유저에게 보내진 데이터가 이름과 값을 합친 형태 그리고 이름과 값이 '&'기호로 분류된다.

- 최대 2048 문자를 서버로 보낼 수 있다.

- URL을 보면 클라언트가 서버로 보내느 정보를 볼 수 있다.

Security problem

<form name"INPUT1" action="page.jsp method="get">

<input type="text" name="user">

<input type="text" name="dept">

<input type="submit" value="전송">

<input type="reset" value="다시작성">

</form>

서비스는 user와 dept라는 매개변수를 받아서 처리하는 프로그램입니다.

method의 POST방식

- HTTP Request header에 파라미터를 붙여서 보내는 방식이다.

- 최대 제한이 없다.

- get 방식의 보안문제를 해결한다.