[HTML5] <form> 태그_GET과 POST

2020. 7. 6. 16:52 Web Programing/HTML5

<form> 태그_GET과 POST


1. 서버, 클라이언트

폼을 이해하기 위해서는 우선 서버와 클라이언트라는 개념을 이해해야 한다. 서버는 정보를 제공하는 쪽이고, 클라이언트는 정보를 제공 받는 쪽을 의미한다. 

웹브라우저의 주소창에 생활코딩의 홈페이지인 http://opentutorials.org를 입력하면 웹브라우저는 opentutorials.org에 해당하는 컴퓨터에게 생활코딩 컨텐츠를 요청한다. 

이 맥락에서 웹브라우저는 정보를 요청하는 쪽 다시 말해서 제공 받는 쪽이기 때문에 클라이언트가 되고, opentutorials.org의 컨텐츠를 제공하는 컴퓨터는 정보를 제공하기 때문에 서버가 된다.


아래 그림은 서버와 클라이언트의 관계를 나타낸 것이다.



2. 폼 (form)

폼이란 사용자의 데이터를 서버에 전송하는 방법이다. 일반적으로 아래와 같은 작업을 하기 위해서는 폼을 이용한다.

- 로그인을 위해서 아이디/비밀번호를 입력할 때

- 회원가입을 하기 위해서 개인정보를 입력할 때

- 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때


3. 문법

form의 문법은 아래와 같다. <form> 태그 안쪽에 텍스트를 입력 받는 텍스트 필드나, 원하는 항목을 선택 할 수 있는 라디오 버튼등이 위치한다. 

이러한 요소들을 컨트롤 (control)이라고 부른다. 사용자가 컨트롤을 조작한 후에 전송 버튼을 누르면 <form> 태그의 속성인 action에 기술된 URL로 사용자가 입력한 정보를 전송한다. 

서버는 이 정보를 받아서 저장하거나, 계산된 결과를 보여주는 등의 작업을 수행하게 된다.

<form action="서버로 전송한 데이터를 수신할 URL" method="데이터를 전송하는 방법">

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

</form>

- action : 사용자가 입력한 데이터를 전송할 서버의 URL

- method : 사용자가 입력한 데이터를 전송하는 방법으로 아래와 같은 방식이 있다.

get : action에 입력한 URL에 파라미터의 형태로 전송

post : header의 body에 포함해서 전송


4. GET과 POST의 차이점

(1) GET

- URL에 정보가 담겨서 전송된다.

- 전송할 수 있는 정보의 길이가 제한되어 있다.

- 퍼머링크로 사용될 수 있다.--> 정보를 식별하는 고유한 식별자.(고유한 주소체계)

- URL 상에 파라미터를 표현할 때에는 '?' 앞뒤로 구분하여 앞에 것은 URL 뒤의 것은 파라미터이다.

- 각각의 파라미터는 '&'로 구분하여 nickname과 job이라는 두개의 파라미터가 온 것을 알 수 있다.

- '='을 이용하여 파라미터와 파라미터의 값을 구분한다.


(2) POST

- header의 body에 담겨서 전송된다.

- URL 상에 전달한 정보가 표시되지 않는다.

- GET에 비해서 보안상 약간의 우위에 있다. (사실상 동일하다)

- 전송할 수 있는 데이터의 길이 제한이 없다.

- 퍼머링크로 사용할 수 없다.

- 서버 쪽에 어떤 작업을 명령할 때 사용한다.

  (데이터의 기록, 삭제, 수정 등)


개발자 도구의 'network' 탭은 클라이언트와 서버간의 데이터 전달 과정을 열람할 수 있다.



5. 예제

example1.html - 사용자가 입력한 정보를 서버로 전송하는 예제 

페이지 내부에는 여러개의 form이 올 수 있고 각 form은 독립적으로 데이터를 전송할 수 있다.

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

    </head>

    <body>

        <fieldset>

            <legend>

                GET

            </legend>

            <form action="./example2.php" method="GET">

                <p>

                    닉네임 :

                    <input type="text" name="nickname" />// 문자 정보 입력

        // <input type="button" name="nickname" />// 버튼 형식으로 입력

                    <br />

                </p>

                <p>

                    직업 :

                    <select name="job">

                        <option value="designer">디자이너</option>

                        <option value="programmer">프로그래머</option>

                        <option value="planner">기획자</option>

                    </select>

                </p>

                <input type="submit" value="전송"/>// submit: 사용자가 클릭 form 내부(<form></form>)의 지금까지 입력한 정보를 action 속성의 URL로 전송

            </form>

        </fieldset>

        <fieldset>

            <legend>

                POST

            </legend>

            <form action="./example2.php" method="POST">//'./':URL 전체 주소의 현재 폴더까지(상대경로)/example2.php

                <p>

                    닉네임 :

                    <input type="text" name="nickname" />

                    <br />

                </p>

                <p>

                    직업 :

                    <select name="job">

                        <option value="designer">디자이너</option>

                        <option value="programmer">프로그래머</option>

                        <option value="planner">기획자</option>

                    </select>

                </p>

                <input type="submit" value="전송"/>

            </form>

        </fieldset>

    </body>

</html>


example2.php - 사용자가 전송한 데이터를 받아서 화면에 표시해주는 예제 

<html>

        <head>

                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

        </head>

        <body>

                <?php

                echo $_REQUEST['nickname'].'님의 직업은 '.$_REQUEST['job'].'이군요!';

                ?>

        </body>

</html>



출처: https://devbox.tistory.com/entry/HTML5-a-태그?category=574553 [장인개발자를 꿈꾸는 :: 기록하는 공간]

'Web Programing > HTML5' 카테고리의 다른 글

[HTML5[ <table> 태그  (0) 2020.07.06
[HTML5] <a> 태그  (0) 2020.07.06
[HTML5] <input> 태그  (0) 2020.07.06
[HTML5] <form> 태그 2  (0) 2020.07.06
[HTML5] <form> 태그 1  (0) 2020.07.06
[HTML5] 아이프레임과 프레임  (0) 2020.07.06
[HTML5] <meta> 태그  (0) 2020.07.06
[HTML5] 이스케이핑  (0) 2020.07.06