[생활코딩] 21강. <form> - method="get" & method="post"

form

사용자의 데이터를 서버에 전송하는 방법.

• 로그인을 위해서 아이디/비밀번호를 입력할 때 사용
• 회원가입을 하기 위해서 개인정보를 입력할 때 사용
• 블로그나 게시판에 글을 작성하거나 파일을 전송할 때 사용

 

<form action="사용자가 입력한 데이터를 전송할 서버의 URL" method="데이터를 전송하는 방법">

</form>

 

텍스트 필드, 라디오버튼, 체크박스와 같은 컨트롤을 생성하는 tag이다.

 

method="get"	action에 입력한 URL에 ?(물음표)로 구분되는 파라미터의 형태로 전송
method="post"	header의 body에 포함해서 전송

속성값은 더 있지만, 주로 사용하는 것 2가지만^^

 

 

 

예제 1. 

↓

<fieldset>이 GET이라는 상자와 POST라는 상자로 묶인 그룹을 의미한다.

 

그 안에 <form>은 '닉네임 : ~ 전송 버튼'까지를 의미한다.

 

직업 옆의 저렇게 선택할 수 있는 박스를 '콤보 박스(combo box)'라고 하고, 이를 만드는 <select>

(드롭 박스가 정식 명칭이 아니었어....○ㅁ○;;)

 

 

 

하나의 웹 페이지 안에는 여러 개의 form이 들어올 수 있다.

위의 예제 1에서 전송버튼을 누르면 하나의 form으로 묶인 fieldset 내부의 데이터만 독립적으로 서버로 전송된다는 뜻이다.

 

 

 

 

 

그래서 닉네임을 입력하고 직업을 선택한 후 전송을 누르면 이고잉님이 미리 만들어둔 화면으로 이동한다..만,

(나는 코드만 따라쳤는데 PHP를 여는 다른 프로그램이 있는 건가.. 코드 그대로만 나오네...ㅎㅎ)

이유는 아직 모르겠다....;; 공부하다보면 깨닫게 되지 않을까...ㅎㅎ

<?php

지금부터 php 문법이 나타날거야~ (php 문법에 맞게 해석할 거야~)

 

echo

어떠한 문자를 출력할 것이다.

 

$_REQUEST['nickname']

사용자가 입력한 데이터 중 name 속성의 값이 nickname인 데이터를 불러와라.

 

 

 

잘 썼는데에... 뭐가 문제지....ㅠㅠ

지금 단계에서는 php까지 이해할 필요는 없다고 하셔서 그나마 다행..?ㅎ

 

 

 

 

 

 

 

예제 2. method="get"  vs. method="post"

나는 example2.php가 불러와지지 않아서 강의 화면을 캡처했다..ㅎㅎ

method="get"

(즉, get방식)

에서는,

 

html_tutorials/example2.php?nickname=egoing&job=programmer

중 노란색의 action 속성의 속성값 오른쪽으로 url에

사용자가 입력한 값인 파란색과 초록색의 두 개의 파라미터가 포함되어 전송되었다.

 

url상에서 파라미터를 표현할 때는,

?(물음표)로 앞에 있는 url과 뒤에 있는 파라미터를 구분한다.

→ ?는 url과 파라미터를 구분짓는 '구분자'다.

 

각각의 파라미터는,

&(ampersand, 앰퍼샌드)로 구분해 준다.

 

파라미터의 값과 이름을 =으로 구분해서 병기한다.

 

☞ url을 통해서 데이터를 전송하는 방식이다.

 

 

 

먼저 화면에서 '개발자 도구'를 열면

(Chrome에서 Ctul + Shift + I 누르면 됨!)

나오는 화면에서 Network 탭을 클릭해서

Server와 Client가 서로 주고받는 데이터를 열람할 수 있다.

method 부분이 get으로 적혀있음을 확인할 수 있다.

 

여기서 왼쪽의 파일 이름을 클릭하면

아래의 POST일 때와는 다르게 Form Data가 없음을 알 수 있다.

또한 url로 전송된 데이터를 사용자가 보기 쉽도록 Query String Parameters 부분에 표시해주고 있다.

 

 

 

 

 

 

 

 

method="post"

(즉, post 방식)

에서는,

☞ url은 변하지 않았다!

 

똑같이 '개발자 도구'를 열어

나오는 화면에서 Network 탭을 클릭해서

Server와 Client가 서로 주고받는 데이터를 열람할 수 있다.

 

노란색 형광펜 표시한 것처럼 Method 부분에 POST라고 남는다.

 

 

왼편의 데이터를 클릭하면 오른편에 뭐라고 잔뜩 나오는데,

Request Header에는 요청하는 것(브라우저가 서버로 전송한 데이터)이,

Response Header에는 응답하는 것(서버가 브라우저의 request를 받아서 그걸 해석한 다음, 브라우저로 전송해주는 적절한 데이터)이 들어간다.

 

이 중,

Request Header에는 Form Data가 포함되어 전송된 것을 확인할 수 있다.

Header라는 Data 안의 Body로서 사용자가 입력한 데이터를 전송하는 방식인 셈이다.

 

 

 

 

 

정리하자면,

 

GET

• url에 정보가 담겨서 전송된다.
• 전송할 수 있는 정보의 길이가 제한되어 있다.    (∵ url의 길이는 브라우저마다 다르지만 제한이 있다.)
• 퍼머링크^*로 사용될 수 있다. (즉, 그 url을 제3자에게 복붙해서 전송했을 때, 그 사람도 링크를 누르면 그 화면을 똑같이 볼 수 있다.)
• 일종의 '북마크'와 같은 역할을 할 때 사용한다.
• 정보를 가져올 때, 가져오고자 하는 바로 그 정보에 접근하기 위해 사용한다.

     * 퍼머링크(permalink): 영구적인 링크(permanant link)의 약자. 인터넷에서 특정 페이지에 영구적으로 할당된 URL 주소.

POST

• header의 body에 담겨서 전송된다.
• url상에 전달한 정보가 표시되지 않는다.
• GET에 비해서 보안상 약간의 우위에 있다. (사실상 악의적 사용자에 의해 조작될 수 있는 건 동일하다)
• 전송할 수 있는 데이터의 길이 제한이 없다.
• 퍼머링크로 사용할 수 없다.
• 서버 쪽에 어떤 작업을 명령할 때 사용한다. (데이터의 기록, 삭제, 수정 등)

 

 

 

참고자료 1.

https://blog.outsider.ne.kr/312

GET과 POST의 차이 :: Outsider's Dev Story

 

참고자료 2. 개발자 도구에서 뭘 할 수 있나?

https://test.opentutorials.org/course/580/2868

Network - 생활코딩