Advanced HTML Tutorial
Part 3 - Forms
Interactivity is increasingly becoming a major part of many websites. Although the systems are all run by backend software, such as PHP or ASP, there must still be a front-end interface for the visitors to use. The sending of data to a script on a website is achieved by using HTML forms.
The basic idea of an HTML form is the same as that for a paper form. You are presented with a number of related sections of a page where you must input information. There are a number of different ways to enter data, including typing it in, selecting it from a list and ticking boxes. HTML deals with forms exactly the same way as you would with a paper form. There are groups of items and single items all gathered together in one large form and, like a paper form, the HTML tells the browser where to return it to.
Defining A Form
In HTML the first thing you must do is to define a form as a whole. This is done using the tags:
As with any other HTML tag, they apply to everything in between, so everything you contain inside form tags will be part of that particular form. You are not limited to one form on a page, though, as you can have as many sets of <form> tags as you need (for example to provide a login form and a signup form on the same page) as long as they are not nested. <form> is an invisible tag, as it will not change the way in which the page is displayed (although some browsers seem to leave a small space after a form).
A form tag on its own is almost completely useless. There are three main attributes you can use, though, which make the form more useful. The first of these is action, which is used as follows:
The action of a form tells the browser where to send the data entered, in this case the file at http://yoursite.com/cgi-bin/formmail.cgi. This file will then be responsible for dealing with the data. The useful thing about form tags is that the script you are sending the data to can be anywhere on the web, so you are not simply limited to scripts on your site.
The second attribute is the method, which is either used as:
These two methods, POST and GET, refer to the standard HTTP metods of sending data across the internet. The GET method puts the data into the URL of the next page, so that it is visible in the browser's address bar, for example:
This has both an advantage and a disadvantage. The advantage is that URLs can easily be typed in or linked to using GET, although when using forms this is not vital. The disadvantage of this, though, is that the data can be seen by anyone looking at your browser and it can show up in the history. If you are sending sensitive information from your form, you shouldn't use this method.
POST is slightly different. Instead of encoding the form data into the URL, it is sent in a special data stream. This means that it is invisible in the browser, so is far more secure than GET (although sensitive information should still not be sent without encryption). By default a form will submit using GET unless you specify the method (although it is good practice to always specify whichever one you are using).
Usually form tags only ever include the method and action attributes, but occasionally you will need to use the name attribute. This is used as:
In practically every case you should use both the method and action tags when defining a form, and should only use name if you particularly need it.
The most basic type of form input is the standard textbox, like this:
It allows the user to enter text and will send this data to the processing script when the form is submitted. Nearly all input options use the same basic tag, which is the:
tag. This is combined with a number of attributes to provide different types of input on your form. To give a standard text box, you use the following:
This is not quite enough to have a working text box, though, as there is another inportant attribute, name. Name allows you to give the textbox a name with which the data can be referred to later. It should be entered without spaces or special characters, but it is important that each