HTML formtarget Attribute

What You’ll Learn

The formtarget attribute lets developers specify where to display the response after submitting a form. Applied to submit buttons, it overrides the form’s target attribute for that one submission—opening results in the same tab, a new tab, or a named iframe.

Purpose of formtarget Attribute

The primary purpose of the formtarget attribute is to define the browsing context where the response to a form submission should be displayed. By default, the form’s target attribute (or _self if omitted) controls this behavior.

With formtarget, individual submit buttons can send the response elsewhere—for example, opening a printable receipt in a new tab while keeping the main page unchanged, or loading results into an embedded preview iframe.

📝 Syntax

Add formtarget to a submit button with a browsing context name:

<form action="/submit" method="post" target="_blank">
  <input type="text" name="query">
  <input type="submit" value="Open here" formtarget="_self">
  <input type="submit" value="Open new tab" formtarget="_blank">
</form>

Syntax Rules

• Valid on submit controls: <button type="submit">, <input type="submit">, and <input type="image">.
• Overrides the parent form’s target only for that button’s submission.
• Values mirror the form target attribute: _self, _blank, _parent, _top, or a frame name.
• Works with formaction, formmethod, and formenctype for full per-button control.

💎 Values

The formtarget attribute accepts various values to determine where the form response is displayed. Common values include:

• _self — Default behavior. Displays the response in the same window or tab that submitted the form.
• _blank — Opens the response in a new browser window or tab.
• _parent — Targets the parent browsing context of the current frame.
• _top — Targets the top-level browsing context (the full window, breaking out of all frames).
• framename — A custom name matching an <iframe name="..."> where the response loads.

<!-- Same tab -->
<button type="submit" formtarget="_self">Submit</button>

<!-- New tab -->
<button type="submit" formtarget="_blank">Open in new tab</button>

<!-- Named iframe -->
<button type="submit" formtarget="previewFrame">Preview</button>

Applicable Elements

Form target vs formtarget

Examples Gallery

Override form target on a submit button, open results in a new tab, load into a named iframe, and set formTarget dynamically with JavaScript.

<form action="submit.php" method="post" target="_blank">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">

  <label for="password">Password:</label>
  <input type="password" id="password" name="password">

  <input type="submit" value="Submit" formtarget="_parent">
</form>

<form action="/receipt" method="get">
  <input type="text" name="orderId" value="12345">
  <button type="submit" formtarget="_blank">View receipt in new tab</button>
</form>

<button type="submit" id="submitBtn">Submit</button>

<script>
  document.getElementById("submitBtn").formTarget = "_top";
</script>

♿ Accessibility

• Warn when opening new tabs — If formtarget="_blank", indicate in button text that a new tab will open.
• Avoid unexpected navigation — Users should understand whether they stay on the page or leave it.
• Do not trap focus — New windows should be keyboard-accessible and closable.
• Label iframe targets clearly — When loading into a preview frame, provide a heading or label for that region.

💡 Best Practices