Forms and buttons: Sending data to the server

Using google is an everyday event for a large percentage of the human population. Ever wonder what is going on when you hit the button? Here’s a working example which searches this site (right click and save then double click it to try it out). Ignore the complicated header, it’s just so the example validates.

We surround the information to be sent in a FORM tag:

<form action="/" method="get">

The ACTION attribute tells the browser where to send the data. The METHOD gives the method of sending the data, usually either GET (the data is encoded and sent in the URL like on a google search) or POST (the data is sent in the body of the HTTP request – basically this means the user doesn’t really see it and more data can be sent, even file uploads)

<input name="s" value="" />

This gives a box for the user to enter data which will be sent when the submit button is pressed. The VALUE attribute allows you to specify an initial value. The NAME attribute gives the name for the data sent (more on that in a moment)

<input type="submit" value="Search" />

This gives the button to submit the form data and the VALUE attribute gives the button caption.

OK, so that’s the basics and that’ll do most people. Now I’m going to explain the encoding that’s going on and introduce hidden data in the next example. This is a good example to play around with and make changes because it posts data to itself (it doesn’t do anything with the data though!) so I’d recommend saving a local copy. Try changing METHOD to POST, for example. There’s a HIDDEN value that’s sent called “ucannotseeme”. This is handy to send data that you don’t want a user seeing (say a session ID) and changing.

Hit the button without changing anything and you’ll see this on the end of your URL in the browser window:


Let me break that down:

“formtest2.html” – that’s the URL of the page.

“?” – There’s some data coming.

“message1″- the first data item is called “message1″

“=” – it’s value is coming…

“Things+%26+stuff” – This is the data, it’s URL-encoded (see below), the “%26″ is an encoded ampersand and the “+” is an encoded space

“&” – more data is coming

“ucannotseeme” – the next data item is called ucannotseeme. This is from a HIDDEN input value. Look at the HTML source for this line: <input type=”hidden” name=”ucannotseeme” value=”boo!” />

“=” – here comes it’s value… wait for it…

“boo!” – that’s the value for the second data item.

“&” – another data item is coming.

“message2″ – it’s name is “message2″

“=” – it’s value is…

“Hello+World” – This is URL-encoded too

Look in the HTML source for the example and you’ll see that the ampersand which appears on screen in your browser has been correctly encoded in the HTML.

Share this:
Share this page via Email Share this page via Stumble Upon Share this page via Digg this Share this page via Facebook Share this page via Twitter

Leave a Comment