Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Form Submission Opens New Tab/Window

You probably knew that you could force a link into opening a new tab or window with the target="_blank" attribute (deprecated, but universally still supported).

<a href="#" target="_blank">link</a>

But you can use the same exact attribute on forms to get the same result:

<form action="#" method="post" target="_blank">
    ...
</form>

Comments

  1. Kartlos Tchavelachvili
    Permalink to comment#

    Nice share! so target becomes the action=”url.html”.

  2. Bradley Rosenfeld
    Permalink to comment#

    And I used to use java script to do this :O Thanks for sharing

  3. Bob
    Permalink to comment#

    A nice feature, but unfortunately, the target attribute has been deprecated.

    http://www.w3schools.com/tags/att_form_target.asp

  4. dan
    Permalink to comment#

    so if it is deprecated, what would be the alternative to open a form in a new window?

  5. Peter Hanley
    Permalink to comment#

    Unfortunately, this is not totally ‘universally supported’ – it seems like if you try to have multiple forms doing this on one page (in a data grid, for example) – submitting one form kills the others so you get nothing on click (so far confirmed on latest webkit (safari 5.1, chrome 13), but the trick still works with Firefox 6)

    So if you’re using this on a site with multiple forms, you may wish to take a look at alternatives.

  6. Peter Hanley
    Permalink to comment#

    Of course after being all doom & gloom I found the solution – each form must have a unique id attribute in order for this to work in Safari:

    This doesn’t work:

    <form action="#" method="post" target="_blank">
    <input type="submit">
    </form>
    <hr>
    Then this: 
    <form action="#" method="post" target="_blank">
    <input type="submit">
    </form>

    but this does:

    Click this: 
    <form id="form1" action="#" method="post" target="_blank">
         <input type="submit">
    </form>
    <hr>
    
    Then this: 
    
    <form id="form2" action="#" method="post" target="_blank">
         <input type="submit">
    </form>
  7. Jeff
    Permalink to comment#

    So, can someone elaborate… I need a form with a drop down box with the names of some web pages. Choosing a web page and clicking submit should open to that page (in a new tab). How is this done?

    • Jeff
      Permalink to comment#

      I’ve found the solution I need at stackoverflow.com. The issue got convoluted because I didn’t want to use a regular submit button, as I would have had to create new styles, but already had existing styles for an anchor tag that emulated a button. You can see it in action here: YourBeliefsMatter.com. Anyway, thanks for the post. It was helpful!!

  8. MIB

    Thanks a lot, Great share.

  9. pankaj

    I have problem..
    In my page there is table and number of rows increases the top-margin of table also increases..

  10. raj
    Permalink to comment#

    nice ans it worked for me .
    thanks !!!

  11. Stephen
    Permalink to comment#

    very helpful, thank you :)

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```