Kaye and Geoff's web page documentation
IntroductionIf you want to interact with people looking at your web pages, you need a way to get information from them. The commonest way to do this is to use a form. Forms allow for a variety of simple input methods normally found in graphical user interfaces - text, buttons, selection boxes and radio buttons. This document looks at how to create and use forms in your web pages.
Defining a form
A form in HTML is enclosed within <form>...</form> tags. A single page may contain multiple forms, but nested forms (ie. one form inside another) are not allowed. However non-form tags can and almost always are used within the <form>...</form> tags, to set out the form and label its fields. The <form> tag usually has two attributes:
The action attribute specifies the URL of the program that will process the form.
The method attribute can have a value of "get" or "post", to indicate how the form data will be sent to the program that will process the form. "Post" is more often used but it depends on how the program which accepts the data is written. There is a complete discussion of these methods in our CGI documentation.
In the example above the output is sent to a CGI (a Perl program called process.pl) whose execution is initiated by the web server. Below is another example, where the contents of the form are emailed directly to the specified address (email@example.com).
To be useful a form must contain one or more form elements, which specify the fields and buttons which are the active parts of the form. There also needs to be a method whereby the user of the form can indicate that they have completed "filling in" the form and that they want to submit the information - this is usually done with a "submit" button. Here is what a simple form might look like (because it is just an example it has been written to transmit no information if you try to submit it):
Input elementsThe <input> tag allows a variety of input elements to be defined, depending on the value of its type attribute (which is therefore required). It has no terminating tag. The possible types are:
Here are a few examples:
The value of the name attribute must be unique among the names used in the form since it is used to identify the data item when the form data are transmitted (see 'Processing forms' below). The exception is for radio buttons, where each member of a group must have the same name. This links the group together, and does not lead to a name conflict, since the group can only return a single value. Every input element, other than submit, reset and image, should have a name attribute.
The meaning of the value attribute depends on the type of input element, as follows:
The size attribute specifies the length (in characters) of the display box for a text or password field while the maxlength attribute specifies the maximum number of characters which will be accepted from a text or password field. The checked attribute specifies that a checkbox or radio button is to be selected by default (ie. when the form is first displayed).
Text, password and hidden elements all accept a single line of text. Hidden fields provide information in the same way as other elements, except that it is fixed and so there is no equivalent visible element on the form. This is useful for passing default information or state information, for example what form the data came from, or which file to read on the server. Note that "hidden" does not mean "secret"; the user can always select "view source" in their browser and see the element definition.
Here is an example of a form with input elements which each return a single line of text. The first defines one text input field of 40 characters, the second defines a secure input field and the third is a hidden field.
Checkboxes are used when you want the person filling in the form to select between zero, one or more possible options, and radio buttons are used when one and only one option is desired. Here is an examples of a form with both:
Select elementsSelections allow you to present multiple, fixed options either as a pop-up or pull-down menu, which means that only one item can be selected; or as a scrolling list, where several, not necessarily contiguous, items can be chosen. Between the <select>...</select> tags which begin and end the definition of a selection box there is a list of options (defined using an unterminated <option> tag) from which one or more items can be selected. For example:
Possible attributes of the <select> tag are:
The selected attribute of the <option> tag specifies that the item is to be selected by default (ie. when the form is first displayed). Here is an example of a form with several select elements:
The input text element is limited to accepting a single line of text. The textarea element allows for the input of an indefinite amount of text containing multiple lines, typically using scroll bars so that the actual size of the input box can be relatively small. Here is an example:
This defines a rectangular input box, five characters high and forty characters wide which will accept multiple lines of text. Anything between the opening and closing tags will be displayed when the field appears, otherwise the box will be blank. The attributes of the <textarea> tag are:
Submitting and resettingIn order to send the data from a form to be processed, you normally provide a "submit" button. This button causes the browser to process the form data and if required send it back to the server to be handled as specified in the action attribute.
The "reset" button causes the browser to delete all of the input/selections the user has made and return the form to its default state (as though it had just been displayed for the first time). The web page is not reloaded, the reset just clears the form fields. Here is an example of the HTML for a form with both reset and submit buttons:
You may prefer to have your "submit" and/or "reset" buttons appear as images rather than the default browser buttons. You can do this using an input field with a type of "image". A name must be provided and must be either be "submit" or "reset" as required, and there must be a SRC attribute to specify the image you want to use in place of the button. For example:
Using these tags to create a real formThe secret to making a form is in combining the tags outlined above with additional HTML to layout the elements on the page and label them with instructions so that anyone filling the form in understands what is required. This is illustrated in this example which contains all of the form elements documented above. You can use the "View source" option in your browser to look at the HTML if you want to see how it is done.
Processing formsAs mentioned in the introduction, it is often not enough to create a form in your HTML document; you must also have a method to deal with the information in the form - often a CGI (Common Gateway Interface) which accepts and processes the contents of the form and then initiates the appropriate response. This response normally includes creating a new web page, but in addition the results could be saved in a file and/or emailed. CGIs will usually be a shell, Perl, Python or other script (on Unix), an Applescript script (on Mac) or a program written in one of the available languages on the server. The server holding your web files is the server on which you are also most likely to hold your forms handling CGI, but it does not have to be the case; you can send the contents of the form to any server which makes a suitable CGI available.
Email example using "mailto"If you want to set up a form and have the information emailed to you, you can do so without a CGI program. This is achieved by using "mailto:email_address" as the value of the action attribute, but this approach has a couple of problems. The first is that it the email address is available for spammers to harvest; the second is that it ia a bit kludgy because most browsers respond by starting up a mail program with pre-populated fields. Some people are not familiar with specialist mail programs, using browser-based web mail instead. All this suggests that using a forms-handling CGI would be better, but admittedly much more difficult if you have to write it yourself. Many ISPs provide a forms-handling CGI which you can use without having to understand the code used to create it.
An example of the code used to define a form with a "mailto:" action is shown below. The results collected from the form would be emailed to firstname.lastname@example.org. If it works, the nature of the email could vary. The subject is normally something like "Form posted from Mozilla". The form contents may be in the body of the mail message or in an attachment. The contents may be well formatted or may be peppered with replaced characters, for example:
The form as displayed by your web browser is shown below. In passing note that we have used a table to put a border and a coloured background around the whole form. Apart from making it stand out, this also highlights the text input boxes and other form elements, which on some browsers have such light right and bottom boundaries that they look incomplete against a white background.
The mail message received from this form will look something like this:
Email example using a CGIMany ISPs or webmasters provide a generalised form-handling CGI interface, which takes information from any form and emails the contents to a specified email address. This means that you are not relying on any particular browser being used by the person filling in the form. An typical example of such a script is femail.pl, written in Perl and explained in some detail in our CGI documentation. But remember that if your ISP provides such a script then you do not need to know how it works - you just need to be able to specify it in your form, and to make sure you correctly specify the required fields and names which the CGI requires.
More informationThere are many other sites which will tell you all about creating forms. Some which you might find useful are: