브라우저는 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 처리를 해야 할 겁니다.
이 부분은 여기서는 생략하겠지만,
백엔드 경험이 있다면 이 부분을 이해하고 있을 것으로 생각합니다.
(form 데이터를 Ajax로 처리할 수 있습니다.
즉 form에 값을 입력하고 전송버튼을 누르면 화면이 새로고침 되지 않고 서버로 데이터가 전송되고, 응답을 받아서 후속처리를 하는 것이죠. 서버에서는 Ajax를 통해서 데이터를 받은 후 처리결과만 응답을 주고, 클라이언트가 이후에 화면을 전환하거나, UI를 변경시키는 등의 작업을 할 수 있을 겁니다.)
참고로 서버에서 하는 일을 짧게 요약하면 다음과 같습니다.
, '/join' 으로 request url이 탐지되면,
이제 클라이언트에서 보낸 데이터를 획득하고(request 객체에 담겨서 온 값)
그 값이 올바른지 확인하거나
아니면 DB에 그 값을 추가하는 등의 작업을 할 겁니다.
이후에는 다시 클라이언트에 어떤 결과 페이지(html)를 만들어서 응답해야겠죠.
예를 들어 '회원가입이다!'라고 하면
회원가입 정보를 받은 후에
회원가입 완료가 잘 됐다는 메시지 화면을 보내주거나,
아니면 서비스페이지의 메인화면으로 이동시켜줘야 할 겁니다.
그런 식으로 요청을 받은 후 응답(response)을 주는 행동을 서버가 해야 합니다.
그러면 브라우저에서는 그 응답을 받아서 다시 화면을 새롭게 노출하게 되는 것이죠.
form 데이터 유효성 검증하기
이를 클라이언트에서 처리할까? 백엔드에서 처리할까?
문자열 입력값은 정규 표현식으로 규정한다
이메일은
문자로 시작하여 @가 나오고 다시 문자가 나온 뒤 .이 나오며 마지막으로 문자가 나오고 끝남
(/\w+@\w+\.\w+$/)
시작은 꼭 문자 or _로 시작해야 한다면 앞부분을 다음과 추가하기
(/^[\w+_]\w+@\w+\.\w+$/)
유효성 결과 출력
result 블록에 bValid에 따라 문구를 지정
꼭 submit() 지정하기
<script>
var result = document.querySelector(".result");
var btn = document.querySelector(".sendbtn");
btn.addEventListener("click", function (evt) {
evt.preventDefault();// 기본적으로 서버로 전송되는 것을 막는 방법
var emailValue = document.querySelector("[name='email']").value;
var bValid = (/^[\w+_]\w+@\w+\.\w+$/).test(emailValue);
//console.log(bValid, emailValue);
if (!bValid) {
result.innerHTML = "올바르지 않은 이메일입니다.";
}
else {
result.innerHTML = "정확하게 입력하였습니다.";
document.querySelector("#myform").submit(); // submit을 적어야 서버로 전송됨
};
})
</script>
setTimeout 함수를 이용하여 결과 내용이 몇 초간 뜨다가 사라지게 할 수도 있다
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>Join my website!</h1>
<div class="formWrap">
<form action="/join" method="post" id="myform">
<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>
</div>
<section class="result">
</section>
<script>
var result = document.querySelector(".result");
var btn = document.querySelector(".sendbtn");
btn.addEventListener("click", function (evt) {
evt.preventDefault();// 기본적으로 서버로 전송되는 것을 막는 방법
var emailValue = document.querySelector("[name='email']").value;
var bValid = (/^[\w+_]\w+@\w+\.\w+$/).test(emailValue);
//console.log(bValid, emailValue);
if (!bValid) {
result.innerHTML = "올바르지 않은 이메일입니다.";
}
else {
result.innerHTML = "정확하게 입력하였습니다.";
document.querySelector("#myform").submit(); // submit을 적어야 서버로 전송됨
};
})
</script>
</body>
</html>'Web > Frontend' 카테고리의 다른 글
| File Upload - 확장자 검사 / 썸네일 노출 (0) | 2021.08.05 |
|---|---|
| File Upload (0) | 2021.08.05 |
| 정규표현식 (regular expression) (0) | 2021.07.07 |
| 생성자 패턴으로 TabUI 만들기 (0) | 2021.07.07 |
| Clean Code (0) | 2021.07.06 |