События сброса формы и управление состоянием

Вызов form.reset() или нажатие <button type="reset"> вызывает событие reset у формы. Каждое поле возвращается к исходному значению — атрибуту value или пустому значению для новых полей. Обрабатывайте это событие, чтобы программно реагировать на сброс.

Исходное состояние, используемое при сбросе, задаётся свойством defaultValue, defaultChecked или defaultSelected, а не текущим значением. Эти свойства отражают атрибуты value, checked и selected в HTML, устанавливаются во время разбора документа и не изменяются при взаимодействии с пользователем.

Чтобы сделать текущее значение новым значением «по умолчанию» и возвращаться к нему при последующих сбросах, задайте input.defaultValue = input.value. Это полезно после успешного сохранения: последующие сбросы вернут форму к сохранённому состоянию, а не к исходной пустой форме.

Событие reset вызывается до возврата значений. Чтобы проверить состояние после сброса, отложите проверку до следующей микрозадачи: form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... })). Это частая причина путаницы при работе со временем вызова событий.

Если вызвать e.preventDefault() в обработчике события reset, сброс будет отменён, а значения останутся прежними. Это полезно для подтверждения «Вы уверены?» в формах со значительным объёмом введённых данных.

Сравнивайте текущие значения со значениями по умолчанию, чтобы определить, есть ли в форме несохранённые изменения: const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue). Это позволяет включать и отключать кнопку сохранения или показывать подтверждение при наличии несохранённых изменений.

Чтобы предупредить пользователя перед уходом со страницы с несохранёнными изменениями, используйте: window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } }). Браузеры показывают стандартное приглашение «покинуть сайт?», а собственные сообщения в современных браузерах больше не поддерживаются.

Кнопки сброса одним случайным нажатием очищают все поля, что часто приводит к серьёзным последствиям. В большинстве современных интерфейсов их полностью исключают или скрывают за подтверждением. Если сброс необходим, разместите его подальше от кнопки отправки и предусмотрите отмену одним действием.

Для длинных форм сохраняйте состояние в localStorage при событиях input и восстанавливайте его при загрузке. Добавьте запрос «Восстановить черновик?», чтобы пользователи не потеряли работу при случайном закрытии вкладки. Сочетайте это с обработчиками сброса и отправки, чтобы удалять сохранённое состояние, когда оно больше не нужно.

Собственные элементы формы, созданные как веб-компоненты, участвуют в сбросе формы через ElementInternals: в методе formResetCallback восстановите значение по умолчанию. Это необходимо, если собственный элемент содержит внутреннее поле, которому требуется явный сброс.

Объявление static formAssociated = true в классе собственного элемента и использование this.attachInternals() открывают доступ к formResetCallback, formStateRestoreCallback, formDisabledCallback и formAssociatedCallback для интеграции с жизненным циклом формы.

Событие reset вызывается при выполнении form.reset(); поля возвращаются к значениям defaultValue, defaultChecked и defaultSelected. После сохранения обновляйте значения по умолчанию, чтобы они стали новым состоянием сброса. Отслеживайте несохранённые изменения, сравнивая текущие значения со значениями по умолчанию, сохраняйте состояние длинных форм в localStorage и используйте beforeunload для предупреждений при уходе со страницы. Собственные элементы интегрируются через formAssociated и formResetCallback.