HTML Form target Property: Controlling Submission Destinations

The target property of an HTML form specifies where to display the response after submitting the form. It’s similar to the target attribute used with anchor (<a>) tags, allowing you to control whether the response opens in a new tab, the same frame, or another named frame.

What is the target Property?

The target property determines the browsing context (e.g., a tab, window, or iframe) where the server’s response to a form submission will be displayed. This is crucial for maintaining a seamless user experience and controlling navigation flow within your web application.

Syntax

The target attribute can be set directly in the HTML or manipulated via JavaScript.

HTML:

<form target="target_name">
  <!-- Form elements -->
</form>

JavaScript:

const form = document.getElementById("myForm");
form.target = "target_name";

Possible Values for target

Value	Description
`_self`	Opens the response in the same frame (default).
`_blank`	Opens the response in a new window or tab.
`_parent`	Opens the response in the parent frame. If there is no parent, it behaves as `_self`.
`_top`	Opens the response in the full body of the window, removing any framesets.
`framename`	Opens the response in a named iframe.

Examples

Let’s explore practical examples of using the target property to control form submission destinations.

Example 1: Opening in a New Tab (_blank)

This example demonstrates how to open the form submission response in a new tab.

<form id="formBlank" action="/submit" target="_blank">
  <label for="name">Name:</label><br />
  <input type="text" id="name" name="name" /><br /><br />
  <input type="submit" value="Submit" />
</form>

In this case, when the form is submitted, the response from /submit will open in a new browser tab or window.

Example 2: Opening in the Same Frame (_self)

This is the default behavior, but it’s good to know how to explicitly set it.

<form id="formSelf" action="/submit" target="_self">
  <label for="email">Email:</label><br />
  <input type="email" id="email" name="email" /><br /><br />
  <input type="submit" value="Submit" />
</form>

Here, the response from /submit will replace the current page content.

Example 3: Opening in a Named Iframe

This example requires an iframe with a specific name attribute.

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

<form id="formIframe" action="/submit" target="myIframe">
  <label for="message">Message:</label><br />
  <textarea id="message" name="message"></textarea><br /><br />
  <input type="submit" value="Submit" />
</form>

When the form is submitted, the response from /submit will be displayed within the myIframe iframe.

Example 4: Manipulating target with JavaScript

You can dynamically change the target property using JavaScript.

<form id="formJS" action="/submit">
  <label for="username">Username:</label><br />
  <input type="text" id="username" name="username" /><br /><br />
  <input type="submit" value="Submit" id="submitBtn" />
</form>

<button onclick="changeTarget()">Open in New Tab</button>

<script>
  function changeTarget() {
    const form_js = document.getElementById("formJS");
    form_js.target = "_blank";
  }
</script>

Clicking the button will change the form’s target to _blank, causing the submission to open in a new tab.

Example 5: Using _parent and _top

These values are primarily relevant when working with framesets or iframes.

<!-- Assume this HTML is within an iframe -->
<form id="formParent" action="/submit" target="_parent">
  <input type="submit" value="Submit to Parent" />
</form>

<form id="formTop" action="/submit" target="_top">
  <input type="submit" value="Submit to Top" />
</form>

• _parent: Loads the response in the parent frame (the frame containing the current iframe).
• _top: Loads the response in the full window, breaking out of all framesets.

Note: _parent and _top only have an effect when the current page is loaded inside an iframe. 💡

Real-World Applications

• E-commerce: Opening order confirmation pages in a new tab to keep the shopping cart accessible.
• Admin Panels: Submitting form data to update an iframe without navigating away from the main admin interface.
• Content Management Systems (CMS): Previewing content in a new tab before publishing.
• Single-Page Applications (SPAs): Using iframes with targeted form submissions to handle specific tasks without full page reloads.

Tips and Best Practices

• User Experience: Choose the target value that provides the best user experience. Opening in a new tab might be appropriate for certain actions, while staying in the same frame is often preferred for general form submissions. 🧑‍💻
• Accessibility: Be mindful of accessibility when using target="_blank". Consider adding a visual cue (e.g., an external link icon) to indicate that the link will open in a new tab.
• Security: Be cautious when targeting iframes, especially when dealing with cross-origin content. Ensure proper security measures are in place to prevent potential security vulnerabilities. 🛡️

Conclusion

The target property of HTML forms offers a powerful mechanism to control where form submission responses are displayed. Understanding the different target values and their implications allows you to create web applications with intuitive navigation and a seamless user experience. By using the target property effectively, you can greatly enhance the usability and functionality of your forms.