[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.
Parece simples, mas é algo extremamente útil, principalmente quando o formulário e o botão de submit estão em "blocos" diferentes. Exemplo:
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...
Que massa! Jurava que seria uma chamada em javascript para submeter o formulário. Não sabia que existia algo nativo em HTML.
Conteúdo bom e direto, muito obrigado por compartilhar, particurlarmente eu não sabia disso ainda.
Curto demais quando a comunidade da essas dicas da ora, valeu demais!
Dica massa! Se eu tivesse lido esse post ontem, teria implementado em meu teste técnico pra vaga de Dev Front end... enfim, agora ja sei.
[SALVAISSO]
Bem útil, principalmente para designs mais bonitos e que fogem do padrão convencional
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.
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....