HTML.form.guide

Using the HTML Form target attribute with iFrames

html form target iframe html form target

iFrames, or inline frames, have been a part of HTML for many years and allow you to embed another HTML page within your current page. This is often useful when you want to integrate third-party content or isolate some part of your site.

The “target” attribute is part of the

tag and is used to determine where the response from the form submission will be displayed. One of its possible values is the name of an iFrame that exists on the page.

Using the “target” Attribute with iFrame

Suppose we have a form in our “form.html” file. When this form is submitted, we can use the “target” attribute to dictate where the form response should be displayed. If we want the response to be displayed within the iFrame, we can use the “target” attribute like this:

<form action="/submit_form" method="get" target="myFormResponse">
  <label for="email">Email:</label>
  <input type="text" id="email" name="email">
  <input type="submit" value="Submit">
</form>

Where Iframe code is:

<iframe name="myFormResponse" width="500" height="300">
</iframe>

Notice that the “target” attribute in the <form> tag is set to “myFormResponse”, which is the name of the iFrame. This means that when the form is submitted, the response will be loaded inside the “myForm” iFrame.

This feature can be useful in several ways. For instance, it can help keep the user’s focus on the form without navigating away from the page. It can also be useful in single-page applications (SPAs), where you don’t want form submissions to cause a full page reload.

However, be sure to keep the user experience in mind. Unexpectedly changing the content of an iFrame might confuse some users, especially those using assistive technologies.

See Also

Categories