Cómo abrir formulario en otra ventana

En este tutorial sobre formularios html voy a mostrarte, de forma práctica, como se puede configurar la ventana destino de un formulario.

Podrás encontrar a continuación varios ejemplos de código y una breve explicación de los puntos clave para configurar el destino de tus formularios.

¡Vamos allá!

Atributos del formulario para abrir nueva ventana

Para realizar la configuración de nuestro formulario HTML utilizaremos un atributo.

De los atributos que podemos utilizar en una etiqueta form, tan solo necesitaremos 1 para controlar la ventana destino del formulario: el atributo target.

El atributo html target nos permitirá configurar el destino del formulario de 5 formas diferentes:

• _blank: con este parámetro configuraremos el formulario para que se abra en otra pestaña del navegador.
• _self: esta es la configuración por defecto de todo formulario. Abre el destino del formulario en la misma ventana (frame) en la que se encuentra el formulario.
• _parent: abrirá la página de destino del formulario en la ventana "padre". Esto quiere decir que si el formulario se encuentra dentro de un iframe o en una ventana "popup", enviará la información y abrirá la página del "action" en la ventana que abrió el popup, o que contiene el iframe.
• _top:  similar a parent.
• framename:  esta configuración realmente será el nombre del "frame" al que queremos enviar el formulario. Por ejemplo, al abrir una ventana podemos darle un nombre. Este nombre permitirá identificar esta ventana y la podremos indicar como target.

Destino del formulario en una nueva ventana

Voy a empezar enseñandote como abrir el destino del formulario en una nueva ventana. Debes tener en cuenta a que me refiero abrir otra ventana del navegador "popup" y no una nueva pestaña.

Primero el ejemplo:

<form method="post" 
      target="print_popup" 
      action="/destino-fin.php"
      onsubmit="window.open('about:blank','print_popup','width=1000,height=800');">

</form>

Este ejemplo tiene 2 parámetros clave:

1. El atributo onsubmit con un breve script de javascript.
2. El atributo target.

Con javascript, cuando se ejecute el evento onsubmit, abriré una nueva ventana con el comando window.open. Además, especifico que el nombre para este nuevo "frame" es print_popup y especifico, también, un ancho y alto.

Debes quedarte con el nombre de la nueva ventana, ya que este nombre o identificador es el que he indicado en el atributo target del form HTML.

Formulario con destino nueva pestaña

<form target="_blank" action="http://example.com"
      method="post" id="mc-embedded-subscribe-form"
      name="mc-embedded-subscribe-form" class="validate"
>