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.
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)
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:'.
The next step is to add some tags to the form to capture input.
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.
Radio buttons offer a single choice from several options.
Check Boxes are similar to Radio Buttons but offer multiple choices from a set of options (and have a different format!).
For example:
The Select Tag allows you to create Drop-Down Lists.
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.
'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.
'Reset' provides a clickable button, which, when clicked, clears any entries made in the Form.
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.
See also: Some Form Stuff
Tony Drewry, Jan, 2008
