HTML Submit formTarget Property: Submit Button Form Target

HTML Submit formTarget Property: Submit Button Form Target

The HTML formTarget property allows you to override the target attribute of the <form> element for a specific <input type="submit"> or <button type="submit"> button. This is particularly useful when you want a specific submit button to submit the form data to a different window, tab, or iframe, without affecting other submit buttons or the default form behavior.

What is the formTarget Property?

The formTarget property specifies the name of, or keyword for, a browsing context (like a tab, window, or iframe) where the form will be submitted. By default, a form’s target is defined by the <form> element’s target attribute. The formTarget property on a submit button overrides this default behavior for that specific button.

Syntax

The formTarget attribute is used within the <input type="submit"> or <button type="submit"> tag:

<input type="submit" formTarget="_blank|_self|_parent|_top|framename" />

<button type="submit" formTarget="_blank|_self|_parent|_top|framename">
  Submit
</button>

Attributes

The formTarget attribute accepts the following values:

Examples

Basic Example: Submitting to a New Tab

This example demonstrates how to use the formTarget attribute to submit a form to a new tab when a specific submit button is clicked.

<form action="/submit" target="_self">
  <label for="name">Name:</label><br />
  <input type="text" id="name" name="name" /><br /><br />
  <input type="submit" value="Submit" />
  <button type="submit" formTarget="_blank">Submit in New Tab</button>
</form>

In this case:

• The default submit button will submit to the same tab (_self).
• The “Submit in New Tab” button will submit to a new tab (_blank).

Submitting to a Named Iframe

This example shows how to submit a form to a specific iframe using the formTarget attribute.

<form action="/submit" target="_self">
  <label for="name2">Name:</label><br />
  <input type="text" id="name2" name="name2" /><br /><br />
  <input type="submit" value="Submit" />
  <button type="submit" formTarget="myIframe">
    Submit to Iframe
  </button>
</form>

<iframe name="myIframe" width="300" height="200"></iframe>

Here, clicking the “Submit to Iframe” button will load the /submit URL in the myIframe iframe.

Overriding the Form’s Target Attribute

This example demonstrates how the formTarget attribute on a submit button overrides the target attribute defined in the <form> tag.

<form action="/submit" target="_blank">
  <label for="name3">Name:</label><br />
  <input type="text" id="name3" name="name3" /><br /><br />
  <input type="submit" value="Submit" />
  <button type="submit" formTarget="_self">
    Submit in Same Tab
  </button>
</form>

In this setup:

• The <form> element has target="_blank", so by default, submitting the form would open in a new tab.
• However, the “Submit in Same Tab” button has formTarget="_self", which overrides the form’s target attribute, causing the form to submit in the same tab when that button is clicked.

Real-World Application: Previewing Content in an Iframe

Consider a content management system (CMS) where you want to allow users to preview content in an iframe before submitting the final version.

<form action="/save" method="post" target="_self">
  <label for="content">Content:</label><br />
  <textarea id="content" name="content" rows="10" cols="50">
    Enter your content here...
  </textarea
  ><br /><br />
  <button type="submit">Save</button>
  <button type="submit" formTarget="previewFrame" formaction="/preview">
    Preview
  </button>
</form>

<iframe name="previewFrame" width="100%" height="400"></iframe>

In this scenario:

• The “Save” button submits the content to the /save endpoint in the same tab.
• The “Preview” button submits the content to the /preview endpoint, which renders the content in the previewFrame iframe, allowing users to see a preview before saving.

Tips and Notes

• Accessibility: Ensure that users are aware when a form submission will open in a new tab or window. Use visual cues or text descriptions to indicate this behavior.
• Validation: The formTarget attribute does not affect form validation. If you need to bypass validation for a specific submit button, use the formNoValidate attribute.
• Dynamic Targets: While formTarget is static, you can use JavaScript to dynamically set the target attribute of the <form> element based on user interactions, providing more flexible control over submission targets.

Browser Support

The formTarget attribute is well-supported in all modern browsers:

• Chrome
• Edge
• Firefox
• Safari
• Opera

Conclusion

The formTarget property is a valuable tool for web developers, providing the flexibility to control where form data is submitted on a per-button basis. By understanding its syntax, attributes, and use cases, you can create more dynamic and user-friendly web forms. This functionality is particularly useful in scenarios where different submission targets are required for different actions, such as saving, previewing, or submitting data to different endpoints.