Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Archives
Today
Total
관리 메뉴

codingfarm

form : method 본문

web/HTML5

form : method

scarecrow1992 2020. 9. 29. 00:19

form은 사용자가 입력한 정보를
서버로 전송하는 역할을 담당한다.

데이터를 전송하기 위해서는 여러 방법이 존재하며
이때까지 "get"이라는 방식이 있다.

그리고 여기서는 이외에 "post"방식에 대해 알아보겠다.

이를 이해하기 위해선 서버에 대한 지식도 필요하지만

서버쪽에서 정보를 받아 처리하는 메커니즘은
생활코딩의 "자바스크립트로 로그인 기능 구현하기" 세션을 참고할것

지금 당장은 서버에 대한 정보를 블랙박스화 하고 진행한다.
그렇기에 이해 안가는 부분은 넘길것

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <!--서버의 주소를 임의로 넣었다.-->
        <form action="http://localhost/method.php">
            <input type="text" name="id">
            <input type="password" name="pwd">
            <input type="submit">
        </form>
    </body>
</html>
cs

위 html코드를 브라우저로 실행해보면

입력칸에 egoing 문자열을, 패스워드에 111111을 입력하고 "질의 보내기"버튼을 클릭한다.

그럼 아래 주소로 이동된다.

http://localhost/method.php?id=egoing&pwd=111111

localhost/method.php쪽으로 id는 egoing이라는 정보를 전송한다.

그러면 서버측에서는 id=egoing이라는 정보를 인지하여 특정 작업을 수행한다.

 

여기서 111111이라는 비밀번호가 url에 유출된다는 문제점이 발생한다.

그렇기에 비밀번호 같이 보안이 중요한 정보는 "감춰서"전송해야한다.

이때 쓰이는 방법이 post이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <!--서버의 주소를 임의로 넣었다.-->
        <form action="http://localhost/method.php" method="post">
            <input type="text" name="id">
            <input type="password" name="pwd">
            <input type="submit">
        </form>
    </body>
</html>
cs

7번째줄의 form tag에 method속성이 "post"로 설정되었음에 주목하라

참고로 method속성의 디폴트 값은 "get"이다.

이렇게 한 후에 화면을 표시하면 기존의 것과 아무런 차이가 없다.

하지만 버튼을 누르면 아래 링크로 이동한다.

http://localhost/method.php

서버의 주소 이외에는 아무것도 안붙여 젔음이 확인된다.

하지만 이는 서버에 데이터를 안보낸것이 아니라 다른방법으로 숨겨서 보낸것이다.

 

get방식은 url에 데이터를 붙여서 보내며

post방식은 데이터를 다른방식으로 숨겨서 보내는것이다.

 

대부분의 현업에서 form을 이용해서 데이터를 전송하면 거의 post방식으로 전송할것이다.

어떻게 전송할지는 server engineer의 권한이다.

 

 

 

 

'web > HTML5' 카테고리의 다른 글

meta  (0) 2020.09.30
file upload  (0) 2020.09.30
label  (0) 2020.09.28
hidden  (0) 2020.09.27
button  (0) 2020.09.27
Comments