15.03.2025

Enviando um Formulário HTML e Abrindo Resultados em uma Nova Aba

Resposta Rápida

Se você deseja que o envio do formulário ocorra em uma nova aba, basta adicionar o atributo target="_blank" à tag <form>:

<form action="sua-url-de-acao" method="post" target="_blank">
  <input type="text" name="usuario">
  <input type="submit" value="Enviar">
</form>

Aqui, sua-url-de-acao é a URL para onde os dados do formulário serão enviados. Após o envio, o resultado aparecerá em uma nova aba do navegador.

Configurando um Botão Separado

Caso você precise configurar a navegação para uma nova aba quando um botão específico de envio for pressionado, você pode usar o atributo HTML5 formtarget:

<form action="sua-url-de-acao" method="post">
  <!-- Outros elementos do formulário podem estar aqui -->
  <button type="submit" formtarget="_blank">Enviar em uma Nova Aba</button>
</form>

Esse método permite que você configure a abertura de uma nova aba exclusivamente para um botão específico, adicionando mais flexibilidade ao design do formulário.

Pré-visualizando o Formulário Sem Envio de Dados

Quando você precisa verificar o formulário sem realmente enviar os dados, pode usar um botão de pré-visualização:

<form action="url-de-previsualizacao" method="post">
  <!-- Elementos para pré-visualização -->
  <button type="button" onclick="window.open('url-de-previsualizacao', '_blank')">Pré-visualizar</button>
</form>

Isso permite que você avalie como o formulário ficará sem salvar os dados inseridos, como um verdadeiro "ninja de dados".

Usando jQuery para Envio Dinâmico do Formulário

O jQuery é ideal se você precisar determinar dinamicamente se deve abrir o formulário em uma nova aba ou na aba atual. Isso depende de condições específicas:

$('form').submit(function(e) {
    if (/* condição para abrir em uma nova aba */) {
        $(this).attr('target', '_blank');
    } else {
        $(this).removeAttr('target');
    }
});

Adaptando este código às suas condições específicas, você pode gerenciar de forma flexível o comportamento do formulário.

Prevenindo Envios Acidentais

Para eliminar a chance de envios acidentais, você pode usar verificações adicionais:

<form action="sua-url-de-acao" method="post">
  <input type="text" name="usuario">
  <button type="button" onclick="submitForm(this.form, true)">Pré-visualizar</button>
  <input type="submit" value="Salvar Alterações">
</form>

<script>
function submitForm(form, isPreview) {
  if (isPreview){
    form.target = "_blank";
    form.action = "url-de-previsualizacao";
  } else {
    form.target = "";
    form.action = "sua-url-de-acao";
  }
  form.submit();
}
</script>

Esse script permite ao usuário ter maior controle sobre o processo de envio, prevenindo ações acidentais.

Visualização

Você pode visualizar o processo de envio do formulário como um sistema de transporte:

Remetente (📮): [Dados 📦]
Destinos: [Aba Atual 📑, Nova Aba 🆕]

Para envio padrão:

📮 -> 📑: Dados 📦 (permanece na aba atual)

Para envio em uma nova aba:

📮 -> 🆕: Dados 📦 (rumando para novos horizontes)

Definir target="_blank" para o formulário é como comprar uma passagem para a jornada dos dados até uma nova aba:

<form action="URL" method="post" target="_blank">
  <!-- Elementos para entrada de dados -->
  <input type="submit" value="Enviar em Nova Aba">
</form>

E a jornada dos dados começa! 🚀

Lembretes de Segurança para Formulários HTML

É importante ter em mente a segurança: ao abrir uma nova aba, a página que foi aberta pode interagir com a página original via o objeto window.opener. Use rel="noopener noreferrer" juntamente com target="_blank" para se resguardar contra possíveis problemas de segurança de dados.

Recursos Úteis

1. Atributo Target para Formulários em HTML - exemplos do uso do atributo target para envio de dados de formulário em uma nova aba.
2. O Elemento <form> em HTML: Linguagem de Marcação Hipertexto | MDN - documentação oficial do MDN para o elemento <form>.
3. Como Criar um Botão HTML que Funciona Como um Link - guia detalhado sobre como criar botões em HTML que atuam como links.
4. Métodos para Redirecionamento e Abertura de uma Nova Janela ou Aba Usando JavaScript.
5. Guia Completo para o Elemento <table> | CSS-Tricks - tudo que você precisa saber sobre como criar tabelas em HTML.
6. Desenhando Formulários Web Eficazes: Estruturação, Campos de Entrada, Rótulos e Ações - Smashing Magazine - publicação sobre como criar formulários web amigáveis e eficazes.

Navigation