Forms are designed to let you collect information from the people who use your website. This information is submitted to your web hosting server, where it is acted on by a server side program.

An Overview of Forms

Here is a form that calculates body mass index.

Body Mass Index Calculator:
Height (inches) Weight (pounds)

The html code required for this form is shown below. The html code

  1. provides for data input,
  2. has explanatory text,
  3. specifies the method by which the data will travel to the server -- "post",
  4. designates a program to act on the data -- "calcbmi.php"
<form action="calcbmi.php" method="post">
  Height (inches) <input type="text" name="hgt" size="2">
  Weight (pounds) <input type="text" name="wgt" size="3">
<input type="submit" value="Submit Data">

When the submit button is clicked, the data is sent, and the "calcbmi.php" program called. This program is written in PHP. It accesses the data submitted, and calculates and displays the BMI.

echo "Weight = ".$wgt." pounds<br>";
echo "Height = ".$hgt." inches<br>";
$out_bmi=sprintf('%0.1f', $bmi);
echo "BMI = ".$out_bmi." kg/square meter";

The Form Tag

The <form> tag controls the data submission process. It does this in two ways:

  1. By its attributes.
  2. By gathering together as a logical unit, all those data input tags placed between the <form> and </form> tags. These are submitted together when the <submit> tag is clicked. Data is sent to the server when a submit button is clicked; the 'action' file is then executed immediately.

Attributes of the Form Tag

  1. The method attribute -- Forms may contact the server by either of two methods: "get" and "post". "Get" is used to get information from the server, for example, to open a web page. Obviously, when "get" is used, information is both sent and received. "Post" is used to send information to the server.
  2. The action attribute -- You will have written a program and placed it on your hosting server to process the form information. The address of this program is provided with the "action" attribute of the <form> tag. The 'action' file is written in a server side language (such as PHP).
  3. The target attribute -- The 'action' file is opened in the window designated by the target attribute.
  4. The enctype attribute -- Information is encoded before sending to the server. The manner of encoding is determined with the 'enctype' attribute. Its value is a mime type, e.g.

Tags Used for Data Input

Those tags which are used to accept input include:

Note: Explanatory text and line breaks can be placed anywhere within the form to make it more intelligible.

The Input Tag

The tag most commonly used for data input is the <input> tag. The <input> tag has no closing tag, so all information is specified by attributes within the tag.

There are at least ten different types of <input> tag. All accept different types of data. The type is, of course, specified by the 'type' attribute.

The Type Attribute -- Different Types of Input
The "type" attribute specifies the variable's data type. The various types are shown here. If the "type" attribute is not specified, the default "type" is "text". Try typing in the boxes.

Variables of type "text" accept one line of text.
<input type="text">

The type "password" is similar to "text", except that input is disguised.
<input type="password">

Types "button", "checkbox" and "radio" accept click data. Try clicking them.

<input type="button">
<input type="checkbox">

Radio buttons do not work alone. They are used in groups of two or more. Only one button in a group will accept a click at one time. The buttons are grouped by giving them the same name (id may not work).
<input type="radio" name="x">
<input type="radio" name="x">
<input type="radio" name="x">

Type "reset" resets all the input fields in the form to their original values.
<input type="reset">

Input of type "hidden" is not shown by the browser. Thus its value must be put in, using the "value" attribute.
<input type="hidden">

Type "file" can be used to upload files. Be sure to click this one.
<input type="file">

Type "submit" is used to submit data from all the input fields in the form.
<input type="submit">

Type "image" can also be used to submit data from all the input fields in the form.
<input type="image" src="checkmarkanm.gif">
The Value Attribute -- Different Meanings for Different Types
The value attribute of the <input> tag specifies the value of the variable when appropriate. Thus, when the value attribute is used with types "text" and "password", the value is entered as initial text in the input field.
<input type="text" value="Type your answer here.">

<input type="password" value="BoJangles">

However, when used with types "button", "reset", and "submit", the value is used as a text label for the button.

<input type="button" value="Click here.">
<input type="reset" value="Reset Data">
<input type="submit" value="Submit Data">

When used with types "radio" and "checkbox", the value sets a type for the data to be submitted. The default type is boolean.

The Checked Attribute

The 'checked' attribute of the <input> tag can be used with types 'radio' and 'checkbox'. The syntax is:

<input type="checkbox" checked="checked" value="I">

or simply:

<input type="checkbox" checked value="I">
The Name or id Attribute -- Key to Recovering Data
Each <input> tag corresponds to a variable. The variable's type is specified by the type attribute. The variable is referred to by name, for example document.formname.inputname The form name is specified by using the name attribute inside the <form> tag. The input name is specified by using the name attribute inside the <input> tag.

I have found so far, that the name, rather than the id attribute must be used. Still need to check whether this is a quirk, or dependent on the html version.

The size and maxlength attributes

By using size="3" in the input field, you can limit the number of spaces allowed for input. maxlength limits the number of characters which can be input.

Textarea Tags

Here is a textarea. The number of rows and cols in the textarea are specified as attributes of the <textarea> tag. Some of the text has been entered. The user can add more text.

<textarea rows="10" cols="30">
The cat was playing in the garden.

Select Tags

The <select> tag is used to allow the user to choose from a menu of several options, each denoted with an <option> tag. In its simplest usage, the user can select one of several options. Note that the "selected" attribute causes the preselection of bananas.
Which fruit do you prefer?
 <option selected>Bananas
Which fruit do you prefer?
The <select> tag can be used with the attribute "multiple". This allows the user to select more than one option. When multiple is used:
<select  multiple size="3" name="fruits[]">
 <option selected>Bananas </option>
 <option selected>Cherries</option>

Examples of Forms

Here are some example forms, to help make sense of all this.
<form name="form1">
      <input type="button" 
The next example combines two fields for text input and a button to click on. The text inputs are named fname and lname. Since the form's name is NameIt, the names of the variables are:
document.NameIt.fname.value and
These variables are used, when the button is clicked.
<form name="NameIt">
What is your First Name?<input type="text" name="fname">
What is your Last Name?<input type="text" name="lname">
<input type="button" value="Click here."
 onClick="alert('Hello '+document.NameIt.fname.value+' '
What is your First Name?
What is your Last Name?

The next form has two checkbox's. They are given names so that the variables can be used. They can be given an initial value of checked in the <input> tag.
  I have a bike: 
  <input type="checkbox" checked name="Bike">
  I have a car: 
  <input type="checkbox" checked name="Car">
I have a bike:
I have a car:

Here are some radio buttons. The first has been checked in the input. Both radio buttons have the same name, so that only one of them may be checked at a time.
<input type="radio" checked  name="Sex" value="male">
<input type="radio"          name="Sex" value="female">

Fieldset Tags

The <fieldset> tags can be used around forms to box the form elements. Fieldset is a recent tag, not well supported by older browsers. Fieldset draws a box around its contents. The <legend> element is used inside <fieldset> to give the form a title.
  Body Mass Index Calculator:
 <form action="calcbmi.php" method="post">
  Height (inches) <input type="text" name="hgt" size="2">
  Weight (pounds) <input type="text" name="wgt" size="3">
Body Mass Index Calculator:
Height (inches) Weight (pounds)