{"id":665,"date":"2024-04-21T18:15:22","date_gmt":"2024-04-21T21:15:22","guid":{"rendered":"https:\/\/thiagorossi.com.br\/blog\/?p=665"},"modified":"2025-11-06T10:49:45","modified_gmt":"2025-11-06T13:49:45","slug":"form-submit-html","status":"publish","type":"post","link":"https:\/\/thiagorossi.com.br\/blog\/form-submit-html\/","title":{"rendered":"Form submit HTML"},"content":{"rendered":"Tempo de leitura: <\/span> 4<\/span> minutos<\/span><\/span>\n

Form submit HTML<\/strong>: O bot\u00e3o de envio, ou submit<\/code>, \u00e9 o ponto culminante de qualquer formul\u00e1rio HTML. Ele desencadeia a a\u00e7\u00e3o de empacotar todos os dados inseridos pelo usu\u00e1rio e despach\u00e1-los para o servidor, conforme definido na tag <form><\/code>.<\/p>\n\n\n\n

Neste artigo, vamos detalhar o funcionamento do mecanismo de submit<\/code>, as diferen\u00e7as cruciais entre os m\u00e9todos de envio e a melhor forma de construir seu bot\u00e3o para garantir seguran\u00e7a e uma excelente experi\u00eancia de usu\u00e1rio.<\/p>\n\n\n\n

<\/div>\n\n\n\n

1. O Cont\u00eainer e o Gatilho<\/h2>\n\n\n\n

O processo de envio depende da configura\u00e7\u00e3o da tag <form><\/code> e do bot\u00e3o submit<\/code> (seja ele <input><\/code> ou a tag <button><\/code>).<\/p>\n\n\n\n

<\/div>\n\n\n\n

A Tag <form><\/code>: O Destino e o Caminho<\/h3>\n\n\n\n
Atributo<\/strong><\/td>Fun\u00e7\u00e3o<\/strong><\/td><\/tr><\/thead>
action<\/code><\/strong><\/td>Especifica a URL (o endere\u00e7o no servidor) que receber\u00e1 e processar\u00e1 os dados do formul\u00e1rio.<\/td><\/tr>
method<\/code><\/strong><\/td>Define o m\u00e9todo HTTP usado para transportar os dados (GET<\/code> ou POST<\/code>).<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n

Criando o Bot\u00e3o de Envio<\/h3>\n\n\n\n

Embora o <input type=\"submit\"><\/code> funcione perfeitamente, a tag <button><\/code><\/strong> \u00e9 geralmente a escolha preferida no desenvolvimento moderno.<\/p>\n\n\n\n

Tag<\/strong><\/td>Vantagem<\/strong><\/td>Exemplo<\/strong><\/td><\/tr><\/thead>
<input type=\"submit\"><\/code><\/strong><\/td>Simples, valor \u00e9 definido pelo atributo value<\/code>.<\/td><input type=\"submit\" value=\"Fazer Login\"><\/code><\/td><\/tr>
<button type=\"submit\"><\/code><\/strong><\/td>Recomendada:<\/strong> Permite aninhar conte\u00fado HTML (como \u00edcones, <span><\/code>s) para melhor estiliza\u00e7\u00e3o via CSS.<\/td><button type=\"submit\">Enviar Dados <img src=\"icon.png\"><\/button><\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n

2. M\u00e9todos de Envio: GET<\/code> vs. POST<\/code><\/h2>\n\n\n\n

A escolha do method<\/code> no formul\u00e1rio \u00e9 a decis\u00e3o mais importante para o transporte de dados, impactando seguran\u00e7a, performance e capacidade.<\/p>\n\n\n\n

Caracter\u00edstica<\/strong><\/td>M\u00e9todo GET<\/strong><\/td>M\u00e9todo POST<\/strong><\/td><\/tr><\/thead>
Local dos Dados<\/strong><\/td>Anexados \u00e0 URL (Query String<\/em>).<\/td>No corpo da Requisi\u00e7\u00e3o HTTP.<\/td><\/tr>
Visibilidade<\/strong><\/td>Vis\u00edvel na barra de endere\u00e7os e no hist\u00f3rico.<\/td>N\u00e3o vis\u00edvel.<\/td><\/tr>
Limite de Dados<\/strong><\/td>Pequeno (cerca de 2048 caracteres).<\/td>Praticamente ilimitado.<\/td><\/tr>
Uso Ideal<\/strong><\/td>Busca, filtro, dados n\u00e3o confidenciais.<\/td>Cadastro, Login, Senha, Upload de Arquivos.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
<\/div>\n\n\n\n
\n

Princ\u00edpio:<\/strong> Sempre utilize POST<\/code><\/strong> se o envio do formul\u00e1rio mudar o estado<\/strong> do servidor (ex: criar um usu\u00e1rio, deletar um registro, fazer uma compra).<\/p>\n<\/blockquote>\n\n\n\n

<\/div>\n\n\n\n

3. Fluxo de Envio e Codifica\u00e7\u00e3o dos Dados<\/h2>\n\n\n\n

Quando o bot\u00e3o submit<\/code> \u00e9 clicado, o navegador executa estas etapas:<\/p>\n\n\n\n

    \n
  1. Valida\u00e7\u00e3o:<\/strong> Executa a valida\u00e7\u00e3o nativa do HTML5 (ex: required<\/code>, pattern<\/code>). Se falhar, o envio \u00e9 interrompido.<\/li>\n\n\n\n
  2. Codifica\u00e7\u00e3o:<\/strong> Coleta todos os pares name=value<\/code> dos campos. O formato padr\u00e3o de codifica\u00e7\u00e3o \u00e9 application\/x-www-form-urlencoded<\/code><\/strong>, onde caracteres especiais s\u00e3o substitu\u00eddos (ex: espa\u00e7os por +<\/code>).<\/li>\n\n\n\n
  3. Requisi\u00e7\u00e3o:<\/strong> Envia uma requisi\u00e7\u00e3o HTTP (GET<\/code> ou POST<\/code>) para o action<\/code> especificado.<\/li>\n\n\n\n
  4. Resposta:<\/strong> O servidor processa os dados e envia uma resposta HTTP de volta, que geralmente redireciona o usu\u00e1rio para uma nova p\u00e1gina (ex: “Obrigado por se cadastrar”).<\/li>\n<\/ol>\n\n\n\n
    <\/div>\n\n\n\n

    4. Boas Pr\u00e1ticas e Preven\u00e7\u00e3o de Duplica\u00e7\u00e3o<\/h2>\n\n\n\n

    A experi\u00eancia do usu\u00e1rio e a seguran\u00e7a do backend dependem de como voc\u00ea gerencia a submiss\u00e3o.<\/p>\n\n\n\n

    <\/div>\n\n\n\n

    A. Preven\u00e7\u00e3o de Cliques Duplicados<\/h3>\n\n\n\n

    Quando o usu\u00e1rio clica rapidamente no bot\u00e3o submit<\/code> ou espera o carregamento, o formul\u00e1rio pode ser enviado v\u00e1rias vezes. O ideal \u00e9 desabilitar o bot\u00e3o<\/strong> imediatamente ap\u00f3s o primeiro clique.<\/p>\n\n\n\n

    JavaScript<\/p>\n\n\n\n

    \/\/ Exemplo b\u00e1sico de desabilita\u00e7\u00e3o do bot\u00e3o usando JavaScript\nconst form = document.querySelector('form');\nform.addEventListener('submit', function() {\n  \/\/ Desabilita todos os bot\u00f5es de envio dentro do formul\u00e1rio\n  form.querySelectorAll('[type=\"submit\"]').forEach(btn => {\n    btn.disabled = true;\n    btn.value = 'Enviando...'; \/\/ Opcional: Altera o texto\n  });\n});\n<\/code><\/pre>\n\n\n\n
    <\/div>\n\n\n\n
    B. Acessibilidade e Estilo<\/h3>\n\n\n\n