HTML form 요소의 method 속성은 폼 데이터를 서버로 전송하는 방식을 지정합니다. 데이터를 URL 변수(쿼리 문자열) 형태로 전송하거나, HTTP POST 트랜잭션 방식으로 전송할 수 있습니다.
문법(Syntax)
기본 문법은 다음과 같습니다.
<form method="get | post">...</form>
여기서 get은 폼 데이터를 URL 변수로 전송하고, post는 폼 데이터를 HTTP POST 트랜잭션으로 전송합니다.
- get: 입력한 값이 URL 주소창에 그대로 노출되며 전송 길이에도 제한이 있어, 검색어 전달처럼 가볍고 단순한 요청에 적합합니다.
- post: 데이터가 HTTP 요청 본문에 담겨 전송되므로 URL에 노출되지 않아, 로그인·회원가입처럼 민감한 정보를 다룰 때 더 안전합니다.
참고: method 속성을 생략하면 기본값인 get이 자동으로 적용됩니다.
예제(Example)
HTML 폼 method 속성을 활용한 예제 코드입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
}
input {
width: 315px;
display: block;
margin: 1rem auto;
border: 2px solid #fff;
padding: 8px;
background: transparent;
border-radius: 20px;
outline: none;
}
::placeholder {
color: #000;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 20px;
width: 330px;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
</style>
<body>
<h1>HTML Form method Attribute Demo</h1>
<form action="/action_page.php" method="get">
<input type="text" name="firstname" placeholder="Enter First Name">
<input type="text" name="lastname" placeholder="Enter Last Name">
<input type="submit" value="SUBMIT" class="btn">
</form>
</body>
</html>
실행 결과(Output)
이름(First Name)과 성(Last Name)을 입력한 뒤 SUBMIT 버튼을 클릭해 폼을 제출해 보세요. 제출 후 브라우저 주소창에 입력한 값이 쿼리 문자열 형태로 함께 표시되는 것을 확인하면, method 속성이 실제로 어떻게 동작하는지 쉽게 이해할 수 있습니다.
