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전송을 위한 html 태그는 딱 정해진 건 없습니다.
이를 찾아보면 여러 가지 형태로 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)을 주는 행동을 서버가 해야 합니다.
그러면 브라우저에서는 그 응답을 받아서 다시 화면을 새롭게 노출하게 되는 것이죠.
생각해보기
- form데이터를 Ajax로 처리할 수도 있습니다. 즉 form에 값을 입력하고 전송버튼을 누르면 화면이 새로고침 되지 않고 서버로 데이터가 전송되고, 응답을 받아서 후속처리를 하는 것이죠. 서버에서는 Ajax를 통해서 데이터를 받은 후 처리결과만 응답을 주고, 클라이언트가 이후에 화면을 전환하거나, UI를 변경시키는 등의 작업을 할 수 있을 겁니다.
참고 자료
form과 input태그를 어떻게 사용하는지 알 수 있습니다.
comment
감사합니다.