TL;DR: You can effectively
POST information using a single form. The trick is to set a query string in your
action – the form is still
POSTed, but the server will see the query string as
GET data. Also, if a user comes to your web page with a query string already set, that query string will be retained when
POSTing a form, as long as you use the empty action (
action="") for your form.
HTML forms are a rudimentary part of web deveopment, but you can be productive implementing them without a lot of specialized knowledge. That’s a plus and a minus, since there are some “gotchas”. Here is a quick review of some things that might have escaped your notice.
an empty action attribute?
You can add a form to a page simply by enclosing some content with the
<form> tag. This tag does not require any attributes. Here’s an example:
<form> <div><label>topping: <input></label></div> </form>
In this example, nether the
method nor the
action attribute are specified. What happens in this case? Can this form be submitted? Here’s a sample page which has only this form on it so you can experiment with it. (The quick answer is yes, the form submits in Chrome, but no actual data is submitted, so the form is not useful.)
In this next example, the form also has no attributes. However, the input is named – it has a
name attribute, like this:
<input name="topping" value="pepperoni">
Take a look to see if this example with a named input works to send request data to the server. (It does! You will have to type something into the form and hit enter for it to work.)
Here’s a page which submits two variables, “topping” and “crust”, using a blank form (
<form>), again. Does it work? Try it! (The quick answer is “no!” – even though both inputs are named.) I only tested this in Chrome, and I don’t think the spec is clear about how to deal with this case. It does show you that it’s important to be very clear about the contents of your forms. In this case, adding a submit button fixes the problem. Here’s a demo which fixes the problem by adding the submit button.
Given the quirkiness of those forms above, usually you will want to specify the form’s
action attributes, and also name all the inputs, like this:
<form action="topping.php" method="POST"> <div><label>topping: <input name="topping"></label></div> </form>
Notes about the
actionshould be a valid URI; the spec doesn’t say what will happen if your URI is not valid.
URIs can be relative, like
- Important: the URI can include a query string, like
- If the form’s
actionis the empty string, then the
actiondefaults to the URL of the document that contains the form – the URL of the page that you’re currently looking at. I couldn’t find anything in the spec that says what happens if the form does not even specify the
action. I think most browsers treat this as the empty string.
Here’s a page which contains several different forms, with different
actions set. You can play around with that demo to see how the different types of
action attributes work.
what about that query string?
If a user comes to a web page that has a query string, and your form’s action is empty, then when you submit the form, the URL for the resulting page will contain the original query string (the address bar will show the URL with the query string). Here’s an example – this link has a query string, and the form on the page has an empty action. Notice that when you submit the form, the server sees both
GET data and
POST data. Try it!
So this is a quirk when using a form with an empty
action attribute. It will retain the query string with which the user came to the page – this can be useful when sharing links. Some users will copy the URL in the address bar for sharing, and if that query string is important for what displays on the page, you want it to remain even after a form submission.
It’s also useful for reloading a page. If a user submits a form using a
POST, and then tries to reload the page, they’ll get a question asking them if they want to re-
POST the data. If the user doesn’t want to re-
POST, but does want to reload the page, then they can copy the URL – including its query string – and paste it into the browser’s address bar, and hit enter to avoid the re-
Got comments? Send me an email at email@example.com. If you found this interesting, you can hit the subscribe button above. I write a new post about once a week.