#05. FE - form 데이터 보내기

<5. form 데이터 보내기>

참고: [boostcourse full-stack] http://www.edwith.org/boostcourse-web

* form 태그를 사용한 html

form 태그를 사용해서 사용자 입력을 받을 수 있음! 브라우저는 form 태그를 사용해서 사용자 입력을 받으면 이를 쉽게 전송해준다.

<form action="/join" method="post">
    <div class="inputWrap">
        <div class="email">
            <span> Email </span> <input type="text" name="email"><br/>
        </div>
        <div class="password">
            <span> Password </span> <input type="password" name="password"><br/>
        </div>
    </div>
    <input class="sendbtn" type="submit">
</form>

위 예제코드처럼 input 태그를 사용해서 값을 입력받을 수 있으며, input 태그의 type에 따라서 다양한 입력을 받을 수가 있다.

 

- 서버로 전송되는 방법

• input type이 submit (혹은 button type이 submit) 인 엘리먼트가 있을 경우, 해당 엘리먼트를 클릭하거나 다른 폼 엘리먼트 요소에서 엔터를 치면 form에 입력한 정보가 자동으로 서버로 넘어간다.

- 어디로 전송 되는지

• form태그의 action 속성에 적어준 곳으로 전송된다.

- 어떤 값이 전송 되는지

• Input 데이터가 합쳐져서 서버로 전송 된다. (POST방식과 GET방식)

---

* get방식과 post방식

form으로 전송하는 데이터는 POST 방식으로 전송하는 게 일반적인 방법이다.

GET: 우리가 브라우저 주소창에 입력하는 정보처럼 서버로 무언가를 요청하는 경우

submit버튼을 누르면 /join으로 데이터를 보낼 수 있는데 서버에서 이요청을 받아서 처리하도록 routing 처리를 한다.

이러한 경우 서버에서는

1. , '/join' 으로 request url이 탐지되면, 이제 클라이언트에서 보낸 데이터를 획득하고(request 객체에 담겨서 온 값) 그 값이 올바른지 확인하거나 아니면 DB에 그 값을 추가하는 등의 작업을 수행한다.

2. 이후 다시 클라이언트에 어떤 결과 페이지(html) 만들어서 응답한다.

3. 요청을 받은 후 응답(response)을 주는 행동을 서버가 하는 것!

4. 그러면 브라우저에서는 그 응답을 받아서 다시 화면을 새롭게 노출하게 되는 것이다.

(=> form에서 ajax처리를 통해 새로고침 없이 더 빠른 동작으로 구현할 수 있다.)