Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML target Attribute
The target attribute of the <form> element specifies where to display the response received after submitting the form. It controls whether the form response opens in the same window, a new tab, a specific frame, or the parent window.
Syntax
Following is the syntax for the target attribute −
<form target="_blank|_self|_parent|_top|frameName">
Target Attribute Values
The target attribute accepts the following predefined values −
_blank − Opens the form response in a new window or tab.
_self − Opens the form response in the same frame (default behavior).
_parent − Opens the form response in the parent frame.
_top − Opens the form response in the full body of the window, breaking out of all frames.
frameName − Opens the form response in a named frame or iframe.
Using _blank Target
The _blank value is commonly used to open form submissions in a new tab or window, keeping the original page accessible.
Example
Following example demonstrates the target attribute with _blank value −
<!DOCTYPE html>
<html>
<head>
<title>Form Target Blank Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Player Registration</h2>
<form action="/submit-player" method="get" target="_blank">
<p>
<label for="player">Player:</label>
<input type="text" id="player" name="player" required>
</p>
<p>
<label for="rank">Rank:</label>
<input type="number" id="rank" name="rank" min="1" required>
</p>
<p>
<label for="points">Points:</label>
<input type="number" id="points" name="points" min="0" required>
</p>
<button type="submit">Submit</button>
</form>
</body>
</html>
When this form is submitted, the response will open in a new browser tab or window, allowing users to keep the original form page open.
Using _self Target
The _self value opens the response in the same window or frame. This is the default behavior when no target is specified.
Example
<!DOCTYPE html>
<html>
<head>
<title>Form Target Self Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form action="/contact-submit" method="post" target="_self">
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</p>
<p>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" required></textarea>
</p>
<button type="submit">Send Message</button>
</form>
</body>
</html>
This form will replace the current page with the server response when submitted.
Using Named Frame Target
You can specify a custom frame name as the target value to open the response in a specific iframe or named window.
Example
<!DOCTYPE html>
<html>
<head>
<title>Form Target Frame Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Search Form</h2>
<form action="/search" method="get" target="resultFrame">
<p>
<label for="query">Search Query:</label>
<input type="text" id="query" name="q" required>
<button type="submit">Search</button>
</p>
</form>
<h3>Search Results:</h3>
<iframe name="resultFrame" style="width: 100%; height: 300px; border: 1px solid #ccc;">
Results will appear here after submitting the form.
</iframe>
</body>
</html>
When this form is submitted, the search results will display inside the iframe named resultFrame, while the form itself remains visible above.
Comparison of Target Values
Following table summarizes the different target attribute values −
| Target Value | Description | Use Case |
|---|---|---|
| _blank | Opens response in a new window or tab | External links, file downloads, keeping original page open |
| _self | Opens response in the same frame (default) | Standard form submissions, page navigation |
| _parent | Opens response in the parent frame | Breaking out of a single iframe level |
| _top | Opens response in the full window body | Breaking out of all frames and framesets |
| frameName | Opens response in a named frame or iframe | Displaying results in specific page sections |
Common Use Cases
The target attribute is particularly useful in the following scenarios −
File Downloads − Use
target="_blank"to open download links without leaving the current page.External Services − When submitting forms to external payment processors or third-party services,
_blankkeeps users on your site.Multi-frame Layouts − Use named targets to display form responses in specific sections of complex layouts.
Search Forms − Display search results in iframes while keeping the search form visible.
Browser Compatibility
The target attribute is supported by all modern browsers and has been part of HTML since early versions. The _blank, _self, _parent, and _top values work consistently across all browsers.
Conclusion
The target attribute provides control over where form responses are displayed, enhancing user experience by keeping important pages accessible or organizing content into specific display areas. Use _blank for external submissions, _self for standard navigation, and named frames for organized layouts.
432 Views
