Forms

Introduction to forms

The basic layout of a form is as follows:

<FORM>  begin a form
<INPUT>  ask for information in one of several different ways...
<INPUT>  ...there can be as many input areas as you wish
</FORM>  end a form

Every <FORM> needs a METHOD= to tell it where to send the data from the form.
There are two basic things you can do.

You can send the data to a CGI script for processing. The parsed data is then emailed to you. This is the preferred method,
You can have the data emailed directly to you using the mailto action. This is simpler but less reliable.

For the sake of simplicity, we will start with the second method.

<FORM METHOD=POST ACTION="mailto:dm@ausisp.com" ENCTYPE="text/plain">
</FORM>

To send the data to more than one email address, separate them with commas...

To help with the readability of the resulting email sent to you, use the Mailto Converter utility.
You can get it from: http://www.pagetutor.com/pagetutor/forms/lesson01.html

The second method involves sending your data to a Mail converter script on some other server.
For info on these services visit the above link.

Text fields

<INPUT TYPE="text" NAME="TEXTFIELD" VALUE="This is a text field" SIZE=30>

INPUT TYPE="" specifies the type of input.
NAME="" specifies the name of the variable to be returned to you.
VALUE="" is an optional default value for the field.
SIZE="" specifies the size of the field. (Otherwise the default is 20)

Password fields

<INPUT TYPE="password" MAXLENGTH=7 NAME="userpass">
Type in your password please.

Radio buttons

Only one button can be selected. <FORM>
What do you want for lunch today?<BR>
<INPUT TYPE="radio" NAME="FAVOURITEFOOD" VALUE="pizza" CHECKED> Pizza <BR>
<INPUT TYPE="radio" NAME="FAVOURITEFOOD" VALUE="hamburger"> Hamburger <BR>
<INPUT TYPE="radio" NAME="FAVOURITEFOOD" VALUE="thai"> Thai green curry <BR>
</FORM>

INPUT TYPE="radio"	specifies that the type of input is a radio button.
NAME=	specifies the name of the variable to be returned to you. Note that each button has the same name, because they are the same variable which will contain one of three user specified values.
VALUE=	is the value returned to the variable(NAME) if that button is selected.
CHECKED	is an optional pre-checked button.

Check boxes

Multiple checkboxes can be selected. <FORM>
What do you need to put in your work bag today?<BR>
<INPUT TYPE="checkbox" NAME="DIARY" VALUE="YES" CHECKED> Diary <BR>
<INPUT TYPE="checkbox" NAME="LUNCHBOX" VALUE="YES"> Lunchbox <BR>
<INPUT TYPE="checkbox" NAME="PEN" VALUE="YES"> Pen <BR>
</FORM>

INPUT TYPE="checkbox"	specifies that the type of input is a checkbox.
NAME=	specifies the name of the variable to be returned to you. Note that unlike in radio buttons, each variable has a different name, because they are different variables
VALUE=	is the value returned to the variable(NAME) if that checkbox is ticked. Note that each value is the same -"YES" because each variable will contain either a "YES" or nothing.
CHECKED	is an optional pre-ticked checkbox.

Additional questions about the same variables

You can ask different questions about the same things
e.g. Which of the workbag items would you also want to keep in the fridge? Each variable name would have a slightly different name e.g.

NAME="WORKBAG_DIARY"	VALUE="YES"
NAME="WORKBAG_LUNCHBOX"	VALUE="YES"
NAME="WORKBAG_PEN"	VALUE="YES"
NAME="FRIDGE_DIARY"	VALUE="YES"
NAME="FRIDGE_LUNCHBOX"	VALUE="YES"
NAME="FRIDGE_PEN"	VALUE="YES"

Put pictures and tables within forms

Click on here to see a form with table and pictures.

Pull down menus

These are pretty easy...
There is the SELECT tag which needs a NAME. (Name of the variable)
The SELECT tag needs to be followed by OPTION tags which contain VALUE attributes.
The VALUE is the possible value given to the variable by the user
This is followed by the displayed name of the value.

<FORM>
<SELECT NAME="BEST FRIEND">
<OPTION VALUE="ED">Ed
<OPTION VALUE="RICK">Rick
<OPTION VALUE="TOM" SELECTED>Tom
<OPTION VALUE="GUIDO">Guido
</SELECT>
</FORM>

Scrolling lists

If you simply put a SIZE=4 inside the SELECT tag, then the pull down menu turns into a scrolling list. The number you choose defines how many names are displayed in the list. If you want, you can make one of the OPTIONs SELECTED

<FORM>
<SELECT NAME="BEST FRIEND" SIZE=4>
<OPTION VALUE="ED">Ed
<OPTION VALUE="ED">Pluto
<OPTION VALUE="ED">Mickey
<OPTION VALUE="ED">Donald
<OPTION VALUE="ED">Goofy
<OPTION VALUE="RICK">Rick
<OPTION VALUE="TOM" SELECTED>Tom
<OPTION VALUE="GUIDO">Guido
</SELECT>
</FORM>

Text Areas

A text area is an area where the user can type in some comments. Go on - try it now!
There is the optional column and row size.

<TEXTAREA NAME="COMMENTS" COLS=50 ROWS=5>

And then there is the option of having text wrap or not.
Soft text wrap (WRAP="soft") is where the text wraps but is returned in the form all in one line

Hard text wrap (WRAP="hard") is basically the same as soft wrap, but the text is returned in the form with text wrap.
Then there is WRAP="off", which means the text will not wrap, but continue endlessly in one line.

Hidden inputs to a form

<INPUT TYPE="hidden" NAME="NameOfForm" VALUE="Version 1">
The name of the variable is returned with the value of the VALUE by the form, but this is invisible to the user. This is useful when you need to identify different forms e.g. by region. It can also be used by a CGI script. The hidden input tells the cgi script who you are, where to send the parsed data, etc.

File upload input form

<FORM METHOD=POST ACTION="mailto:dm@ausisp.com" ENCTYPE="multipart/form-data">
<INPUT TYPE=FILE NAME="myfile">
</FORM>
Note that ENCTYPE="multipart/form-data" is the important element here.
Some browsers may have trouble with this.
The File upload form results in a file being sent to the specified email address.

Submit and Reset buttons

<FORM>
<INPUT TYPE="submit">
</FORM>

<FORM>
<INPUT TYPE="reset">
</FORM>

We can rename the submit and reset buttons if we want.

<FORM>
<INPUT TYPE="submit" VALUE="Send it away Ray!">
<INPUT TYPE="reset" VALUE="Clear the form Norm!">
</FORM>

We can make an image be a submit button, but not the reset button. The INPUT TYPE="image" only refers to the submit button.

<FORM>
<INPUT TYPE="image" SRC="submit.gif" WIDTH=94 HEIGHT=26 BORDER=0 ALT="Submit">
</FORM>
Some particular browser/email setups do not handle mailto forms very well. Generally it's better to use a CGI script to handle your forms.

How to make a button be a link