HTML and CSS Reference
In-Depth Information
The final segment of our URL is the parameters. This is where the data from your form is transmitted.
The browser will first add a question mark character (?) after the path to signify that everything after this point in the
URL is data.
http://www.html5foundations.com/bookings.php
?
name=Joe%20Balochio
&restaurant=310%20West%2038th%20Street,%20NY
Each of the form fields is then added to the URL as a key-value pair. The key is taken from the
name
attribute on the
form control (more on this later), and the value is just the
value
of the form control at the time the form was sub-
mitted. In the example below, the key for the first piece of data is
name
and the value is
Joe%20Balochio
. Each
key-value pair is separated using an ampersand (&); this is highlighted in bold in the following example.
http://www.html5foundations.com/bookings.php?name=Joe%20Balochio
&
restaurant=310%20West%2038th%20Street,%20NY
Once the browser finishes constructing the URL, it loads the new URL in the current browser window.
Browsers do put a limit on the length of URLs, and therefore, the amount of data that you can submit using the
GET
method. This limit varies depending on the browser, but a limit of 2,000 characters is typical. If you have a fairly
large form or are using
<textarea>
elements, you should use the
POST
method instead.
An advantage of using the
GET
method is that the URL that is generated when the form is submitted can be book-
marked. For example, if you use the
GET
method on a search form the user can bookmark the results page as the
form data that contains the search term is present in the page URL. If you use the
POST
method they could not do
this because the data is passed 'behind the scenes.'
Form Data Encoding
You may have noticed some strange characters that appear within the example URL (these are in bold below):
name=Joe
%20
Balochio&restaurant=310
%20
West
%20
38th
%20
Street
,
%20
NY
Surely humans didn't write these?
Correct. URLs cannot contain spaces or special characters, and so the browser automatically encodes any spaces
or special characters in your data by changing them to a hexadecimal ASCII code. You don't need to worry too
much about this; just note that the browser encodes data for you.
The POST Method
The
POST
method should be used when performing any action that will involve data being saved to a database.
While it is also technically possible to save data using the
GET
method, it is considered a security best practice to use
POST
for these actions.
The URL for forms that use the
POST
method is constructed in largely the same way. The difference is that the form
data is not added to the URL as parameters (but it is still encoded). Instead, the data is effectively sent in the back-
ground and completely hidden from the URL. The data can still be picked up and processed by the server.
