HTML PushButton formTarget
Property: Specifying the Target Window or Frame
The HTML formTarget
property allows you to override the target
attribute of a form for a specific <button>
element. This property defines where the form’s response will be displayed after the form is submitted. It provides control over whether the response opens in a new tab, the same frame, a parent frame, or the full window.
What is the formTarget
Property?
The formTarget
attribute for the <button>
element is used to specify the browsing context (e.g., tab, window, or iframe) where the form’s response will be displayed. It offers a way to control the navigation behavior upon form submission, differing from the form’s default target
attribute.
Purpose of the formTarget
Property
The primary purpose of the formTarget
property is to:
- Override the form’s
target
attribute for a specific button. - Specify where the form’s response should be displayed.
- Control navigation behavior upon form submission.
Syntax
The formTarget
attribute can be used within the <button>
element as follows:
<button type="submit" formTarget="value">Submit</button>
Possible Values for formTarget
Value | Description |
---|---|
`_self` | Loads the response in the same browsing context as the current one. This is the default behavior if `formTarget` is not specified. |
`_blank` | Loads the response into a new, unnamed browsing context (usually a new tab or window). |
`_parent` | Loads the response into the parent browsing context of the current one. This is useful within iframes. |
`_top` | Loads the response into the topmost browsing context (i.e., the full window), effectively breaking out of any frames. |
`framename` | Loads the response into a specific ` |
Examples
Let’s explore some examples demonstrating how to use the formTarget
property.
Example 1: Opening the Response in a New Tab
This example demonstrates how to use the formTarget
property to open the form response in a new tab using _blank
.
<form action="/submit-form" target="_self" id="myFormBlank">
<label for="nameBlank">Name:</label>
<input type="text" id="nameBlank" name="name" /><br /><br />
<button type="submit" formTarget="_blank">Submit (New Tab)</button>
</form>
In this case, when the “Submit (New Tab)” button is clicked, the form data is submitted, and the server’s response is displayed in a new tab or window.
Example 2: Opening the Response in the Same Frame
This example shows how to load the response in the same frame using _self
. Although _self
is the default behavior, it is explicitly specified here for clarity.
<form action="/submit-form" id="myFormSelf">
<label for="nameSelf">Name:</label>
<input type="text" id="nameSelf" name="name" /><br /><br />
<button type="submit" formTarget="_self">Submit (Same Frame)</button>
</form>
Clicking the “Submit (Same Frame)” button will replace the current content with the form’s response.
Example 3: Opening the Response in the Parent Frame
This example is applicable when the form is inside an <iframe>
. The _parent
value will load the response in the parent frame containing the <iframe>
.
<!DOCTYPE html>
<html>
<head>
<title>formTarget _parent Example</title>
</head>
<body>
<h1>Parent Page</h1>
<iframe src="iframe-content.html" width="500" height="200"></iframe>
</body>
</html>
Here’s the content of iframe-content.html
:
<!DOCTYPE html>
<html>
<head>
<title>IFrame Content</title>
</head>
<body>
<h2>IFrame Content</h2>
<form action="/submit-form" id="myFormParent">
<label for="nameParent">Name:</label>
<input type="text" id="nameParent" name="name" /><br /><br />
<button type="submit" formTarget="_parent">Submit (Parent Frame)</button>
</form>
</body>
</html>
When the “Submit (Parent Frame)” button is clicked within the <iframe>
, the response will load in the parent page, replacing the entire content of the parent frame.
Example 4: Opening the Response in the Topmost Frame
If the form is within nested <iframe>
elements, using _top
will load the response in the topmost frame, effectively breaking out of all frames.
<!DOCTYPE html>
<html>
<head>
<title>formTarget _top Example</title>
</head>
<body>
<h1>Topmost Page</h1>
<iframe src="nested-iframe.html" width="500" height="300"></iframe>
</body>
</html>
Here’s the content of nested-iframe.html
:
<!DOCTYPE html>
<html>
<head>
<title>Nested IFrame</title>
</head>
<body>
<h2>Nested IFrame</h2>
<iframe src="inner-iframe.html" width="400" height="200"></iframe>
</body>
</html>
And the content of inner-iframe.html
:
<!DOCTYPE html>
<html>
<head>
<title>Inner IFrame</title>
</head>
<body>
<h2>Inner IFrame</h2>
<form action="/submit-form" id="myFormTop">
<label for="nameTop">Name:</label>
<input type="text" id="nameTop" name="name" /><br /><br />
<button type="submit" formTarget="_top">Submit (Topmost Frame)</button>
</form>
</body>
</html>
Clicking the “Submit (Topmost Frame)” button within the innermost <iframe>
will load the response in the topmost page, replacing the entire content.
Example 5: Targeting a Specific <iframe>
by Name
You can specify a particular <iframe>
by its name
attribute as the target for the form response.
<!DOCTYPE html>
<html>
<head>
<title>formTarget iframe Name Example</title>
</head>
<body>
<h1>Main Page</h1>
<iframe name="targetFrame" width="500" height="300"></iframe>
<form action="/submit-form" id="myFormFrame">
<label for="nameFrame">Name:</label>
<input type="text" id="nameFrame" name="name" /><br /><br />
<button type="submit" formTarget="targetFrame">Submit (Target Frame)</button>
</form>
</body>
</html>
In this example, the form’s response will be loaded into the <iframe>
element with the name
attribute set to “targetFrame”.
Real-World Applications of the formTarget
Property
The formTarget
property is useful in scenarios such as:
- Single-Page Applications (SPAs): Opening specific content in designated areas of the page.
- Admin Panels: Loading responses within specific sections of a dashboard.
- IFrame-Based Navigation: Controlling navigation behavior within framed layouts.
- Multi-Step Forms: Directing users to different sections of a form in a controlled manner.
Tips and Best Practices
- Always validate the form data on the server-side, regardless of the
formTarget
value. ๐ก๏ธ - Use descriptive values for
formTarget
to improve code readability. โ๏ธ - Test the form submission in different browsers to ensure consistent behavior. ๐งช
- Consider accessibility when using
formTarget
, especially when opening new tabs or windows. โฟ
Conclusion
The formTarget
property provides a flexible and powerful way to control where the form’s response is displayed, allowing developers to create more interactive and user-friendly web applications. By understanding its various values and use cases, you can enhance the navigation behavior of your forms and improve the overall user experience.