Forms

See also: Some Form Stuff

Forms are a technique for capturing data from users.

Data that is input by a user into the form is sent to a Web server as name and Value pairs - typically to some script or program on the Web server that sent the Form.

This page looks at the structure and content of Forms as HTML tags.
Methods for dealing with data that is captured are discussed briefly at the end of this document.

Basic Page

<html>
<head>  <title>Form Exercise</title> </head>
<body>

</body>
</html>

By now you should know that the tags which define a basic web page are as shown in the code on the right.

If you put the script in an editor and save it as e.g.Form.htm , and then look at it using a browser, you will just see a blank page (but with the Title showing at the top of the screen)

<html>
<head> <title>Form Exercise</title>  </head>
<body>
  <p> This is a form: </p>
  <form>

  </form>
</body>
</html>

In order to create a Form you have to add <form>  </form> tags in between the <body>  </body> tags.
(I have added a paragraph to the page.)

If you edit your file Form.htm by adding the new tags, when you look at it in a browser, all you will see is the text: 'This is a form:'.

check it out

The next step is to add some tags to the form to capture input.

Form tags (Fields and Interaction)

There are 5 basic tags used to capture user input. The input areas created by these tags are sometimes called 'Fields'.
From a design point of view the tags create areas where a visitor can enter information or buttons that can be selected to indicate choices.
From a programming point of view they provide variables that can store data.
One way of understanding a 'form' is to think of it as special sort of hyperlink.
When you click on a hyperlink, a request for a Web page is sent out into the Web using the address stored in the 'href' attribute to find a required page. Similarly when you click on a form's 'submit' button a request for a Web page is sent, but the request is accompanied by some extra data (that has been captured and stored in named variables.)
The main input tags are:

Other tags include:

The tags are given attributes to describe them and define what they do.
Every tag must have a 'name' attribute (name="something"). This is the 'name' that is sent to be processed with whatever 'value' has been entered via that tag.
The name must be unique within the Form

The 'value' attribute (value="") Has a different effect in different tags.
For text, password, and hidden inputs, 'value' defines the default value of the element. For example if you have an input where a visitor enters the name of a town, but you expect that most visitors will be typing in 'Bristol' then you can use - value="Bristol" - to have that value already in the box.
For radio and checkbox buttons, 'value' defines the value that will be sent for processing if that button is clicked or selected.
For submit and reset buttons, 'value' defines the text that appears on the button.

<input type="text" />
<body>
<p> This is a form:  </p>
<form>
<p>
Enter a word (1): <input type="text" name="WORD1">
</p>
<p>
Enter a word (2): <input type="text" name="WORD2" value="A word">
</p>
<p>
Enter a word (3): <input type="text" name="WORD3" value="" size=30>
</p>
<p>
Enter a word (4): <input type="text" name="WORD4" size="20" maxlength="5">
</p>
</form>
</body>
check it out (Test each input)
<input type ="radio" />
<form>
<p>
What is your favourite wine?:
<input type="radio" name="FAVEWINE" value="ROUGE" checked="checked"> RED
<input type="radio" name="FAVEWINE" value="BLANC"> WHITE
<input type="radio" name="FAVEWINE" value="ROSY"> ROSE
</p>
</form>

Radio buttons offer a single choice from several options.

check it out
<input type="checkbox" />
<form> <p>
Which of the following do you like?:<p>
<input type="checkbox" name="Lager"> Euro Beer
<input type="checkbox" name="Ale" value="Ok"> English Beer
<input type="checkbox" name="Coffee" value="Ok" checked="checked"> Java
<input type="checkbox" name="Tea" value="Ok" checked="checked"> Tea<p>
</p>
</form>

Check Boxes are similar to Radio Buttons but offer multiple choices from a set of options (and have a different format!).

check it out

For example:

Which of the following do you like?:
<input type="checkbox" name="Lager" checked="checked"> Euro Beer
<input type="checkbox" name="Ale" value="Ale"> English Beer
<input type="checkbox" name="Coffee" value="Yes indeed" checked="checked"> Java
<input type="checkbox" name="Tea" value="Sometimes, without sugar"> Tea
check it out
(Try different combinations)
<select> <option> <option> .... </select>
<table>
 <tr>
  <td> Select a County </td> 
  <td>
   <select name="County">
    <option value="Aberdeenshire">Aberdeenshire</option>
    <option value="Angus">Angus </option>
    <option value="Argyll & Bute">Argyll & Bute </option>
    <option value="Avon"selected-"selected"> Avon </option>
    <option value="Bedfordshire">Bedfordshire </option>
    <option value="Berkshire">Berkshire </option>
   </select>
  </td>
 </tr>
</table>

The Select Tag allows you to create Drop-Down Lists.

check it out
See also: Some other pull-down lists
<textarea>  </textarea>
Add a comment <textarea name="COMMENTS1" rows="2" cols="20">
     </textarea>
Add another comment <textarea name="COMMENTS2" rows="3" cols="30">
     </textarea>
Add another comment <textarea name="COMMENTS3" rows="4" cols="40" >
     </textarea>
check it out
<input type="password" />
<p>
Enter your password: <input type="password" name="PWORD">
</p> 
check it out
<input type="hidden" />
<form> 
<input type="hidden" name="SITE" value="SITE42">
<p>
What is the hidden value?
</p>
</form>
check it out

A Hidden Input is essentially a field in the form which can contain a data value which is invisible to the user - but is returned as a standard name/Value pair.
For example: you fill in a form and submit it. Another form is sent back to you. The second form can contain data, in a Hidden Input, from the first form (e.g. your name and email address which you had submitted in the first form).
For example: You could use a Hidden Input to store the result of some calculation based on data placed in non-hidden input boxes.
For example: you have created a number of versions of the same form, but placed in different web sites. A Hidden Input can tell you at which site the Form was accessed.

<input type="submit" />
<form> 
<input type="submit" value="GO">
</form>

'Submit' provides a clickable button to send off the form data. The Button has on it the text: 'Submit', by default.
You can change the text on the Button via the value attribute.

You can also use an image as an input button with the following syntax:
<input type="image" src="go.gif" alt="submit the form" name="GoForIt">
However, there are a few requirements if you choose to use an image:

Samples of the Submit (and the following Reset) inputs have been included in the 'check it out' examples already provided in this page.

<input type="reset" />
<form> 
<input type="reset" value="Clear Form">
</form>

'Reset' provides a clickable button, which, when clicked, clears any entries made in the Form.

Submitting data

<form action="?"    method="?">

The main purpose of a form is to capture data and send it to be processed.
The action and method attributes of the form tag define what happens to the input data when the 'Submit' button is clicked.

WHERE the data is sent and WHAT code will process the data is defined by the action="" attribute within the <form> tag. (A useful example is given below.)
HOW the data is sent is defined by the method="" attribute within the <form> tag.

There are two principle 'methods': GET and POST.

method="GET" appends the data to the address of the file which is requested. You can see this method in action in many Search Engines. (The query criteria appears in the Location or Address box after the URL, as 'name=value' pairs)

method="POST" sends the data as a separate, hidden, stream of data that is reunited with the 'Request' at the Server.

The POST method is more secure and permits a larger amount of data to be sent than the GET method.

The 'Check it out' examples above, send any data that has been input into the examples to a program which returns a message giving the Name-Value pairs that have been sent.

If you create a form and want to use a program to check that the form works, you can use the following as your Form tag:

<form action="http://www.cems.uwe.ac.uk/~tdrewry/cgi/cgiform.cgi" method="POST">

When you run your Form and submit it, the data is sent to a cgi script (cgiform.cgi) in my Web directory.
The cgi script reads the data and returns a listing of any 'Name-Value' pairs back to you (plus a list of the other 'Environment' variables that were sent to the server from your browser!).

Note that you can use the above form 'action' to check how a form is working, from anywhere that you have an internet connection.

Validation of Input (using JavaScript)

See also: Some Form Stuff

Tony Drewry, Jan, 2008