Coding with Jesse

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

November 3rd, 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 on November 3rd, 2007

Michael

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 on November 3rd, 2007

Jesse Skinner

@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 on November 5th, 2007

Dave

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 on November 5th, 2007

Jesse Skinner

@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 on November 22nd, 2007

Matthew James Taylor

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 on November 23rd, 2007

Michael

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 on November 23rd, 2007

Jesse Skinner

@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 on November 23rd, 2007

Michael

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 on November 23rd, 2007

Jesse Skinner

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 on November 23rd, 2007

Jesse Skinner

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 on December 6th, 2007

sandeep

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 on September 15th, 2008

Sean

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 on September 15th, 2008

Jesse Skinner

@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 on September 17th, 2008

Sean

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

What would a corresponding PHP file look like? Thanks

15 . Sean on September 17th, 2008

Sean

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 on September 17th, 2008

Jesse Skinner

@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 on February 4th, 2009

Stephen R

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 on February 4th, 2009

Jesse Skinner

@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 on February 20th, 2009

Frank Weindel

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 on February 20th, 2009

Frank Weindel

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 on March 9th, 2009

JoeCoder

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 on April 1st, 2009

Andy

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 on May 18th, 2009

Art

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 on June 13rd, 2009

web development

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

thanks for this.

25 . ☨ on June 13rd, 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 on August 15th, 2009

holyhttp

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 on November 12nd, 2009

Kawika

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 on December 9th, 2009

python

What does action="." means?

29 . Optio on December 10th, 2009

Optio

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

30 . James Gray on December 14th, 2009

James Gray

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 on December 14th, 2009

Jesse Skinner

@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 on May 13rd, 2010

Peter Brand

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 on September 2nd, 2010

Montreal website design company

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

34 . christine joseph on October 26th, 2010

christine joseph

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 on March 6th, 2011

free seo report

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

36 . zoe somebody on May 11st, 2011

zoe somebody

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 on August 12nd, 2011

Dan

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 on November 28th, 2011

Evgeniy Dolzhenko

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 on January 5th, 2012

sunny

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 on January 5th, 2012

sunny

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 on February 12nd, 2012

Ged

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 on February 12nd, 2012

Ged

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 on April 12nd, 2012

mayank agarwal

what does form action="#" do>

44 . Srinivas on August 20th, 2012

Srinivas

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

Comments are closed, but I'd still love to hear your thoughts.