HTTP and HTML Forms
Before start learning PHP or other server-side scripting languages, you must know how do the browser and server transmit information over the HTTP (HyperText Transfer Protocol) and how the form data are extracted.
When you typed a HTTP URL into the address bar, for example, http://www.example.com/index.html . The browser will send a request to www.example.com over your computer’s network. The request will contain many headers telling the browser’s information and which page to request. The request will look like this:
GET /index.html [The browser wants the page index.html] Host: www.example.com [The hostname on the address bar] User-Agent: Mozilla/10.0 Firefox 5.2.5 [Your browser's identifier] Accept: text/html [Your browser is looking for text/html (HTML) document] Cookie: AAA=BBB; CCC=DDD; [Your cookies]
Then the server will parse the request and respond with the content of the page.
HTTP/1.1 200 OK [200 OK means the request is successful] Date: Tue, 15 Nov 1994 08:12:31 GMT [Time on the server] Content-Type: text/html [The type of the document, text/html is the MIME type for HTML] [After one empty line, the content of the page is outputted] <html><head><title>Example Web page</title></head> [......]
Please note that the [bracketed text] are explanations I added.
There are many more HTTP headers, I’m not going to teach you all of them, you can read more at http://en.wikipedia.org/wiki/List_of_HTTP_headers.
When you submitted a HTML form, some additional information will be added to request headers. There are two (and some rare ones such as PUT and DELETE) types of HTTP requests, GET and POST. When you clicked “Search” on Google, you will send a GET request to Google’s server and you will be taken to a result page. You can bookmark the result page, and the search query will appear in the URL (look at the address bar: “http://www.google.com/search?hl=en&q=SEARCH QUERY STRING“), that means the search form’s values appeared in the URL.
POST request is different. The form values do not show up on the URL. Instead, they show up inside the headers. You cannot bookmark a form result of a POST form. Normally, GET requests are used for GETting something, such as searching. Side effects, such as registration, purchase, transaction are sent as POST requests. If you submitted a POST form and you tried to refresh the page, the browser will say “Re-submit form data?”. If you clicked Yes, you will re-purchase something, performed a transaction twice, or anything else.
The form’s method is determined by the <form>’s method attribute, and the form’s target is determined by the action attribute. Set action to “#” if the target of the form is the form itself. Here is an example registration form.
<!-- Starts a new HTML form. The method is POST because a registration is a side effect, and you don't bookmark a registration form result. --> <form action="register.php" method="POST"> <div> <!-- A text field, its name, its value will be sent to the server under the name of 'username'. so the server will access it like $_POST['username'], Request.post['username'] depending on the type of the server software. --> Username: <input type='text' name='username' value='' /><br /> <!-- A password field that does not show up what the user typed. (it will only show "*********") A password field acts like a text field. --> Password: <input type='password' name='password' /><br /> <!-- A radio button. the name will determine the radio button group. The value will determine the value to be sent when it was selected. The checked attribute tells the browser if it should be selected by default. --> Gender: <input type='radio' name='gender' value='male' checked='checked'> Male <input type='radio' name='gender' value='female'> Female<br /> <!-- Submit button submits the form (duh) --> <input type='submit' value='Submit' name='Submit' /> <!-- There are many other types of form controls, such as drop-down, image buttons, lists, they all have a name and value attribute. Please go back to the HTML tutorial you've read to learn more about other form controls. --> </div> </form>
The form values will be included in the request, and the server will read it and take action. It will either register you, or send you back and show an error message.
Here is a pseudocode that will show how the server will handle the form.
// Request.post is all values from a POST request.
// check if the submit button was clicked. (the button's name is 'Submit')
if (Request.post.has('Submit')) {
// validate form
if (!(Request.post.has('username') || Request.post.has('password') || Request.post.has('gender'))) {
output ('<p>You must fill ALL form fields correctly.</p>');
} else {
// register user
registerUser(Request.post['username'], Request.post['password'], Request.post['gender']);
output ('You are registered.')
}
}
Cookies are used to store information to the browser (and they will be read by the server). On Google.com, you can click “Preferences” to change the search preferences, then, the preferences will be saved to your browser (only if cookies are enabled in your browser). The cookies are passed to the server by the Cookie HTTP header and the server will send the Set-Cookie HTTP header to tell the browser to set the cookie. Cookies can expire, determined by the expiry date when the cookie was set.
When you log in to a website, what keeps you logged in? Cookies. The server tells the browser to set the cookie containing the login information or session identifier to keep you logged in. On most login-enabled sites, there is a “Remember Me” option. Most of the sites will make the cookie never expire if you choose “Remember Me”.
1 Comment to HTTP and HTML Forms
My Sites
Other Blogs
Twitter Updates
Tags
Recent Comments
- Acchan on PHP Flaws
- admin on Finished Moving
- Calvin on Finished Moving
- admin on Colony
- Ryan on Colony
Categories
Creative Commons License
Nice tut, SpaceMan! This a very nice blog.
You should put this tutorial on your site, too!