JavaScript로 폼 제출 시 입력 필드를 초기화하는 방법

웹사이트에서 사용자가 폼을 제출할 때 페이지가 새로고침되지 않거나 성공 페이지로 이동하지 않는 경우가 많습니다. 이럴 때는 폼의 입력 필드를 깔끔하게 비워주는 것이 좋은 사용자 경험(UX)을 제공하는 핵심 요소입니다. 이 글에서는 별도의 라이브러리 없이 순수 JavaScript(바닐라 JS)만으로 폼 필드를 초기화하는 방법을 알아보겠습니다.

1. HTML: 로그인 폼 만들기

먼저 가장 흔히 볼 수 있는 로그인 폼 예시입니다. 사용자가 아이디와 비밀번호를 입력한 뒤 로그인(submit) 버튼을 누르는 구조입니다.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" />

  <label for="password">Password:</label>
  <input type="password" id="password" />

  <button>Login</button>
</form>

2. JavaScript: 제출 시 폼 필드 초기화하기

아래 코드는 사용자가 제출 버튼을 누르는 즉시 폼 내의 모든 입력 필드를 자동으로 비워줍니다.

// submit 이벤트가 발생하면 함수 실행
document.addEventListener("submit", function(event) {
  // 기본 폼 제출 동작 방지
  event.preventDefault()

  // 모든 폼 필드 초기화
  event.target.reset()
})

코드 동작 원리

event.preventDefault()는 브라우저의 기본 동작인 페이지 새로고침이나 이동을 막아주는 역할을 합니다. SPA(싱글 페이지 애플리케이션)나 AJAX 기반 사이트에서 특히 유용합니다.

event.target.reset()은 이벤트가 발생한 폼 요소에 내장된 reset() 메서드를 호출하여, 해당 폼 안의 모든 input, textarea 등의 값을 한 번에 초기 상태로 되돌립니다.

이처럼 단 몇 줄의 코드만으로도 폼 제출 후 입력값을 손쉽게 정리할 수 있어, 회원가입, 문의하기, 검색창 등 다양한 상황에서 활용할 수 있습니다.