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. 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. Permalink to comment#

    Great share.. Thanx.. :)

  6. 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.

  7. 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>
    
  8. Permalink to comment#

    Great Share.. Thnx.

  9. Permalink to comment#

    Oh , I never tried this , nice share .

  10. 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?

    • 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!!

  11. MIB

    Thanks a lot, Great share.

  12. pankaj

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

  13. Permalink to comment#

    Thanks Chris!

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".