8. Forms
8.1 Initial Form Setup
A Form is a way of allowing a visitor to your website to feed back information such as comments, data etc.
The <FORM> and </FORM> tags contain a number of elements that allow the Form to actually do
something.
Within the opening FORM tag there is defined an ACTION that is used to point to a URL. This could be a CGI script
that processes the Form data or an E-mail address to which the data within the form is sent as a .DAT file
which is readable by a text editor. The other required attribute within the FORM tags is the METHOD. Most often
this will take the format METHOD="POST" to define that the HTTP packets will have the method POST
meaning that the data is placed in the body of the HTTP rather than METHOD="GET" which places the data
within the URL itself. W3C require that the character set be defined for the Form using the attribute ACCEPT-CHARSET.
(refer to HTTP for more detail).
You then need to lay out the form. You do this between the FORM tags using, first of all <INPUT TYPE>.
The most important values are SUBMIT and RESET which are default names for buttons within the form.
You can change these names by using the VALUE attribute e.g. VALUE="changed button name". There is
another attribute for the INPUT TYPE called NAME that is used to assign a name to the object
(this is used for identification purposes by programs, databases etc.). Instead of using SUBMIT for the
INPUT TYPE you could include an image i.e. a button e.g. <INPUT TYPE="image" SRC="images/button.gif">.
When clicked on, the form posts you the (x,y) coordinates of where the mouse was when the user clicked the button.
This can be used to send the data as an attachment to the E-mail, rather than within the body of the E-mail itself.
Other attributes that apply to other elements such as BUTTON, SELECT, TEXTAREA include
DISABLED which disables user input, ACCESSKEY which assigns a keyboard shortcut to an element
and TABINDEX which allows the user to use the TAB key to cycle through the available fields.
8.2 Multiple Choice
A pull-down menu can be produced using the <SELECT> and </SELECT> tag pair within the
FORM tags. Each menu item is identified by an <OPTION> and </OPTION> tag pair.
The VALUE attribute requires a name so that when a reply is sent to the program, or arrives via E-mail,
the reply can be identified. Between the <OPTION> and </OPTION> tags you type the label
showing how the item will appear in the menu. You can set up a static menu rather than a pull-down one by using the
SIZE attribute within the <SELECT> and </SELECT> tag pair, and giving it a number
to suit the number of items within the menu. You can decide to have a particular item at the top of the menu
rather than the default of whatever comes first. You do this by using the keyword SELECTED within the
<OPTION> tag. You can set up a scrolling list of items by using the SIZE=number
attribute. In addition, you can allow the user to select more than one item from the list by inserting
the keyword MULTIPLE within the <SELECT> tag.
You can set up radio buttons from which a user can choose one answer. To do this, within the <FORM>
and </FORM> tags, use the value RADIO for the INPUT TYPE. You then group radio
buttons together by using the same NAME attribute value. For each button you assign a value to the
VALUE attribute to identify the answer to the program or within the E-mail. Finally, you type a text
string after each <INPUT TYPE> that is displayed by each button. If you add the keyword CHECKED
to one of the radio buttons, then this particular radio button appears as already selected when the form is first displayed.
Of course the user can change this when filling in the form.
The pull-down menu, static menu or radio buttons are fine when one item out of a number of options is to be selected.
You may however, want a user to select more than one option. To do this you can set up a number of checkboxes for a user to choose from.
For checkboxes, use the value CHECKBOX for the INPUT TYPE. The NAME attribute distinguishes
between the answer, the VALUE attribute is not required. Any number of the checkboxes ca be selected and the ones
that are selected are identified within the E-mail or to the program receiving the data.
8.3 Entering Text
As well as using the mouse to fill in a form, the user can type in text. To create a text box you can use the
INPUT TYPE of text, in order to allow input of a single line of text. Give this text a name using the NAME
attribute to identify it for the program or the E-mail. The VALUE attribute is purely optional and can be used
to prefill the text box with text that is likely to be required by the user anyway. You can define the size of the text box in characters,
by way of the SIZE attribute in the INPUT TYPE. You can also limit how many characters are allowed to be entered
using the MAXLENGTH attribute.
Password entry is treated in a similar manner to text entry other than chracters entered by the user are displayed
as asterisks on the screen. The INPUT TYPE is password.
Although you can allow a very long line of text to be entered using the value TEXT, you can provide greater space
for input by using the <TEXTAREA> and </TEXTAREA> tag pair. You use the NAME attribute
to name the text and use the attributes ROWS and COLS to determine the size of the display text box in characters,
as you type more than the allotted space a scroll bar appears automatically.
As with the single line text box, you can pre-enter text by typing it within the <TEXTAREA> and </TEXTAREA>
tag pair.
8.4 Uploading files
You can upload files via the use of the file input type. Use the SIZE attribute to determine the
path length plus file name size that will be displayed on the screen. Go for a value of at least 30 to make it useable,
otherwise you could find that that the file won't load into the text box. Within the FORM tag you will also need
to set the encrytion type that is suitable for the software that uses the data, so use the attribute
ENCTYPE="multi-part/form-data".
8.5 Form Example
Examine the following code which produces a form that incorporates the features previously mentioned:
<FORM ACTION="mailto:somebody@nowhere.cog.uk" METHOD="POST">
<DIV>
Before using this form you must type in your password
......only joking!
Type anything you like and it will be displayed
as asterisks. You are limited to 10 characters.
</DIV>
<BR>
<INPUT TYPE="password" NAME="password" SIZE="10"
MAXLENGTH="10">
<BR>
<BR>
<BR>
<BR>
<DIV>
With this menu, you can only select one option. Do
you like this pull
down menu?
</DIV>
<BR>
<SELECT NAME="pulldown">
<OPTION VALUE="yes">Yes</OPTION>
<OPTION VALUE="no" SELECTED>No</OPTION>
<OPTION VALUE="dunno">Don't Know</OPTION>
</SELECT>
<BR>
<BR>
<BR>
<BR>
<DIV>
With this menu, you can select more than one option using
the 'Shift' and
'Ctrl' keys as normal in Windows,
and there is a scroll bar. Give reasons why you like this
pull down menu?
</DIV>
<BR>
<SELECT NAME="pulldown" SIZE=4 MULTIPLE>
<OPTION VALUE="pretty">It's pretty</OPTION>
<OPTION VALUE="cool" SELECTED>It's cool</OPTION>
<OPTION VALUE="scroll">There's a scroll
bar</OPTION>
<OPTION VALUE="multiple">I can select multiple
options</OPTION>
<OPTION VALUE="what">What Pull Down menu?</OPTION>
<OPTION VALUE="why">Why am I here?</OPTION>
</SELECT>
<BR>
<BR>
<BR>
<BR>
<DIV>
Now some radio buttons, again you can only select one option,
what do you think?
</DIV>
<BR>
<INPUT TYPE="radio" NAME="radio question" VALUE="love"
CHECKED>Love them
<BR>
<BR>
<INPUT TYPE="radio" NAME="radio question" VALUE="like">Like
them
<BR>
<BR>
<INPUT TYPE="radio" NAME="radio question" VALUE="ok">
They're OK
<BR>
<BR>
<INPUT TYPE="radio" NAME="radio question" VALUE="unsure">
Not sure about
them
<BR>
<BR>
<INPUT TYPE="radio" NAME="radio question" VALUE="awful">
Awful
<BR>
<BR>
<BR>
<BR>
<DIV>
With the checkboxes, you can select as many options as you like.
</DIV>
<BR>
<INPUT TYPE="checkbox" NAME="chips">I like chips
<BR>
<BR>
<INPUT TYPE="checkbox" NAME="chocolate">I like chocolate
<BR>
<BR>
<INPUT TYPE="checkbox" NAME="chips">I like chips mixed with
chocolate
<BR>
<BR>
<INPUT TYPE="checkbox" NAME="chips">I feel sick reading this!
<BR>
<BR>
<BR>
<BR>
<DIV>
Do a little Typing into this text area, you are limited to 20
characters
though and you will have to overwrite
the rubbish!
</DIV>
<BR>
<INPUT TYPE="text" NAME="rubbish" VALUE="rubbish goes in here"
SIZE="60"
MAXLENGTH="20">
<BR>
<BR>
<BR>
<BR>
<DIV>
Here is some more text, but you cannot change this because user
input has
been disabled.
</DIV>
<BR>
<INPUT TYPE="text" NAME="planet" VALUE="You are of this Planet"
SIZE="22"
MAXLENGTH="22" DISABLED>
<BR>
<BR>
<BR>
<BR>
<DIV>
Why not type an essay in this text area, you initially have 4 rows
and 30
columns to type it in, if you type
more then the scroll bar will appear.
</DIV>
<BR>
<TEXTAREA NAME="essay" ROWS="4" COLS="30">Essay begins
here...</TEXTAREA>
<BR>
<BR>
<BR>
<BR>
<DIV>
Browse for a file and select it to send with this form data.
</DIV>
<BR>
<INPUT TYPE="file" SIZE="30">
<BR>
<BR>
<BR>
<BR>
<DIV>
Optionally, you can submit the data as an attachment to the
E-mail by clicking this image
<INPUT TYPE="image" SRC="images/attach.gif">
</DIV>
<BR>
<BR>
<BR>
<BR>
<DIV>
And finally, the conventional, but all important, submit and
clear buttons.
</DIV>
<BR>
<INPUT TYPE="submit" VALUE="send me baby!" NAME="send">
<INPUT TYPE="reset" VALUE="cancel this" NAME="cancel">
</FORM>
Notice how each element within this form has a unique label (except the radio buttons), this is very important!
Click on Fake Form to see how the code presents the form.
You will see from the code that I have used line breaks extensively to provide decent gaps between the
elements of the form. I wanted to control the layout of the form in as simple a way as possible so as
not to detravt too much from the code of the form itself. Traditionally, forms were inserted within
the <PRE> and </PRE> tag pair so that they could be structured manually using spaces
and rows. This however has been superceded by the use of tables to control the form layout. The best way of combining
forms and tables is to put the tables within the form, rather than the other way around. This is because
forms have extra space requirements around the form elements which are often difficult to quantify.
Another thing that you may notice is that using the TAB key allows you to cycle through each of the available
elements within the form.
|
