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
How to use formtarget attribute in HTML?
The formtarget attribute in HTML specifies where to display the response after submitting a form. This attribute overrides the target attribute of the <form> element and is used only with <input type="submit"> and <input type="image"> elements.
Syntax
Following is the syntax for the formtarget attribute −
<input type="submit" formtarget="value" value="Submit">
Where value can be _blank, _self, _parent, _top, or a custom frame name.
Attribute Values
The formtarget attribute accepts the following values −
| Value | Description |
|---|---|
| _blank | Response gets displayed in a new window or tab |
| _self | The default value. The response gets displayed in the same frame |
| _parent | Response gets displayed in the parent frame |
| _top | Response gets displayed in the full body of the window |
| framename | Response gets displayed in a named iframe |
Using formtarget with Submit Buttons
The most common use of formtarget is to provide different submission options within the same form. Users can choose to submit the form in the current window or open results in a new window.
Example
Following example demonstrates the basic usage of the formtarget attribute −
<!DOCTYPE html>
<html>
<head>
<title>HTML formtarget attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Student Registration Form</h2>
<form action="/submit-form.php" method="get">
<label for="name">Student Name:</label><br>
<input type="text" id="name" name="name" value="John Doe" style="width: 200px; padding: 5px;"><br><br>
<label for="subject">Student Subject:</label><br>
<input type="text" id="subject" name="subject" value="Mathematics" style="width: 200px; padding: 5px;"><br><br>
<input type="submit" value="Submit in Same Window" style="padding: 8px 12px;">
<input type="submit" formtarget="_blank" value="Submit in New Window" style="padding: 8px 12px; margin-left: 10px;">
</form>
</body>
</html>
In this example, the first submit button uses the default behavior (same window), while the second button opens the form response in a new window or tab.
Using formtarget with Named Frames
The formtarget attribute can also target a specific named iframe or frame within the document.
Example
Following example shows how to submit form data to a named iframe −
<!DOCTYPE html>
<html>
<head>
<title>formtarget with Named Frame</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Form with Named Target</h2>
<form action="/echo-form.php" method="post">
<label for="message">Enter Message:</label><br>
<input type="text" id="message" name="message" value="Hello World!" style="width: 250px; padding: 5px;"><br><br>
<input type="submit" value="Submit to Current Page">
<input type="submit" formtarget="resultFrame" value="Submit to Frame" style="margin-left: 10px;">
</form>
<h3>Results will appear below:</h3>
<iframe name="resultFrame" width="500" height="200" style="border: 2px solid #ccc;">
<p>This iframe will show form results when submitted.</p>
</iframe>
</body>
</html>
When the "Submit to Frame" button is clicked, the form response appears inside the named iframe resultFrame instead of replacing the entire page.
Using formtarget with Image Input
The formtarget attribute also works with <input type="image"> elements that act as submit buttons.
Example
<!DOCTYPE html>
<html>
<head>
<title>formtarget with Image Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Search Form with Image Button</h2>
<form action="/search.php" method="get">
<label for="query">Search Query:</label><br>
<input type="text" id="query" name="query" value="HTML tutorials" style="width: 200px; padding: 5px;"><br><br>
<input type="image" src="data:image/svg+xml,%3Csvg width='80' height='30' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='80' height='30' fill='%234CAF50'/%3E%3Ctext x='40' y='20' text-anchor='middle' fill='white' font-family='Arial' font-size='12'%3ESearch%3C/text%3E%3C/svg%3E" alt="Search" width="80" height="30" formtarget="_blank">
</form>
</body>
</html>
Clicking the image button submits the form and opens the search results in a new window due to formtarget="_blank".
Overriding Form Target
The formtarget attribute on individual submit buttons overrides the target attribute set on the form element itself.
Example
<!DOCTYPE html>
<html>
<head>
<title>Overriding Form Target</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Form with Different Target Options</h2>
<form action="/process.php" method="post" target="_blank">
<p>Form default target: _blank (new window)</p>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" value="user@example.com" style="width: 250px; padding: 5px;"><br><br>
<input type="submit" value="Use Form Default (_blank)" style="padding: 8px 12px;">
<input type="submit" formtarget="_self" value="Override to Same Window" style="padding: 8px 12px; margin-left: 10px;">
</form>
</body>
</html>
The first button uses the form's default target (_blank), while the second button overrides it with formtarget="_self" to open in the same window.
Browser Compatibility
The formtarget attribute is supported in HTML5 and works in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. It provides a clean way to control form submission behavior without requiring JavaScript.
Conclusion
The formtarget attribute provides flexible control over where form responses are displayed. It allows multiple submit buttons in the same form to have different target behaviors, enhancing user experience by giving users control over how they want to view form results.
313 Views
