Forms
At some time you are going to want to get some feedback
from your site. The easiest way to do this is to set up a
form. You can produce complicated cgi scripts which act as
intermediaries between the web page and the web server, but
there is no need to learn cgi scripting. Forms may not be as
sophisticated, but they are simple and they do the job.
Forms consist of three main parts:
- the instructions as to how the information is to be
sent to its destination
- the form itself
- the submission section
The instructions typically have at the very least two key
words which require you to enter your own parameters. A
third is very handy.
The ACTION of a form needs to be defined. Where is it
going? The METHOD also needs to be defined. How is it
getting there? It is also useful to have the contents of the
form stripped out of the form structure so it is legible,
and for this you need to define the ENCTYPE, or type of
coding to display the results.
My business submission
page on the runway site contains a form which we will
use as the basis for this article. Let us have a look at the
coding I have used.
At the top of the BODY part of the page I have defined
the three tags necessary to deal with the form once it is
submitted. The code is as follows:
<FORM
action="mailto:jclare@mailbox.co.uk" method="POST"
enctype="text/plain">
The action of the form is that it will be sent to my
email account. The method by which it will be sent is POST,
that does not mean by snail mail. There are two
alternatives, "post" and "get". The former is the method
usually used.
If I left the matter at that the results would end up in
my mailbox looking a bit strange. To strip out the coding
set the type to plain text.
The second part of the form is the actual form itself,
with questions and the text areas where viewers can enter
their details.
On my page I have chosen to set this into a table to keep
the sections aligned. In the first column of cells are the
questions, such as "First Name" and "Surname". In the second
column are the entries giving us the text areas where
viewers will enter their replies.
The first tag describes the input type, gives it a name,
and allows a space for its value to be entered. The size of
that input value is then given.
The input type shown below is for text. The name of the
section is Surname. It could have been Address1, or
BusinessType. It depends on the question you are asking. You
should always give a sensible name that you will recognize
when you get back your replies. The value is given as a
space for entering text (" "). The size of the space between
the quote marks is given as 30 characters. The whole line
is:
<INPUT
TYPE="text" NAME="Surname" VALUE="" SIZE=30>
Have a look at the
whole page to see how it is set out. You will need to
View source to see the code.
Do remember that the above just gives you the HTML code.
That means you now have the stuff that visitors don't see.
Do remember to put the visible text in as well. An example
is given below:
Surname:<INPUT TYPE="text" NAME="Surname"
VALUE="" SIZE=30>
You will then see the word
"Surname" followed by a box 30 pixels long into which your
visitor can type information. Do remember that where we put
'Name = "Surname"' is giving the box a name, not putting in
text which the visitor can see.
The third part of the form is the submission section.
Generally one puts a Submit button, and a
Reset button at the bottom of a form. The
Reset button allows the viewer to dismiss everything
he/she has just entered and have another go. The
Submit button will kick in the action which was set
up in the first part of the form. The value parameter sets
what is to be written on the button itself on the page.
An example is given below:
<INPUT
TYPE="Submit" VALUE="Click to submit"><INPUT
TYPE="Reset" VALUE="Click to reset">
A typical result from a submitted form would be as
follows:
Name=John
Surname=Clare
Address1=At Home
Tel:=12343567
Likes=everything
Dislikes=everything else
