Form 필드의 action / method

웹 페이지 내 회원 가입을 위한 폼 작성을 위해 아래와 코드와 같이 작성,

submit 버튼에 onclick 함수를 달아준 후 자바 스크립트 함수로 서버로 POST 요청을 보내는 코드를 작성하였다.

# register 페이지 내 HTML 코드

<form>
    <input id="user_id" type="text" placeholder="아이디" name="user_id" />
    <input id="nick_name" type="text" placeholder="닉네임" name="nick_name" />
    <input id="password1" type="password" placeholder="비밀번호" name="password1" />
    <input id="password2" type="password" placeholder="비밀번호 확인" name="password2" />
    <button onclick="register()" type="submit"> 가입하기 </button>
</form>

# button 의 register() 함수 생략

 

register() 함수 내 DB 내 동일 아이디가 존재하거나, 입력된 비밀번호 두 개가 일치하지 않는다면

알림창이 생성되는 효과를 넣었고 정상 작동을 확인하기 위해 코드 작성을 마친 후 일부로 오류를 내었으나, 어떠한 반응도 오지 않았다

 

DB 저장 (회원가입) 성공 / 실패에 대한 알림창이 반드시 발생하도록 설계했는데, 반응이 없다는 것은

register() 함수가 실행되지 않았다는 것을 의미했기 때문에 여러 방면으로 고민을 하다가

서버 측 코드를 조정해보니 아래와 같은 내용을 확인할 수 있었다.

 

서버 - Python Flask (register 페이지 진입 시)

- GET 요청인 경우, register.html 랜더링

-  POST 요청인 경우, 비밀번호 유효성 검사 및 아이디 중복 확인 후 성공 / 실패 메세지 반환

 

두 가지 요청을 받아야 하기 때문에, 페이지 진입 시 요청 방법에 따라 각각 GET / POST 를 출력하도록 하였는데,

회원가입 신청을 아무리 해도 POST 요청은 보이지 않았던 것,

 

내용을 확인해 보니, HTML form 필드에서 method를 지정해 주지 않으면

1. form 내 정보를 가지고, GET 요청이 진행된다는 점

2. submit 버튼의 Onclick method 는 작동되지 않는다는 것을 알게 되었다.

> 따라서 POST 요청을 위해서는 form 옵션에 method = "POST" 추가가 필요했다.

 

또한, 서버에서는 URL : /register 의 POST 요청인 경우에 아이디, 비밀번호 유효성 검사를 진행하기 때문에

form 데이터가 전달되어야 하는 url을 /register 인 것을 알려주는 action ="/register" 옵션도 추가가 필요했다.

 

문제를 해결한 코드는 아래와 같다

<form method="POST" action="/register">
	<input id="user_id" type="text" placeholder="아이디" name="user_id" />
	<input id="nick_name" type="text" placeholder="닉네임" name="nick_name" />
	<input id="password1" type="password" placeholder="비밀번호" name="password1" />
	<input id="password2" type="password" placeholder="비밀번호 확인" name="password2" />
	<button type="submit"> 가입하기 </button>
</form>