양식 재설정 이벤트 및 상태 관리

form.reset()을 호출하거나 <button type="reset">을 클릭하면 폼에서 reset 이벤트가 발생합니다. 각 필드는 초기 값(value 속성의 값 또는 새 입력 요소라면 빈 값)으로 되돌아갑니다. 프로그래밍 방식으로 reset에 대응하려면 이 이벤트를 수신합니다.

reset에서 사용하는 초기 상태는 현재 값이 아니라 defaultValue, defaultChecked 또는 defaultSelected 속성입니다. 이 속성들은 HTML에서 파싱할 때 설정된 value/checked/selected 속성을 반영하며, 사용자가 상호 작용해도 바뀌지 않습니다.

현재 값을 새로운 "기본값"으로 만들려면(이후 reset할 때 해당 값으로 되돌아가도록 하려면) input.defaultValue = input.value를 설정합니다. 저장에 성공한 후 사용하면, 이후 reset할 때 처음의 빈 폼이 아니라 저장된 상태로 되돌아갑니다.

reset 이벤트는 값이 되돌아가기 전에 발생합니다. reset 후 상태를 확인하려면 다음 마이크로태스크까지 실행을 미룹니다: form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... })). 이벤트 타이밍에서 자주 혼동하는 부분입니다.

reset 이벤트 핸들러에서 e.preventDefault()를 호출하면 reset이 취소되고 값이 현재 상태로 유지됩니다. 사용자가 중요한 내용을 입력한 폼에서 "정말 초기화하시겠습니까?"와 같은 확인을 요청할 때 유용합니다.

현재 값과 기본값을 비교하면 폼에 변경 사항이 있는지 확인할 수 있습니다: const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue). 저장 버튼을 활성화하거나 비활성화하고, 저장하지 않은 변경 사항에 대한 확인을 표시할 때 사용합니다.

변경된 폼에서 페이지를 벗어나기 전에 사용자에게 경고하려면 다음과 같이 합니다: window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } }). 브라우저는 일반적인 "사이트를 나가시겠습니까?" 확인 창을 표시하며, 최신 브라우저에서는 사용자 지정 메시지를 더 이상 지원하지 않습니다.

reset 버튼은 실수로 한 번만 클릭해도 모든 필드를 초기화하므로, 큰 문제가 발생할 수 있습니다. 최신 UI에서는 대개 reset 버튼을 아예 생략하거나 확인 절차 뒤에 숨깁니다. reset이 필요하다면 제출 버튼에서 멀리 배치하고 한 단계로 실행할 수 있는 실행 취소 기능을 고려하세요.

긴 폼에서는 입력 이벤트가 발생할 때 상태를 localStorage에 저장하고 로드할 때 복원합니다. 사용자가 실수로 탭을 닫아 작업 내용을 잃지 않도록 "초안을 복원하시겠습니까?"라는 확인 창을 함께 제공하세요. 더 이상 필요하지 않을 때 저장된 상태를 지우도록 reset 및 제출 핸들러와 결합할 수 있습니다.

웹 구성 요소로 만든 사용자 지정 폼 요소는 ElementInternals를 통해 폼 reset에 참여합니다. formResetCallback 메서드에서 기본값을 복원하세요. 내부 입력 요소를 감싸고 있어 명시적인 reset이 필요한 사용자 지정 요소에는 필수입니다.

사용자 지정 요소 클래스에 static formAssociated = true를 선언하고 this.attachInternals()를 사용하면 formResetCallback, formStateRestoreCallback, formDisabledCallback, formAssociatedCallback을 사용할 수 있습니다. 이를 통해 폼 수명 주기와 통합할 수 있습니다.

form.reset()이 실행되면 reset 이벤트가 발생하고, 필드는 defaultValue/defaultChecked/defaultSelected로 되돌아갑니다. 저장한 후 기본값을 업데이트하면 해당 값이 새로운 reset 상태가 됩니다. 현재 값과 기본값을 비교하여 변경 상태를 추적하고, 긴 폼은 localStorage에 저장하며, 페이지 이동 경고에는 beforeunload를 사용하세요. 사용자 지정 요소는 formAssociated와 formResetCallback을 통해 통합할 수 있습니다.