Eventos de redefinição de formulário e gerenciamento de estado

Chamar form.reset() ou clicar em <button type="reset"> dispara um evento reset no formulário. Cada campo volta ao seu valor inicial (o atributo value ou vazio, no caso de campos de entrada novos). Escute o evento para reagir programaticamente à redefinição.

O estado inicial usado pela redefinição é a propriedade defaultValue, defaultChecked ou defaultSelected — não o valor atual. Essas propriedades refletem os atributos value/checked/selected no HTML, definidos durante a análise e não alterados pela interação do usuário.

Para transformar o valor atual no novo "padrão" (fazendo com que redefinições posteriores voltem a ele), defina input.defaultValue = input.value. Isso é útil depois de um salvamento bem-sucedido: redefinições futuras voltarão ao estado salvo, em vez do formulário originalmente vazio.

O evento reset é disparado antes que os valores voltem ao estado inicial. Para inspecionar o estado após a redefinição, adie a operação para a próxima microtarefa: form.addEventListener("reset", () => queueMicrotask(() => { ... use new values ... })). Esse é um detalhe comum e confuso do momento em que os eventos são disparados.

Se você chamar e.preventDefault() em um manipulador do evento reset, a redefinição será cancelada e os valores permanecerão como estavam. Isso é útil para pedir uma confirmação de "tem certeza?" em formulários com dados importantes inseridos pelo usuário.

Compare os valores atuais com os valores padrão para saber se o formulário tem alterações pendentes: const dirty = Array.from(form.elements).some(el => el.value !== el.defaultValue). Use isso para ativar ou desativar um botão de salvamento ou exibir uma confirmação sobre alterações não salvas.

Para avisar o usuário antes que ele saia de um formulário com alterações pendentes: window.addEventListener("beforeunload", (e) => { if (isDirty(form)) { e.preventDefault(); } }). Os navegadores exibem sua própria mensagem genérica de "sair do site?"; mensagens personalizadas não são mais compatíveis com os navegadores modernos.

Os botões de redefinição restauram todos os campos com um único clique acidental, muitas vezes com consequências graves. A maioria das interfaces modernas os omite completamente ou os esconde atrás de uma confirmação. Se precisar de uma redefinição, coloque o botão longe do botão de envio e considere oferecer uma desfazer em uma única etapa.

Em formulários longos, salve o estado em localStorage nos eventos de entrada e restaure-o ao carregar. Combine isso com uma solicitação "Restaurar rascunho?" para que os usuários não percam o trabalho ao fechar uma aba acidentalmente. Use também os manipuladores de redefinição e envio para limpar o estado salvo quando ele não for mais necessário.

Elementos de formulário personalizados (criados como componentes da web) participam da redefinição do formulário por meio de ElementInternals: no método formResetCallback, restaure o valor padrão. Isso é necessário quando o elemento personalizado encapsula um campo de entrada interno que precisa ser redefinido explicitamente.

Declarar static formAssociated = true em uma classe de elemento personalizado e usar this.attachInternals() expõe formResetCallback, formStateRestoreCallback, formDisabledCallback e formAssociatedCallback para integrar o elemento ao ciclo de vida do formulário.

Para qual valor cada campo retorna quando form.reset() é chamado?

O evento reset é disparado quando form.reset() é executado; os campos retornam a defaultValue/defaultChecked/defaultSelected. Atualize os valores padrão depois de salvar para transformá-los no novo estado da redefinição. Acompanhe o estado com alterações pendentes comparando os valores atuais com os valores padrão, persista os dados em localStorage para formulários longos e use beforeunload para avisar sobre a navegação. Elementos personalizados integram-se por meio de formAssociated e formResetCallback.