준비중..
06 form 데이터 주고 받기
# form 데이터 주고 받기
form 태그와 request 객체를 이용하여 데이터를 주고 받아 봅시다.
---
### 데이터 전송
웹서비스는 클라이언트와 서버로 구성되어있고, 이들은 요청과 응답이라는 방식으로 통신함을 배웠습니다. 이번 장에서는 클라이언트의 데이터를 웹서버로 전송하는 방법을 알아봅시다.
---
<a name="form-tag"></a>
### form 태그의 이해
form 태그는 클라이언트에서 서버로 데이터 전송을 위해 사용합니다. 폼 태그의 대표적인 사용 예로 로그인을 들 수 있습니다. 로그인을 위해 사용자는 아이디와 패스워드 서버로 전송해야 하는데 이때 폼 데이터를 이용합니다.
form 태그는 여러 속성을 가지고 있으나 이중 중요한 것은 아래의 두 속성입니다.
+ action: 수신 대상
+ method: 전송 방식
```
<form action="result.jsp" method="post">
...
</form>
```
위 코드를 예로 설명하면, form의 수신대상은 `result.jsp`이고, 전송방식은 `post`방식입니다. post 방식이란 무엇일까요?
---
<a name="method-get-post"></a>
### 전송방식: GET / POST
form에서의 전송방식은 두가지(**GET / POST**)가 존재합니다. 데이터를 쪽지에 적어서 보내는 것을 GET 이라고 한다면, POST는 보안가방 안에 데이터 쪽지를 담아서 전달하는 것이라 할 수 있습니다.
두 방식을 간단히 비교하면 아래와 같습니다.
| Method | 속 도 | 보 안 | 전송량 |
|:-------|:----:|:----:|:----------------|
| GET | 빠름 | 없음 | 제한적(255 Bytes) |
| POST | 느림 | 있음 | 제한 없음 |
그럼 form태그를 사용하여 데이터 전송을 실습해봅시다.
---
### 화면 설계
대략적인 화면을 설계해보았습니다.
### 화면 구현
설계를 토대로 페이지를 생성하였습니다.
`form.jsp`
```jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="result.jsp" method="post">
<label>이름: </label>
<input name="name" type="text"><br>
<label>이메일: </label>
<input name="email" type="text"><br>
<label>비밀번호: </label>
<input name="password" type="password"><br>
<input type="submit" value="전송">
</form>
</body>
</html>
```
`result.jsp`
```jsp
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>전달받은 데이터</h1>
<ul>
<li>이 름: <%= request.getParameter("name") %></li>
<li>이메일: <%= request.getParameter("email") %></li>
<li>비밀번호: <%= request.getParameter("password") %></li>
</ul>
</body>
</html>
```
---
### 실행결과
한글파일이 결과화면에 깨져서 나왔네요. (이문제는 추후에..)
---
### 핵심 키워드
+ [form 태그의 이해](#form-tag)
+ [전송방식: GET/POST](#method-get-post)
---
### Next..
로그인/로그아웃 페이지 구현하기