Executando verificação de segurança...
19

[DICA] Como usar um botão enviar fora de um formulário HTML

Outro dia, tive um cenário bastante estranho em que tínhamos um formulário dentro de uma seção específica, mas o botão enviar estava na parte inferior.

A princípio, tentei reconfigurar o HTML para que o botão fizesse parte do elemento do formulário. No entanto, isso rapidamente se tornou um HTML cheio de CSS pra burlar os padrões.

Então decidi pesquisar outras opções e aprendi que você pode colocar botões de envio fora de um formulário!

Vamos dar uma olhada nisso.

Botão enviar fora de um formulário

Para conseguir isso, devemos usar a seguinte marcação.

<form id="newsletterForm">
  <label for="email">Email:</label>
  <input type="email" name="email" placeholder="Email" />
</form>

<button type="submit" form="newsletterForm">Submit!</button>

Como você pode ver, o botão não faz parte do formulário, mas funcionará.

Isso ocorre porque usamos o atributo "form" em nosso botão. Nela, definimos a qual formulário este botão pertence.

Obrigado por ler e espero ter ajudado mais alguém.

Carregando publicação patrocinada...
4
1

Excelente conteúdo cara, eu sempre esse tipo de envio criando um evento 'onClick'. Muito obrigado por compartilhar essa solução com a comunidade, em breve testarei seu exemplo em um porojetinho que estou desenvolvendo.

1

Muito obrigado por compartilhar!
É uma feature tão simples e discreta, mas com tanto potencial de prevenir gambiarras. Me traz uma vontade de refatorar todas as gambiarras que eu precisei fazer com estilização pra usar essa funcionalidade delicinha.
Fico chocado que sempre tem algo novo pra aprender sobre HTML/CSS/Javascript, e só fico imaginando quantas outras funcionalidades com potencial de prevenir gambiarras ainda há para descobrir...

1

Isso abre novos designs criativos de formulários - ao menos pra mim que não sabia disso. Conhecimento simples, fácil e quebrador de barreiras!

1
1
1
1
1
1
1
1

Conteudo simples, mas que faz diferença!

Cara, com essa tua postagem simples me deu muita muita idéia!
Não manjo de html, mas faço uns forms as vezes, bem básicos.

1

podia ter o botão de salvar nos favoritos, que para este post seria o caso.

mais posts assim, objetivo, direto ao ponto e com caso real de uso.

eu fazia isso programando evento de clique. Não sabia que era possivem assim....