Eventos de restablecimiento de formularios y gestión del estado

Al llamar a form.reset() o hacer clic en <button type="reset">, se dispara un evento reset en el formulario. Cada campo vuelve a su valor inicial (el atributo value o un valor vacío en los campos nuevos). Escuche el evento para reaccionar al restablecimiento mediante código.

El estado inicial que utiliza reset es la propiedad defaultValue, defaultChecked o defaultSelected, no el valor actual. Estas propiedades reflejan los atributos value/checked/selected del HTML, establecidos al analizar el documento y sin cambios por la interacción del usuario.

Para convertir el valor actual en el nuevo valor «predeterminado» (de modo que los restablecimientos posteriores vuelvan a él), establezca input.defaultValue = input.value. Es útil después de guardar correctamente: los restablecimientos futuros volverán al estado guardado en lugar del formulario vacío original.

El evento reset se dispara antes de que se reviertan los valores. Para inspeccionar el estado posterior al restablecimiento, posponga la operación hasta la siguiente microtarea: form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... })). Este detalle del momento en que se dispara el evento suele resultar confuso.

Si llama a e.preventDefault() en un controlador de eventos reset, el restablecimiento se cancela y los valores permanecen como estaban. Es útil para mostrar confirmaciones de «¿Está seguro?» en formularios con datos importantes introducidos por el usuario.

Compare los valores actuales con los predeterminados para saber si el formulario se ha modificado: const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue). Úselo para activar o desactivar un botón de guardado o para mostrar una confirmación sobre cambios sin guardar.

Para advertir al usuario antes de que abandone una página con un formulario modificado: window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } }). Los navegadores muestran su propio aviso genérico de «¿Salir del sitio?»; los mensajes personalizados ya no son compatibles con los navegadores modernos.

Los botones de restablecimiento reinician todos los campos con un solo clic accidental, a menudo con consecuencias graves. La mayoría de las interfaces modernas los omiten por completo o los ocultan detrás de una confirmación. Si necesita un restablecimiento, colóquelo lejos del botón de envío y considere ofrecer una opción de deshacer en un solo paso.

En formularios largos, guarde el estado en localStorage cuando se produzcan eventos input y restáurelo al cargar la página. Combine esta función con un aviso de «¿Restaurar borrador?» para que los usuarios no pierdan su trabajo al cerrar accidentalmente una pestaña. Combine también los controladores de reset/submit para borrar el estado guardado cuando ya no sea necesario.

Los elementos de formulario personalizados (creados como componentes web) participan en el restablecimiento del formulario mediante ElementInternals: en su método formResetCallback, restaure el valor predeterminado. Esto es necesario cuando el elemento personalizado contiene un campo input interno que requiere un restablecimiento explícito.

Al declarar static formAssociated = true en una clase de elemento personalizado y utilizar this.attachInternals(), se exponen formResetCallback, formStateRestoreCallback, formDisabledCallback y formAssociatedCallback para integrarlos con el ciclo de vida del formulario.

¿A qué valor vuelve cada campo cuando se llama a form.reset()?

El evento reset se dispara cuando se ejecuta form.reset(); los campos vuelven a defaultValue/defaultChecked/defaultSelected. Actualice los valores predeterminados después de guardar para convertirlos en el nuevo estado de restablecimiento. Realice el seguimiento del estado modificado comparando los valores actuales con los predeterminados, persista los datos en localStorage para los formularios largos y use beforeunload para advertir antes de navegar. Los elementos personalizados se integran mediante formAssociated y formResetCallback.