HTML 폼에서 데이터를 전송할 때 사용하는 두 가지 주요 방식은 GET과 POST입니다. 이 두 전송 방식은 서로 다르게 동작하며, 각각의 장단점과 용도에 차이가 있습니다.
GET 방식
- 설명:
GET방식은 폼 데이터를 URL의 쿼리 문자열로 전송합니다. 이는 URL의 끝에?기호를 붙이고 그 뒤에 키-값 쌍을 추가하는 방식입니다. - 특징:
- 폼 데이터가 URL에 직접 포함되므로 전송되는 데이터가 URL에 노출됩니다.
- 브라우저의 주소 표시줄에 URL이 보이므로 사용자가 직접 볼 수 있습니다.
- 데이터 길이에 제한이 있으며, 일반적으로 약 2048자입니다.
- 즐겨찾기(북마크)와 캐싱이 가능합니다.
- 주로 데이터 조회를 목적으로 사용됩니다.
- 예제:
<form action="/search" method="GET">
<label for="query">Search:</label>
<input type="text" id="query" name="query">
<input type="submit" value="Submit">
</form>
이 예제에서 사용자가 "Submit" 버튼을 클릭하면 브라우저는 /search?query=검색어와 같은 URL을 서버로 전송합니다.
POST 방식
- 설명:
POST방식은 폼 데이터를 HTTP 요청 본문에 포함하여 전송합니다. URL에 데이터가 포함되지 않으므로 데이터가 URL에 노출되지 않습니다. - 특징:
- 데이터가 요청 본문에 포함되므로 URL에 표시되지 않습니다.
- 데이터 길이에 제한이 없습니다.
- 브라우저 주소 표시줄에 데이터가 보이지 않으므로 보안성이 상대적으로 높습니다.
- 즐겨찾기(북마크)와 캐싱이 불가능합니다.
- 주로 데이터 변경, 추가, 삭제와 같은 작업을 위해 사용됩니다.
- 예제:
<form action="/submit" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<input type="submit" value="Submit">
</form>
이 예제에서 사용자가 "Submit" 버튼을 클릭하면 브라우저는 /submit URL로 폼 데이터를 HTTP 요청 본문에 포함하여 서버로 전송합니다.
주요 차이점 요약
| 특성 | GET | POST |
|---|---|---|
| 데이터 위치 | URL 쿼리 문자열 | HTTP 요청 본문 |
| 데이터 길이 | 제한적 (약 2048자) | 제한 없음 |
| 보안성 | 낮음 (URL에 데이터 노출) | 높음 (데이터가 URL에 노출되지 않음) |
| 캐싱 | 가능 | 불가능 |
| 즐겨찾기 | 가능 | 불가능 |
| 사용 목적 | 데이터 조회 (검색 등) | 데이터 변경 (로그인, 폼 제출 등) |
이러한 특성들을 고려하여, 폼 데이터를 전송할 때 적절한 전송 방식을 선택해야 합니다. 데이터 보안이 중요한 경우에는 POST 방식을 사용하는 것이 좋으며, 데이터 조회와 같은 경우에는 GET 방식을 사용하는 것이 일반적입니다.
예제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>전송 방식 : get / post </title>
</head>
<body>
<!-- post 전송 방식 : 글자수 제한 없음 . 약한 보안
http://127.0.0.1:5500/jsp/result.jsp -->
<h4>Post 전송 방식</h4>
<form action="../jsp/result.jsp" method="post">
이름 : <input type="text" name="name" id="name" required placeholder="이름입력요망"><br>
비번 : <input type="password" name="pwd" id="pwd" placeholder="비밀번호요망"><br>
메일 : <input type="email" name="mail" id="mail" required="required"
placeholder="ex@ex.com"><br><br>
<input type="submit" value="전송">
<input type="reset" value="취소">
</form>
get 방식 전송 : 글자수에 제한이 있음(255자), 보안에 취약
<!-- http://127.0.0.1:3000/html/ex07_form.html?name=do&pwd=pwd&mail=pw%40pw.com -->
<h4>Get 전송 방식</h4>
<form action="../jsp/result.jsp" method="get">
이름 : <input type="text" name="name" id="name" required placeholder="이름입력요망"><br>
비번 : <input type="password" name="pwd" id="pwd" placeholder="비밀번호요망"><br>
메일 : <input type="email" name="mail" id="mail" required="required"
placeholder="ex@ex.com"><br><br>
<input type="submit" value="전송">
<input type="reset" value="취소">
</form>
</body>
</html>
넙-죽