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 DOM Form target property
The HTML DOM Form target property is used to specify where the response should be displayed after form data has been submitted. It controls whether the form response opens in the current window, a new tab, a new window, or a specific frame. This property sets or retrieves the value of the form's target attribute.
Syntax
Following is the syntax for getting the target property −
var target = formObject.target;
Following is the syntax for setting the target property −
formObject.target = "_blank|_self|_parent|_top|framename";
Parameters
The target property accepts the following values −
_blank − Opens the response in a new window or tab
_self − Opens the response in the same frame/window (default behavior)
_parent − Opens the response in the parent frame
_top − Opens the response in the full body of the window
framename − Opens the response in a named frame or iframe
Return Value
The target property returns a string representing the target attribute value of the form element.
Example − Getting Form Target Property
Following example demonstrates how to get the current target value of a form −
<!DOCTYPE html>
<html>
<head>
<title>Get Form Target Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Form Target Property Example</h2>
<form id="myForm" action="/submit" method="post" target="_blank">
<label>Name: <input type="text" name="username"></label><br><br>
<label>Email: <input type="email" name="email"></label><br><br>
<input type="submit" value="Submit">
</form>
<br>
<button onclick="getTarget()">Get Target Value</button>
<p id="result"></p>
<script>
function getTarget() {
var form = document.getElementById("myForm");
var targetValue = form.target;
document.getElementById("result").innerHTML = "Current target: " + targetValue;
}
</script>
</body>
</html>
The output shows the current target value when the button is clicked −
Current target: _blank
Example − Changing Form Target Property
Following example demonstrates how to dynamically change the form target property −
<!DOCTYPE html>
<html>
<head>
<title>Change Form Target Property</title>
<style>
form {
border: 2px solid blue;
margin: 10px 0;
padding: 15px;
background-color: #f9f9f9;
}
button {
margin: 5px;
padding: 8px 15px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Dynamic Form Target Change</h2>
<form id="FORM1" method="post" action="/sample_page.php">
<label>User Name: <input type="text" name="usrN"></label><br><br>
<label>Age: <input type="text" name="Age"></label><br><br>
<input type="submit" value="SUBMIT">
</form>
<button onclick="changeToBlank()">Open in New Tab</button>
<button onclick="changeToSelf()">Open in Same Window</button>
<button onclick="showTarget()">Show Current Target</button>
<p id="status">Current target: _self (default)</p>
<script>
function changeToBlank() {
document.getElementById("FORM1").target = "_blank";
document.getElementById("status").innerHTML = "Target changed to: _blank (new tab)";
}
function changeToSelf() {
document.getElementById("FORM1").target = "_self";
document.getElementById("status").innerHTML = "Target changed to: _self (same window)";
}
function showTarget() {
var currentTarget = document.getElementById("FORM1").target || "_self";
document.getElementById("status").innerHTML = "Current target: " + currentTarget;
}
</script>
</body>
</html>
The buttons allow you to change the form's target behavior dynamically. Click "Open in New Tab" to set target to _blank, or "Open in Same Window" to set it to _self.
Example − Working with Named Frames
Following example shows how to target a specific frame using the target property −
<!DOCTYPE html>
<html>
<head>
<title>Form Target with Named Frame</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Form Target with Named Frame</h2>
<form id="frameForm" method="get" action="/search">
<label>Search: <input type="text" name="query" value="HTML tutorials"></label>
<input type="submit" value="Search">
</form>
<br>
<button onclick="targetFrame()">Target Result Frame</button>
<button onclick="targetTop()">Target Full Window</button>
<p id="info">Target: Default</p>
<iframe name="resultFrame" width="100%" height="200" style="border: 1px solid #ccc; margin-top: 10px;"></iframe>
<script>
function targetFrame() {
document.getElementById("frameForm").target = "resultFrame";
document.getElementById("info").innerHTML = "Target: resultFrame (iframe below)";
}
function targetTop() {
document.getElementById("frameForm").target = "_top";
document.getElementById("info").innerHTML = "Target: _top (full window)";
}
</script>
</body>
</html>
This example shows how to direct form submissions to a specific named frame or iframe using the target property.
Common Use Cases
The form target property is commonly used in the following scenarios −
File downloads − Setting target to
_blankprevents the current page from being replaced when downloading filesExternal submissions − Opening form responses in new tabs when submitting to external services
Preview functionality − Showing form results in a separate window for preview purposes
Frame-based layouts − Directing form responses to specific frames in frameset layouts
Browser Compatibility
The form target property is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It works consistently across different platforms and devices.
Conclusion
The HTML DOM Form target property provides control over where form responses are displayed after submission. By setting values like _blank, _self, _parent, _top, or a specific frame name, developers can create better user experiences and handle form submissions according to their application's requirements.
331 Views
