HTML DOM의 form method 속성은 form(양식) 요소의 method 속성과 연결된 속성입니다. 이 속성은 폼 데이터를 서버로 전송할 때 어떤 방식으로 전송할지를 지정하는 데 사용됩니다. 데이터를 전송할 목적지 주소는 별도의 action 속성으로 지정하며, method 속성을 통해 값을 설정하거나 읽어올 수 있습니다.
문법(Syntax)
method 속성을 설정하는 기본 문법은 다음과 같습니다.
formObject.method = get|post;
get은 기본값(default)으로, 폼 데이터를 URL 뒤에 붙여서 전송합니다. 예를 들어 URL?name=value&name=value 형태가 됩니다. get 방식은 전송되는 데이터가 URL 문자열에 그대로 노출되기 때문에 보안성이 낮으며, 개인 정보처럼 민감하지 않은 단순한 데이터에만 적합합니다.
반면 post 방식은 데이터를 HTTP POST 트랜잭션 형태로 전송합니다. 전송 과정에서 데이터가 URL에 드러나지 않아 상대적으로 안전하므로, 로그인 정보나 개인 정보 같은 민감한 데이터를 다룰 때 권장됩니다.
예제(Example)
이제 form method 속성을 실제로 활용한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
form{
border:2px solid blue;
margin:2px;
padding:4px;
}
</style>
<script>
function ChangeMethod() {
document.getElementById("FORM1").method="get";
document.getElementById("Sample").innerHTML = "폼의 method가 'post'에서 'get'으로 변경되었습니다.";
}
</script>
</head>
<body>
<h1>Form method 속성 예제</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>사용자 이름 <input type="text" name="usrN"></label> <br><br>
<label>나이 <input type="text" name="Age"></label> <br><br>
<input type="submit" value="SUBMIT">
</form>
<p>아래 버튼을 클릭하면 위 폼의 method 속성 값이 변경됩니다.</p>
<button onclick="ChangeMethod()">변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 파란색 테두리가 있는 폼이 화면에 표시됩니다.
SUBMIT 버튼을 클릭한 후 URL을 확인해 보면 다음과 같습니다.
127.0.0.1:5500/sample_page.php
이는 method가 post로 설정되어 있어 입력한 데이터가 URL에 노출되지 않기 때문입니다.
이번에는 “변경(Change)” 버튼을 클릭해 보겠습니다. 그러면 안내 문구가 출력되고 폼의 method가 get으로 바뀝니다.
다시 SUBMIT 버튼을 누르고 URL을 확인하면 이번에는 입력값이 쿼리 스트링으로 함께 전달되는 것을 볼 수 있습니다.
127.0.0.1:5500/sample_page.php?usrN=USER2&Age=22
코드 분석
먼저 id="FORM1", method="post", action="/sample_page.php"로 구성된 폼을 생성했습니다. method 값이 post이므로 폼 데이터는 비교적 안전하게 서버로 전송되며, URL에 노출되지 않습니다. 폼 내부에는 텍스트 타입의 입력 필드 두 개와, 데이터를 제출하기 위한 submit 버튼이 포함되어 있습니다.
<form id="FORM1" method="post" action="/sample_page.php"> <label>사용자 이름 <input type="text" name="usrN"></label> <br><br> <label>나이 <input type="text" name="Age"></label> <br><br> <input type="submit" value="SUBMIT"> </form>
그다음, 사용자가 클릭하면 ChangeMethod() 함수를 실행하는 “변경” 버튼을 만들었습니다.
<button onclick="ChangeMethod()">변경</button>
ChangeMethod() 함수는 document.getElementById() 메서드로 폼 요소를 가져온 뒤, 해당 폼의 method 속성 값을 get으로 변경합니다. method가 get으로 바뀌면 사용자가 입력한 데이터가 URL에 그대로 표시됩니다. 마지막으로 id가 "Sample"인 문단의 innerHTML 속성을 이용해 변경 사항을 알려주는 안내 문구를 화면에 출력합니다.
function ChangeMethod() {
document.getElementById("FORM1").method="get";
document.getElementById("Sample").innerHTML = "폼의 method가 'post'에서 'get'으로 변경되었습니다.";
}마무리
HTML DOM의 form method 속성을 활용하면 자바스크립트만으로 폼의 전송 방식을 동적으로 변경할 수 있습니다. 민감한 데이터는 반드시 post 방식을 사용하고, 검색어처럼 공개되어도 무방한 간단한 데이터에만 get 방식을 사용하는 것이 웹 개발의 기본 원칙입니다.