In this tutorial on html forms I am going to show you, in a practical way, how you can configure the destination window of a form.
You can find below several code examples and a brief explanation of the key points to configure the destination of your forms.
Let’s go there!
- Attributes of the form to open a new window
- Destination of the form in a new window
- Form with destination new tab
Attributes of the form to open a new window
To configure our HTML form we will use an attribute.
Of the attributes that we can use in a form labelwe will only need 1 to control the target window of the form: the attribute target.
He html target attribute It will allow us to configure the destination of the form in 5 different ways:
- _blank: With this parameter we will configure the form to open in another tab from the browser.
- _self: This is the default setting for every form. Opens the destination of the form in the same window (frame) in which the form is located.
- _parent: will open the target page of the form in the “parent” window. This means that if the form is inside an iframe or in a “popup” window, it will send the information and open the “action” page in the window that opened the popup, or that contains the iframe.
- _top: similar to parent.
- framename: this configuration will actually be the name of the “frame” to which we want to send the form. For example, when opening a window we can give it a name. This name will allow us to identify this window and we can indicate it as a target.
Destination of the form in a new window
I’m going to start by teaching you how open the form target in a new window. You should keep in mind that I mean opening another “popup” browser window and not a new tab.
First the example:
<form method="post" target="print_popup" action="/destino-fin.php" onsubmit="window.open('about:blank','print_popup','width=1000,height=800');"> </form>
This example has 2 key parameters:
- The target attribute.
You must stay with the name of the new window, since this name or identifier is the one that I have indicated in the attribute target of the HTML form.
Form with destination new tab
<form target="_blank" action="http://example.com" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" >