The HTML formtarget attribute
The HTML formtarget attribute sets where the response opens when one particular submit button is used. Values are _self, _blank, _parent, _top or the name of a frame, and they override the form's target for that button, as in formtarget="_blank" for a preview.
Overview
The HTML formtarget attribute chooses where the response appears when one particular submit button sends a form. It overrides the form's target attribute for that submission, so a Preview button can open its result in a new tab while Save loads its response in the current page.
The value is a browsing context name or one of four keywords. _self loads the response in the same frame, _blank opens a new tab or window, _parent uses the parent frame and _top uses the whole window. With no parent frame, _parent and _top act like _self.
A name targets a frame or window. Point formtarget at an <iframe>'s name and the response loads inside that iframe. If nothing has that name yet, the browser opens a new window with that name, and later submissions to the same name reuse it.
Without formtarget, the form's own target applies, then the target of a <base> element, and otherwise the current page. A form sent to _blank opens with noopener, so the new tab's window.opener is null unless the form's rel includes opener.
Syntax
<form action="/invoice" method="post">
<button>Save invoice</button>
<button formaction="/invoice/preview" formtarget="_blank">Preview in new tab</button>
</form>Values
| Value |
|---|
| _self | _blank | _parent | _top | a named context |
Example
<form id="inv" action="/invoice" method="post">
<button>Save invoice</button>
<button formaction="/invoice/preview" formtarget="_blank">Preview (opens in new tab)</button>
</form>
<p id="where">Click a button to see where the response would load.</p>
<script>
document.getElementById('inv').addEventListener('submit', function (e) {
e.preventDefault();
var t = e.submitter.getAttribute('formtarget') || this.target || '_self';
document.getElementById('where').textContent = t === '_blank' ? 'The response would open in a new tab.' : 'The response would replace this page.';
});
</script>Best practices
- Use
formtarget="_blank"for previews, print views and downloads that shouldn't replace a half-filled form. - Say in the button's text that it opens a new tab, so nobody is surprised by the switch.
- Give a target iframe a title attribute so screen reader users know what the frame contains.
- Leave
rel="opener"off such forms unless the new page genuinely needs to script the original one.
Accessibility
A new tab that opens without warning can disorient people who can't see it happen. The W3C technique G201, Giving users advanced warning when opening a new window, covers form submissions too. Add a visible note such as (opens in new tab) to any button with formtarget="_blank".
Frequently asked questions
Where does a formtarget button open the form's response?
How do I open a form result in a new tab from one button?
formtarget=_blank to that submit button. The other buttons keep loading the response in the current tab.
