Submit e Action

O formulário nasce no envio

Preencher campos é apenas a coleta. Enviar dados é comunicação real. Quando o submit é acionado, o navegador valida, empacota e despacha os pares name=value para o destino definido no action.

button submit e input submit

O botão submit encerra o estado de coleta e inicia o estado de transmissão. Antes de enviar, o navegador verifica campos obrigatórios, padrões e tipos como email.

<button type="submit">Criar Minha Conta</button>

<input type="submit" value="Enviar Mensagem">

• button type="submit": moderno, flexível e permite conteúdo interno.
• input type="submit": tradicional, texto definido pelo atributo value.
• Texto claro: prefira “Confirmar Pagamento” a “Enviar”.

Action explicado em profundidade

O atributo action define a URL que receberá os dados. Ele pode apontar para uma rota do backend, um arquivo processador, uma API externa ou um destino simulado.

<form action="/cadastro" method="post"></form>

<form action="processa-contato.html" method="post"></form>

<form action="https://exemplo.com/api/contato" method="post"></form>

<form action="#" method="get"></form>

• Caminho relativo: aponta para arquivo ou rota no mesmo projeto.
• URL absoluta: aponta para endereço completo externo.
• action="#": útil para protótipo ou teste sem backend.
• action vazio/ausente: geralmente envia para a própria página.

Submit, action, method, name e value

O fluxo completo funciona assim: o usuário preenche, o submit dispara, o navegador valida, o method define o transporte e o action define o destino.

<form action="#" method="get">
  <label for="busca">Buscar aula</label>
  <input type="search" id="busca" name="q" required>
  <button type="submit">Pesquisar Aula</button>
</form>

• GET: envia dados na URL. Ideal para buscas e filtros.
• POST: envia dados no corpo da requisição. Ideal para cadastro e login.
• name: vira a chave enviada ao servidor.
• value: vira o valor enviado ao servidor.
• id: conecta label, CSS e JavaScript; não substitui name.

Submit, button e reset

<button type="submit">Enviar Solicitação Agora</button>

<button type="button">Validar Dados com JavaScript</button>

<button type="reset">Restaurar Formulário Original</button>

• submit: envia o formulário.
• button: não faz nada sozinho; será usado com JavaScript.
• reset: retorna campos ao estado inicial do HTML.

15 perguntas para provar domínio

1. O que acontece se action for omitido? Envia para a página atual.
2. Função de type="reset"? Retornar campos aos valores iniciais.
3. button type="button" envia formulário? Não.
4. O que é preventDefault? Função JS que impede o envio padrão.
5. Onde dados GET aparecem? Na URL.
6. Value no input submit define o quê? Texto do botão.
7. Action pode ser link externo? Sim.
8. Função do name no envio? Identificar a chave do dado para o servidor.
9. Botão submit deve ficar onde? Dentro do form, salvo casos avançados.
10. O que é URL absoluta? Endereço completo com protocolo.
11. Podemos ter dois submits? Sim, com lógica clara no backend.
12. O navegador valida o quê antes do submit? required, email, pattern e restrições nativas.
13. Reset limpa para qual estado? Estado inicial definido no HTML.
14. Quem processa cadastro real? Backend.
15. Por que usar action="#"? Para simular envio durante desenvolvimento.

Registre seu fluxo de envio

git status
git add .
git commit -m "aula-26: cria formulario com fluxo de envio html"
git push

• git status: verifica o arquivo criado.
• git add .: adiciona as evoluções ao índice.
• git commit: documenta o domínio do fluxo de envio.
• git push: envia para o repositório remoto.