JavaScript로 HTML 폼(양식)을 초기화하는 방법

JavaScript에서는 reset() 메서드 하나만으로 HTML 폼(form)을 간단하게 초기화하거나 비울 수 있습니다. reset() 메서드는 폼 내부의 모든 입력 요소(text, password, checkbox 등)의 값을 페이지가 처음 로드되었을 때의 기본값으로 되돌려 주며, 그 결과는 사용자가 리셋(reset) 버튼을 클릭한 것과 완전히 동일합니다.

reset() 메서드의 주요 특징

reset() 메서드는 폼 객체에 대해 호출하며, 다음과 같은 특징을 가집니다.

폼 안의 모든 입력 필드 값을 초기 상태(기본값)로 복원합니다.
HTML의 value 속성에 미리 지정된 초기값이 있다면 해당 값으로 되돌아갑니다.
<input type="reset"> 버튼을 클릭하는 것과 동일한 효과를 냅니다.

예제

아래 전체 코드를 실행하고 'Reset' 버튼을 클릭해 보세요. 입력했던 학생 이름(Student Name)과 과목(Student Subject)이 사라지면서 폼이 초기 상태로 되돌아가는 것을 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <head>
      <title>Reset HTML form</title>
   </head>
   <body>
      <form id="newForm">
         Student Name<br><input type="text" name="sname"><br>
         Student Subject<br><input type="password" name="ssubject"><br>
         <input type="button" onclick="newFunction()" value="Reset">
      </form>
      <script>
         function newFunction() {
            document.getElementById("newForm").reset();
         }
      </script>
   </body>
</html>

코드 설명

<form> 요소에는 newForm이라는 id가 지정되어 있습니다. Reset 버튼을 클릭하면 onclick 이벤트에 의해 newFunction() 함수가 호출되고, 함수 내부의 document.getElementById("newForm").reset() 구문이 폼 전체를 초기화하는 핵심 역할을 합니다. 이처럼 reset() 메서드를 활용하면 별도의 값 삭제 처리 없이도 폼을 한 번에 깨끗하게 비울 수 있습니다.

JavaScript로 HTML 폼(양식)을 초기화하는 방법 – reset() 메서드 완벽 가이드

reset() 메서드의 주요 특징

예제

코드 설명