[HTML] form method 에 대하여(get, post)

이번 글에서는 웹페이지와 서버가 상호작용할 수 있도록 해주는 태그인 form 태그의 method 속성에 대하여 다루겠습니다.

 

 

# form method = " get "

(1) 아래 사진에는 로그인 화면을 포함하고 있는 웹페이지와 편집기가 있습니다. form 태그를 살펴보시면 서버의 주소인 action 속성을 제외하면 어떠한 속성도 정의되어 있지 않습니다.

 

(2) 이렇게 form 태그의 속성을 따로 정의해두지 않으며, form 태그의 method 속성은 get이 됩니다.

 

<form action="index.html" method="post">
  <p>아이디 : <input type="text" name="id" value=""></p>
  <p>비밀번호 : <input type="password" name="pwd" value=""></p>
  <input type="submit">
</form>

html 사진 1

(3) get 속성이 어떻게 작동하는 지를 알기 위하여 오른쪽 1번 박스와 같이 아이디에는 form 이라고 입력하고, 비밀번호에는 1111을 입력한 뒤에 제출해보겠습니다.

 

(4) 제출을 하면 서버로 정보가 넘어가고, 아래사진과 같은 url로 이동하게 됩니다.

 

html 사진 2

 

(5) 위 사진의 url의 구성요소를 살펴보겠습니다. 2번 박스에는 서버의 url 이 표시되어 있습니다. 3번 박스에는 우리가 제출한 아이디와 비밀번호가 표시되어 있습니다.

• 하지만, 이렇게 아이디와 비밀번호의 노출은 심각한 보안문제를 야기할 수 있습니다. 따라서, get 방식은 대개의 경우에 사용하지 않으며 form 태그의 기본 설정 또한 post 방식을 지원합니다.

 

# form method = "post"

(1) 아래 사진의 2번 박스를 보겠습니다. 2번 박스에는 form 태그의 action 속성 이외에 method 라는 속성이 추가되었으며 post가 정의되어 있습니다. 

 

<form action="index.html" method="post">
  <p>아이디 : <input type="text" name="id" value=""></p>
  <p>비밀번호 : <input type="password" name="pwd" value=""></p>
  <input type="submit">
</form>

html 사진 3

 

(2) 이제 위와 같은 방식으로 아이디와 비밀번호를 누르고 제출을 하면 위 사진의 4번 박스와 같이 그저 서버의 주소만이 표시됩니다.

 

 

여기까지 웹페이지와 서버가 상호작용할 수 있도록 해주는 태그인 form 태그의 method 속성에 대하여 다루었습니다.

 

 

 

# 본문과 관련된 다른 글

[HTML] 웹페이지 제작의 기본 form 태그

https://stockbroker.tistory.com/entry/HTML-웹페이지-제작-기본-form-태그

[HTML] 웹페이지 제작의 기본 form 태그

 

[HTML] select , option 태그 사용방법

https://stockanthouse.tistory.com/entry/HTML-select-option-태그

[HTML] select , option 태그 사용방법