Formulário em HTML estático: cinco estados para testar antes de compartilhar

Um formulário pode parecer pronto e ainda não entregar nada. Em uma página estática, “o botão respondeu” e “a mensagem chegou a alguém” são testes diferentes.

Estou construindo o Plopino, que compartilha HTML existente por link. Este roteiro serve para revisar formulários em protótipos estáticos, independentemente da hospedagem.

1. Campo vazio: deixe o navegador ajudar

Um exemplo mínimo, sem biblioteca:

<form id="pedido">
  <label for="email">E-mail</label>
  <input id="email" name="email" type="email" required autocomplete="email">
  <button type="submit">Simular envio</button>
  <p id="estado" role="status"></p>
</form>
<script>
const form = document.querySelector("#pedido");
const estado = document.querySelector("#estado");
form.addEventListener("submit", (event) => {
  event.preventDefault();
  estado.textContent = "Simulação concluída. Nenhum dado foi enviado ou salvo.";
});
</script>

Tente enviar vazio e depois com um endereço inválido. required e type="email" oferecem validação básica no navegador. Isso não verifica se a caixa postal existe nem substitui a validação no servidor.

2. Teclado: teste Enter, não só o clique

O comportamento está no evento submit do formulário. Assim, o fluxo também atende ao envio por teclado. Use Tab para chegar ao campo e ao botão; confira se o foco continua visível. O label associado por for dá nome ao campo, e role="status" identifica uma atualização de estado para tecnologias assistivas. Teste também com o leitor de tela usado pelo seu público.

3. Sucesso: descreva o que realmente aconteceu

No exemplo, o resultado é uma simulação. Não escreva “Recebemos seu pedido” se não existe serviço recebendo o pedido. Na revisão, isso evita que alguém digite dados reais acreditando ter contratado ou cadastrado algo.

4. Rede lenta e falha: são estados separados

Quando houver uma API real, revise pelo menos: enviando, concluído e falhou. Durante o envio, impeça submissões duplicadas; numa falha, preserve os campos e ofereça uma nova tentativa. Não anuncie sucesso antes de verificar a resposta da API. A validação e a proteção contra abuso também precisam existir no servidor.

5. Outro navegador: estado local não é uma caixa de entrada

Abra o link em um navegador sem a sua sessão. Uma resposta armazenada em localStorage fica naquele navegador e naquela origem; ela não aparece automaticamente no computador de quem criou a página. Não coloque chaves privadas de API no HTML ou no JavaScript entregue ao visitante.

Para compartilhar este teste, salve como index.html e hospede o arquivo. No meu caso, uso Plopino. Ele publica a página estática; o recebimento de respostas precisa de um serviço separado. Para a demonstração, use dados fictícios e mantenha o aviso de simulação visível.

Meu critério para encerrar a revisão: quem testa consegue distinguir uma prévia visual de uma ação que realmente envia dados?