HTML DOM의 Input Submit formMethod 속성은 제출(submit) 버튼의 formMethod 속성값을 설정하거나 반환하는 데 사용됩니다. 이 속성은 폼 데이터를 서버로 전송할 때 어떤 HTTP 메서드를 사용할지 지정하며, HTML5에서 type이 submit인 input 요소에 처음 도입되었습니다.
특히 formMethod 속성으로 설정한 값은 <form> 요소에 지정된 method 속성값보다 우선 적용된다는 점이 중요합니다. 즉, 폼 전체의 전송 방식을 바꾸지 않고도 특정 제출 버튼에 대해서만 전송 방식을 다르게 지정할 수 있습니다.
문법(Syntax)
formMethod 속성을 설정하는 기본 문법은 다음과 같습니다.
submitObject.formMethod = get|post
get 방식
get은 기본값(default)으로, 폼 데이터를 URL 뒤에 추가하여 전송합니다. 형식은 다음과 같습니다.
URL?name=value&name=value
get 방식은 URL 문자열을 통해 사용자가 전송되는 데이터를 그대로 볼 수 있기 때문에 보안성이 낮으며, 비공개 데이터 전송에는 적합하지 않습니다.
post 방식
post는 데이터를 HTTP POST 트랜잭션 형태로 전송하며, 일반적으로 get보다 안전합니다. 데이터가 서버로 전송되는 동안 외부에서 내용을 확인하기 어렵고, get 방식과 달리 전송 데이터 크기에 제한이 없다는 장점도 있습니다.
예제(Example)
다음은 Submit formMethod 속성을 활용한 예제입니다. 아래 코드에서는 버튼 클릭 시 제출 버튼의 formMethod 값을 post에서 get으로 변경합니다.
<!DOCTYPE html>
<html>
<body>
<h1>Submit formMethod 속성</h1>
<form id="FORM_1" action="/Sample.php" style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Loc"><br><br>
<input type="submit" id="SUBMIT1" formmethod="post">
</form>
<p>아래 버튼을 클릭하면 위 제출 버튼의 formMethod 속성값이 get으로 변경됩니다.</p>
<button onclick="changeMethod()">CHANGE</button>
<p id="Sample"></p>
<script>
function changeMethod() {
document.getElementById("SUBMIT1").formMethod = "get";
document.getElementById("Sample").innerHTML = "formMethod 속성값이 post에서 get으로 변경되었습니다.";
}
</script>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CHANGE 버튼을 클릭한 후
버튼을 클릭하면 자바스크립트의 changeMethod() 함수가 실행되어 제출 버튼의 formMethod 값이 post에서 get으로 변경되고, 변경 완료 메시지가 화면에 표시됩니다.