Eventos de formulário: submit, change, input

Quando trabalhamos com formulários, os eventos são como “sensores” que avisam o JavaScript sobre o que o usuário está fazendo.

Pense assim:

• input: avisa enquanto a pessoa está digitando.
• change: avisa quando a mudança foi confirmada no campo.
• submit: avisa quando o formulário foi enviado.

1) Evento input (tempo real)

O input dispara a cada alteração no valor do campo.
É ótimo para feedback imediato, como contador de caracteres ou busca instantânea.

Exemplo

<input id="nome" type="text" placeholder="Digite seu nome">
<p id="saida"></p>

const nome = document.getElementById("nome");
const saida = document.getElementById("saida");

nome.addEventListener("input", function () {
  saida.textContent = "Você está digitando: " + nome.value;
});

2) Evento change (mudança confirmada)

O change dispara quando o valor muda e a alteração é “confirmada”.
Em campos de texto, normalmente acontece quando o campo perde foco.
Em select, acontece ao escolher outra opção.

Exemplo com select

<select id="estado">
  <option value="">Selecione</option>
  <option value="sp">São Paulo</option>
  <option value="rj">Rio de Janeiro</option>
</select>
<p id="status"></p>

const estado = document.getElementById("estado");
const status = document.getElementById("status");

estado.addEventListener("change", function () {
  status.textContent = "Estado escolhido: " + estado.value;
});

3) Evento submit (envio do formulário)

O submit dispara quando o formulário é enviado, por exemplo, ao clicar em botão type="submit".

Exemplo

<form id="formCadastro">
  <input id="email" type="email" placeholder="Seu e-mail">
  <button type="submit">Enviar</button>
</form>
<p id="mensagem"></p>

const formCadastro = document.getElementById("formCadastro");
const email = document.getElementById("email");
const mensagem = document.getElementById("mensagem");

formCadastro.addEventListener("submit", function (e) {
  e.preventDefault(); // Impede recarregamento padrão
  mensagem.textContent = "Dados recebidos: " + email.value;
});

Diferença rápida entre os três

• input: responde durante a digitação.
• change: responde quando a mudança é concluída.
• submit: responde no envio do formulário.

Exemplo combinando tudo

<form id="formPerfil">
  <input id="usuario" type="text" placeholder="Usuário">
  <select id="plano">
    <option value="">Selecione um plano</option>
    <option value="basico">Básico</option>
    <option value="premium">Premium</option>
  </select>
  <button type="submit">Salvar</button>
</form>

<p id="preview"></p>
<p id="confirmacao"></p>

const formPerfil = document.getElementById("formPerfil");
const usuario = document.getElementById("usuario");
const plano = document.getElementById("plano");
const preview = document.getElementById("preview");
const confirmacao = document.getElementById("confirmacao");

usuario.addEventListener("input", function () {
  preview.textContent = "Digitando usuário: " + usuario.value;
});

plano.addEventListener("change", function () {
  preview.textContent = "Plano selecionado: " + plano.value;
});

formPerfil.addEventListener("submit", function (e) {
  e.preventDefault();
  confirmacao.textContent = "Formulário enviado com sucesso!";
});

Boas práticas

• Use input para retorno em tempo real.
• Use change quando a confirmação da alteração for suficiente.
• Use submit para validar e processar os dados finais.
• Em submit, geralmente use preventDefault() para controlar o fluxo com JavaScript.

Resumo da lição

Os eventos input, change e submit são fundamentais para formulários interativos:

• input acompanha o usuário enquanto ele digita.
• change reage quando uma alteração é confirmada.
• submit captura o envio dos dados.

Com esses três eventos, você já consegue construir formulários muito mais inteligentes e amigáveis.