Kaye and Geoff's web page documentation 

Introduction

If 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.

A form in HTML is a complex structure in the sense that multiple tags are used to compile a complete form, but building forms on your web page - specifying the fields to display - is not difficult to master. However you also need to understand where the information goes and how to deal with it, and this is not handled by HTML. Forms output is generally processed by Javascript or CGIs or a combination of the two. Either way, programming skills are required and these are considerably more difficult to acquire than is the case with HTML. We provide a very limited introduction to Javascript and a more complete discussion of CGIs elsewhere, but we will cover some of the basics of forms processing later in this page.

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:

<form action="http://www.server.com/cgi-bin/process.pl" method="post">

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 (kylie@isp.net.au).

<form action="mailto:kylie@isp.net.au">

Form fields

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):

Text input field

Check boxes
   

Input elements

The <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:
  • "text": accepts character data
  • "password": accepts character data in a secure fashion
  • "hidden": defines a fixed field which is not seen by the user
  • "checkbox": is either selected (checked) or not selected
  • "radio": normally used in groups allowing only one to be selected
  • "submit": displays a button which when clicked by the user sends the form's contents to the action URL
  • "reset": displays a button that resets the form elements to their default values
  • "image": lets you put in an image in place of the "submit" or "reset" button

Here are a few examples:

<input type="text" name="field1" value="" size="32" maxlength="64"> <input type="checkbox" name="field2" value="yes" checked> <input type="radio" name="radio1" value="0" checked> <input type="radio" name="radio1" value="1"> <input type="submit" name="s1" value="Push to submit the form">

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:

  • for type "text" or "password" it defines the default value for the input variable
  • for "checkbox" or "radio" it defines the value of the input variable when it is 'checked' or selected
  • for all fields which return a value, it is the value returned
  • for "reset" or "submit" it is a label that will appear on the submit or reset button

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.

<form action="http://www.server.net.au/cgi-bin/doform.pl" method="post"> Enter some text: <input type="text" name="mytext" size="40"> <p> Enter your password: <input type="password"name="secfield" size="10"> <input type="hidden" name="formID" value="test form"> <input type="submit"> </form>

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:

<form action="http://www.server.net.au/cgi-bin/doform.pl" method="post"> I like to eat (check all that apply):<br> Pizza <input type="checkbox" name="pizza" value="pizza"> Hamburgers <input type="checkbox" name="burger" value="burger""> Chocolate <input type="checkbox" name="choc" value="choc"> Granola <input type="checkbox" name="granola" value="granola"> <p> I am:<br> Under 20 <input type="radio" name="age" value="19"><br> 20 - 29 <input type="radio" name="age" value="29"><br> 30 - 45 <input type="radio" name="age" value="39" checked><br> 46 - 65 <input type="radio" name="age" value="49"><br> Over 65 <input type="radio" name="age" value="99"> <input type="submit"> </form>

Select elements

Selections 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:
<select name="select1" size="3" multiple> <option selected>seaside <option>forest <option>city </select>

Possible attributes of the <select> tag are:

  • name: whose value is the symbolic identifier for the select field (as described for the input tag above)
  • size: this integer value is the number of option items that will be displayed at one time
  • multiple: has no value, but if present it specifies that multiple options may be selected

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:

<form action="http://www.server.net.au/cgi-bin/doform.pl" method="post"> Choose a fruit: <select multiple name="fruit"> <option value="a">Apples <option vaue="b" selected>Bananas <option value="c">Cherries </select> <p> <!-- compact display, only one choice showing --> Pick a card: <select name="cards"size="1"> <option>Jack of Spades <option>Queen of Diamonds <option>10 of Clubs <option>King of Hearts <option>2 of Diamonds <option>7 of Hearts </select> <p> <!-- pulldown menu, scrolling, four items at a time, multiple choices --> Select your favourite sundae ingredients: <select name="sundae" size="4" multiple> <option value="Icecream">Icecream <option value="Cherries">Cherries <option value="Chocsauce">Chocolate sauce <option value="Bananas">Bananas <option value="Cream">Cream <option value="shavedchoc">Shaved chocolate <option value="Wafer">Wafer </select> </form>

Textarea 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:

<textarea name="ta1" rows="5" cols="40">Enter your message here</textarea>

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:

  • "name": as explained above this is a symbolic name that identifies the entered text
  • "rows": has an integer value which represents the number of lines in the textarea box
  • "cols": has an integer value which represents the number of characters per line in the textarea box
Here is an example form with a textarea element, and also with a selection box. Since it is just a sample, the submit button has been disabled.

Textarea field
Select your favourite sundae ingredients:

Submitting and resetting

In 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:

<form action="mailto:fidel@cubaonline.net.cu" method="post"> My favourite revolutionary is: <input type="text" name="myhero" size="32" value="Che Guevara?"> <input type="submit" value="Send this directly to Fidel Castro"> &nbsp;&nbsp; <input type="reset" value="Begin with a fresh slate"> </form>

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:

<form action="http://www.server.net.au/cgi-bin/doform.pl" method="post"> <input type="hidden" name="accountID" value="Account #1"> Enter your password: <input type="password" name="pw1" size="10"><br> <input type="image" name="submit" src="submit.gif"> <input type="image" name="reset" src="reset.gif"> </form>

Using these tags to create a real form

The 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 forms

As 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.

The introduction also suggested that forms can be used to provide data to Javascript code which is included in the same page as the form. In this case the Javascript language defines how the forms fields are handled, but a discussion of the features and use of this language is not within the scope of this documentation. You can see an example in our spy game and in many of the other kids games. One interesting feature of these types of programs is that the Javascript normally prevents the form from actually being submitted anywhere - the form is just used as an input collection device for the Javascript code (which has no real I/O capability of its own).

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 pat@domain1.com. 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:

Suggestion=I+suggest+that+you+run%0D%0Amore+courses+on+web+page+creation&Email=pat@domain1.com

<form action="mailto:pat@domain1.com"> <input type="hidden" name="formID" value="test from forms.html"> Name: <input type="text" name="PersonName" value=""> <p> E-mail address: <input type="text" name="EmailAddr" value=""> <p> Information Required: <textarea name="InfoReqd" rows="4" cols="64"></textarea> <p> Would you like to be put on the mailing list? <input type="radio" name="MailList" value="Yes">Yes <input type="radio" name="MailList" value="No">No <p> <center> <input type="submit" value="Submit the form"> &nbsp;&nbsp; <input type="reset" value="Reset the form"> </center> </form>

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.

Name:

E-mail address:

Information required:

Would you like to be put on the mailing list? Yes No

  

The mail message received from this form will look something like this:

formID=test from forms.html PersonName=Fred Flintstone EmailAddr=fred@bedrock.net InfoReqd=Have you any information on rocks? MailList=No

Email example using a CGI

Many 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 information

There are many other sites which will tell you all about creating forms. Some which you might find useful are:
Top
Previous
Next
Index
Home