해당 Post는 form 데이터 보내기에 대해서 정리한 파일입니다.

회원가입이나 사용자 정보를 입력 후 서버로 보내야 하는 일은 자주 있습니다.

로그인, 설문조사, 회원가입, 주문정보 입력 등 우리가 웹을 통해서 서버로 데이터를 보내야 하는 경우는 많이 있습니다.

HTML은 form태그를 통해서 이를 지원합니다.

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>

여러 가지 형태로 form을 구성할 수가 있습니다.

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

어떻게 서버로 전송될까요?

input type이 submit (혹은 button type이 submit) 인 엘리먼트가 있을 경우,

해당 엘리먼트를 클릭하거나 다른 폼 엘리먼트 요소에서 엔터를 치면 form에 입력한 정보가 자동으로 서버로 넘어갑니다.

그럼 어디로 전송될까요?

form태그의 action속성에 적어주면 됩니다.

어떤 값이 전송될까요?

Input 데이터가 합쳐져서 서버로 전송이 됩니다.

POST방식과 GET방식을 우리가 이해해야 합니다.

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

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

하지만 POST를 서버로 어떤 데이터를 보내줄 때 사용하는 HTTP Method입니다.

이 두 개의 차이점을 좀 더 알아보면 좋습니다.

이 상태에서 submit버튼을 누르면 /join으로 데이터를 보낼 수 있습니다.

물론 서버에서 이요청을 받아서 처리하도록 routing 처리를 해야 할 겁니다.

참고로 서버에서 하는 일을 짧게 요약하면 다음과 같습니다.

, ‘/join’ 으로 request url이 탐지되면, 이제 클라이언트에서 보낸 데이터를 획득하고(request 객체에 담겨서 온 값)

그 값이 올바른지 확인하거나 아니면 DB에 그 값을 추가하는 등의 작업을 할 겁니다.

이후에는 다시 클라이언트에 어떤 결과 페이지(html)를 만들어서 응답해야합니다.

예를 들어 ‘회원가입이다!’라고 하면 회원가입 정보를 받은 후에 회원가입 완료가 잘 됐다는 메시지 화면을 보내주거나, 아니면 서비스페이지의 메인화면으로 이동시켜줘야 할 겁니다.

그런식으로 요청을 받은 후 응답(response)을 주는 행동을 서버가 해야 합니다.

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