HTML DOM 폼 submit() 메서드란?
HTML DOM의 Form submit() 메서드는 폼(form)에 입력된 데이터를 action 속성에 지정된 주소로 전송하는 역할을 합니다. 마치 제출(submit) 버튼을 클릭한 것처럼 동작하며, 별도의 매개변수는 받지 않습니다.
이 메서드는 자바스크립트를 통해 특정 조건에서 폼을 자동으로 제출해야 하거나, 사용자 입력 검증 후 제출 흐름을 직접 제어하고 싶을 때 유용하게 활용됩니다.
문법(Syntax)
Form submit() 메서드의 기본 문법은 다음과 같습니다.
formObject.submit()
예제(Example)
submit() 메서드의 실제 사용 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
form{
border:2px solid blue;
margin:2px;
padding:4px;
}
</style>
<script>
function SubmitForm() {
document.getElementById("FORM1").submit();
document.getElementById("Sample").innerHTML="폼이 제출되었습니다";
}
</script>
</head>
<body>
<h1>Form submit() 메서드 예제</h1>
<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Age <input type="text" name="Age"></label> <br><br>
<input type="button" onclick="SubmitForm()" value="SUBMIT">
</form>
<p id="Sample"></p>
</body>
</html>실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
SUBMIT 버튼을 클릭하면 폼이 제출되고, sample_page.php 페이지에는 아래와 같은 결과가 표시됩니다.
코드 상세 설명
위 예제의 핵심 부분을 단계별로 살펴보겠습니다.
1. 폼 생성
먼저 id="FORM1", method="post", action="/sample_page.php" 속성을 가진 폼을 생성했습니다. 이 폼은 텍스트 타입의 두 개의 입력 필드와 SUBMIT 버튼으로 구성되어 있습니다.
<form id="FORM1" method="post" action="/sample_page.php"> <label>User Name <input type="text" name="usrN"></label> <br><br> <label>Age <input type="text" name="Age"></label> <br><br> <input type="button" onclick="SubmitForm()" value="SUBMIT"> </form>
2. 버튼 클릭 이벤트 처리
SUBMIT 버튼이 클릭되면 SubmitForm() 함수가 호출됩니다.
<input type="button" onclick="SubmitForm()" value="SUBMIT">
3. submit() 메서드로 폼 제출
SubmitForm() 함수는 document 객체의 getElementById() 메서드를 사용해 <form> 요소를 가져온 뒤, 해당 요소에 submit() 메서드를 호출합니다. 그러면 폼 데이터가 action 속성에 지정된 주소로 전송됩니다.
function SubmitForm() {
document.getElementById("FORM1").submit();
}정리
HTML DOM의 submit() 메서드는 자바스크립트만으로 폼 제출을 제어할 수 있는 강력한 도구입니다. 일반적인 제출 버튼 대신 유효성 검사 후 조건부로 폼을 전송하거나, 특정 이벤트 발생 시 자동으로 데이터를 전송하는 등 다양한 시나리오에서 활용할 수 있습니다. 다만 이 메서드는 폼의 기본 이벤트(onsubmit)를 발생시키지 않으므로, 제출 전 검증 로직이 필요하다면 함수 내부에서 미리 처리하는 것이 좋습니다.