HTML DOM Form reset() 메서드 – 폼 초기화 방법 완벽 가이드

HTML DOM의 Form reset() 메서드는 폼(form)에 포함된 모든 입력 요소의 값을 초기화하고, 각 요소의 value 속성으로 지정된 기본값을 다시 화면에 표시하는 역할을 합니다. 쉽게 말해 폼 안에 있는 리셋(reset) 버튼을 클릭한 것과 동일한 동작을 수행하며, 별도의 매개변수는 받지 않습니다.

문법(Syntax)

Form reset() 메서드의 기본 문법은 다음과 같습니다.

formObject.reset()

예제

이제 Form reset() 메서드를 활용한 실제 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
    form{
        border:2px solid blue;
        margin:2px;
        padding:4px;
    }
</style>
<script>
    function ResetForm() {
        document.getElementById("FORM1").reset();
        document.getElementById("Sample").innerHTML="Form has been reset";
    }
</script>
</head>
<body>
<h1>Form reset() method example</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="submit" value="SUBMIT">
<input type="button" onclick="ResetForm()" value="RESET">
</form>
<p id="Sample"></p>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 화면이 출력됩니다.

HTML DOM Form reset() 메서드 – 폼 초기화 방법 완벽 가이드

RESET 버튼을 클릭하면 폼이 초기화되어 아래와 같이 변경됩니다.

HTML DOM Form reset() 메서드 – 폼 초기화 방법 완벽 가이드

코드 상세 설명

위 예제의 동작 과정을 단계별로 살펴보겠습니다.

먼저 id="FORM1", method="post", action="/sample_page.php"로 설정된 폼을 생성했습니다. 이 폼에는 텍스트(text) 타입의 입력 필드 두 개와 제출(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="submit" value="SUBMIT">
<input type="button" onclick="ResetForm()" value="RESET">
</form>

RESET 버튼을 클릭하면 ResetForm() 함수가 실행됩니다.

<input type="button" onclick="ResetForm()" value="RESET">

ResetForm() 함수는 document 객체의 getElementById() 메서드를 사용해 <form> 요소를 가져온 뒤, 해당 요소에 reset() 메서드를 호출합니다. 이렇게 하면 폼 내 모든 입력 데이터가 한 번에 지워집니다. 마지막으로 innerHTML 속성을 이용해 id가 "Sample"인 <p> 요소 안에 폼이 초기화되었음을 알리는 텍스트를 출력합니다.

function ResetForm() {
    document.getElementById("FORM1").reset();
    document.getElementById("Sample").innerHTML="Form has been reset";
}