• Use an empty action to submit a form to the current page

    Nov 3 2007

    The title says it all: you can use an empty action attribute on a form to submit that form to the current page. This means you don't need to use server-side scripting (using REQUEST_URI or PHP_SELF or whatnot) to write the current URL into the HTML.

    The following is perfectly valid:

    <form action="" method="post">
        <p><input type="submit"/></p>
    </form>
    

    Now beware, the action attribute is mandatory, and it must contain a valid URI. But according to the URI RFC, an empty URI is still a URI:

    4.2. Same-document References

    A URI reference that does not contain a URI is a reference to the current document. In other words, an empty URI reference within a document is interpreted as a reference to the start of that document, and a reference containing only a fragment identifier is a reference to the identified fragment of that document. Traversal of such a reference should not result in an additional retrieval action. However, if the URI reference occurs in a context that is always intended to result in a new request, as in the case of HTML's FORM element, then an empty URI reference represents the base URI of the current document and should be replaced by that URI when transformed into a request.

    So there you have it. Enjoy.

  • Comments

    1. Michael at 4:10pm on November 3, 2007

    Thanks for this tip. I think. It definitely makes sense.

    Can you further illuminate a noob with an example of how this instance might be put into play?

    2. Jesse Skinner at 4:17pm on November 3, 2007

    @Michael - well let's say you have a comments form on a blog post template, and you want the form to submit to the blog post's URL. You would either have to dynamically put the URL into the form like this (in PHP):

    <form action="<?= $_SERVER['REQUEST_URI'] ?>" method="post">

    or you could just do this:

    <form action="" method="post">

    Of course it's not a big deal to stick the URL in. But it's nice to know there's a short cut too.

    3. Dave at 4:17am on November 5, 2007

    This is very cool. Do you know if all browsers support it? What about form action="#section"?

    Also, if you are currently browsing index.html#section and submit a form then will the form get posted to the anchor?

    Not sure if it would be useful, but it's interesting to know.

    4. Jesse Skinner at 4:24am on November 5, 2007

    @Dave - all the major browsers support it, but with so many out there it's very possible that this might trigger a bug in some browsers, and not submit or submit to the wrong page.

    With an anchor like action="#section" - this worked as expected in Firefox. It sort-of worked in Internet Explorer too -- the browser scrolled down to the anchor section, although the actual #section anchor was dropped from the URL if method="get"!

    I wonder what other browsers would do...

    5. Matthew James Taylor at 10:10pm on November 22, 2007

    This is excellent!  - I just tested it on rewritten URLs using Mod Rewrite and it works there too!

    Thanks for the tip Jesse, this is a great blog!

    6. Michael at 10:53am on November 23, 2007

    Jesse, just a quick comment/observation.

    I'm not sure if this is an wordPress bug or not. I subscribed to this feed at my first comment above, and twice now i've received email updates on this post that are obviously spam related.

    Interestingly enough, when i come here to this post, those 'comments' of course are not to be seen (thank goodness).

    Is this a case where people/bot has commented, and you've deleted comment, but only after the app has already sent out the notice to subscribers?

    Just thought I'd let you know.

    Michael

    7. Jesse Skinner at 10:58am on November 23, 2007

    @Michael - yeah, those were spam comments posted to this page, and I deleted them as soon as I saw them. Sorry you had to see them too.. I only get about 2 spam comments a week so I guess you were just really unlucky. I guess there's no proper solution except to unsubscribe from notifications.

    BTW, I'm not running WordPress, I'm running handmade blog software :)

    8. Michael at 11:10am on November 23, 2007

    Thanks Jesse.

    and sorry for the w/p dis. I think on another post you had mentioned the fact this blog was hand-tooled.

    Is your 'commenting' section completely hand-tooled as well?

    Given your prowess, perhaps the inclusion of some sort of captcha-like 'comment protection' exercise might make a great tutorial-post for FOW. I'd be happy to volunteer artwork for it.

    Thanks again for your blog.  :)

    9. Jesse Skinner at 11:13am on November 23, 2007

    Yeah I made the comments part too. And there is actually a bit of a CAPTCHA using JavaScript (when JS is enabled, the CAPTCHA is auto-filled). I wrote about it here:

    http://www.thefutureoftheweb.com/blog/avoiding-comment-spam-with-javascript

    I'm not exactly sure how the 2 comment spams a week get through, maybe they're not bots?

    10. Jesse Skinner at 11:16am on November 23, 2007

    Oops, just realised that I'd written only about my older technique that simply required JavaScript. I've since replaced it with a simple CAPTCHA instead. Disable JavaScript to see what I mean.

    11. sandeep at 5:45am on December 6, 2007

    hi,
    how to post forms data to an email address or to the web server FTP with out using either client-side scripting or server-side scripting.plzzz help me in this issue

    12. Sean at 8:15pm on September 15, 2008

    I am new to JavaScript. I am trying to add comments feature to my web site. I have added the form action code to my web page but it still doesn't work. Could you tell me what else should I do? Thanks.

    13. Jesse Skinner at 8:42pm on September 15, 2008

    @Sean - depends on how much code you have there already. If you mean you just copied the HTML code over, you'll need to have server-side code using PHP, ASP, Ruby, etc. which takes the form data, adds it to some database, and then later retrieves the comments and displays them on the page.

    If you already have all this in place and are still having trouble, feel free to post a link to the page here and maybe someone can help you out.

    14. Sean at 11:35am on September 17, 2008

    Here is my web page - http://www.infokay.net/medevil_urine.html

    What would a corresponding PHP file look like? Thanks

    15. Sean at 7:15pm on September 17, 2008

    All I want is to allow visitors to add comments to my web page. Do I need MySQL? All messages can be saved right on the web page. Right? Does this page use MySQL? Thanks

    16. Jesse Skinner at 10:40pm on September 17, 2008

    @Sean - yes, this site uses a MySQL database to store comments and blog posts. They are not stored in the web page itself. The web page as you see it is created from the contents of the database every time it loads.

    It would be out of the scope of a comment (perhaps even a blog article) to explain the code needed to implement comments. I suggest searching the web for PHP blog comment examples and tutorials, or consider using Wordpress or another blog package to handle this stuff for you.

    17. Stephen R at 1:18pm on February 4, 2009

    So what happens if you do this from a page such as index.php?x=123

    Does it return to index.php?x=123 or just the base index.php ?

    18. Jesse Skinner at 1:20pm on February 4, 2009

    @Stephen R - I'm not sure - maybe you could try it out in the different browsers and let us know! It'd be really interesting to see how this plays together with method="GET".

    19. Frank Weindel at 3:25pm on February 20, 2009

    At a website I'm working for we use the <base> tag to set the base URL for the entire site to our domain root. We have a form which uses a blank action attribute and on the versions of Firefox, IE, and Safari I've tested, it points correctly to the current page. However I had a user report that the form was taking him to our domain root, leading me to believe that some browsers/versions might be interpreting it as a relative URI and tacking the base URL in front of it. He said he was using Safari. I'm still in correspondence with him to find out what version it is.

    20. Frank Weindel at 8:00pm on February 20, 2009

    It was version 3.2.1 on Mac. I tested the latest Safari for Windows version 3.2.2 and I experienced the same problem.

    21. JoeCoder at 11:14am on March 9, 2009

    Here is another way to submit a form to the current page:

    <form method="post">

    In other words, don't even mention action.

    Or you can simply do this (which submits the form to the current page and defaults to method="get"):

    <form>

    22. Andy at 5:49am on April 1, 2009

    well .. try that in GoogleChrome .. the action attribute is required and must not be empty ! In chrome empty action means root domain page and not current page !

    23. Art at 12:21am on May 18, 2009

    WARNING - If your page contains a <base> tag, using action="" will crash in Google Chrome.  Leaving the "action" attribute out of the <form> tag altogether will prevent you html from validating as the "action" attribute is required for the <form> tag.

    24. web development at 3:56am on June 13, 2009

    I am trying to add comments feature to my web site.

    thanks for this.

    25. ☨ at 8:02am on June 13, 2009

    @JoeCoder: Action is required attribute in commonly used standards.
    @Frank: If you read the RFC's section 4.2. carefully, it states that if base is defined, empty URI in action should point to it.

    26. holyhttp at 11:24am on August 15, 2009

    Using an empty "action" attribute in a form reduces form portability. Just because an empty form's "action" attribute works does not mean we have to become sloppy and leave it out altogether.

    Let's just for example imagine a subscription form you would like to display on each page throughout your entire web site. In such as case if you started out with an empty action attribute your form will only work on the original page it was meant to be placed in.

    You will have to go to some retweaking to make it work on other pages. Adopting those bad habits can become a second nature that would be costly in the long run.

    Standards are set for a valid reasons and we should all do our best to subscrive to them.

    Thanks for this post though Jesse.

    27. Kawika at 3:18pm on November 12, 2009

    Great post.  I encountered an empty action attribute in the WordPress MU code and didn't know what it meant.  Googling about it brought me to this post!  Thanks for the great post!

    28. python at 2:29pm on December 9, 2009

    What does action="." means?

    29. Optio at 8:18am on December 10, 2009

    @python: It means submit the form to the default page of the current directory.

    30. James Gray at 12:25am on December 14, 2009

    Thank you for the info on a empty attribute.
    I was doing a g search to look for optional input type values ''text'' that could be used for the input type. As i study PHP knowing it is a loosely typed language i figure the html would have some options for a input type.
    any way back at the ranch with the empty action attribute, i saw a attribute of color for a input type, i think there was also a option for text as well, would that lead anybody to offer a change of text color and font aside from J Script or PHP.

    31. Jesse Skinner at 12:02pm on December 14, 2009

    @James - I believe you're talking about one of the new input types in HTML 5:

    http://dev.w3.org/html5/markup/input.color.html

    You're right, the idea is that the browser will have a built-in color picker that works without JavaScript. I don't think any browsers support this yet, though.

    32. Peter Brand at 12:54am on May 13, 2010

    This is an old article, but I thought it interesting to post a side effect of leaving the action blank on a form.

    In Classic ASP if the URL of the page contained a querystring, then that will be built into the action. The result is that BOTH the Request.QueryString AND Request.Form collections will contain data.

    E.G Say you navigate to a page with the URL "http://xyz.com/page1.asp?a=1" and then on that page have a form with action blank containing input boxes with names of "a" and "b".  When the form is submitted; Request.Form("a"),  Request.Form("b"),  Request.Querystring("a") will ALL contain data.  Request("a") will probably contain an array.

    I haven't tested this with other web servers.

    33. Montreal website design company at 3:11pm on September 2, 2010

    I am fully agree with Peter. This post should be redefined

    34. christine joseph at 10:38am on October 26, 2010

    You have some nice points here. I done a research on the topic and got most people will agree with your blog.

    35. free seo report at 10:35pm on March 6, 2011

    Thanks. I just thought there its a kind of trick leaving action=""
    Many Thanks.

    36. zoe somebody at 3:23pm on May 11, 2011

    Though HTML5 continues to permit (supposedly) the empty action attribute, in the HTML5 spec leaving it out entirely to indicate the form should post to the current page is acceptable and indeed is the only way I could validate a form.

    form action="" (wouldn't validate for HTML5 today)
    form (would validate with the action omitted entirely)

    Hope that helps somebody.

    37. Dan at 5:10pm on August 12, 2011

    Where do I find the submission if I leave ation=""?
    You say it goes on the same page but where do I physically find it?

    38. Evgeniy Dolzhenko at 5:25am on November 28, 2011

    Just what I was looking for, thanks!

    Would like to learn more about HTML5 way, should the action really be omitted to be valid HTML5?

    39. sunny at 5:00am on January 5, 2012

    hi i am sunny i want to  post form  data to same page & save on the page but when i recreate last entry get deleted .kindly help me i will be thankfulto you

    40. sunny at 5:01am on January 5, 2012

    hi i am sunny i want to  post form  data to same page & save on the page but when i recreate last entry get deleted .kindly help me i will be thankfulto you. i posted <html>
    <body>
    <form action="<?= $_SERVER['REQUEST_URI'] ?>" method="post">
    Name: <input type="text" name="fname" />
    Age: <input type="text" name="age" />
    <input type="submit" />
    </form>

    Welcome <?php echo $_POST["fname"]; ?>!<br />
    You are <?php echo $_POST["age"]; ?> years old.

    </body>
    </html>

    41. Ged at 6:22am on February 12, 2012

    Sunny if I'm reading you right you're not saving the values anywhere. Each time you execute the form the form is wiped clean - all variables will be overwritten with new values. If you want to keep them you'll need to save them somewhere else, usually a database.

    Lovely little post Jesse :-) short, clear and exactly what I needed.

    42. Ged at 6:26am on February 12, 2012

    http://www.w3.org/TR/html5/association-of-controls-and-forms.html#attr-fs-formaction

    "The action and formaction content attributes, if specified, must have a value that is a valid non-empty URL potentially surrounded by spaces."

    so the empty string trick does break html5.  Joy >.<

    43. mayank agarwal at 11:56pm on April 12, 2012

    what does form action="#" do>

    44. Srinivas at 8:48am on August 20, 2012

    if i give empty space action="" .In ie 8 it not getting cuurent url.
    but if i use
    <form action="<?= $_SERVER['REQUEST_URI'] ?>" method="post">

    am getting current url.
    Thank u

    Commenting is now closed. Come find me on Twitter.