Forms in HTML

This section describes how to create forms within your HTML documents. The results from these forms are returned to you as an e-mail by a process called form-to-mail.

Its pretty easy explaining how to put forms on your pages; telling you how to get them to result in an e-mail is a little more difficult. First of all, many access providers have special software for performing the form-to-mail procedure. These will require a slightly different method to that described here, so check with your access provider first. The method described here uses the mailto action to interpret the form. It is the simplest method, and produces only crude results (but they do the job!). On top of this I've explained all the usual dialog box stuff normally associated with forms.

<form>
Any form must begin and end with this tag. The basic format for creating a form is as follows:

<form action="mailto:username@provider.com" method="POST"> <input type="hidden" name="subject" value="Title of Form"> form dialogs in here <input type="submit"> <input type="reset"> </form>

The value of the action attribute contains the address that you wish the results of the form to be sent to, ie. swap username@provider.com with your own e-mail address. This attribute may well change if you are using a special form-to-mail processing script from your access provider.

Specifying an input type as hidden effectively enables you to create variables that the user does not see. These variables are then returned in the reply e-mail or used by the processing script. They are handy if you have more than one form - use them to give the form a title so you know which one the reply e-mail resulted from.

Input types submit and reset are required to give buttons which enable the user to send or clear the form.

The following dialog items are placed using the <input> command and specified using the type attribute.

type=text
Single line text box.

name=text
Tells the form-to-mail script what to return when describing the dialog item contents (so you know what the user was responding to when they fill in the dialog item).
size=number
Specify the width of the text box in characters.
value=text
Specify some default text for the text box.


Just one line of text please: 

<INPUT type=text name="Single-Line Text Box example" size=50 value="default text">

type=radio
Radio button group. All buttons within the same group must have the same name. A single radio button can be shown, provided it has a unique name.

name=text
Tells the browser which radio button group the radio button belongs to. Tells the form-to-mail script what to return when describing the dialog item contents (so you know what the user was responding to when they fill in the dialog item).
value=text
The text that is returned if the radio button is selected as on.
checked
Specify the default radio button.


<INPUT type=radio name="Radio Button Group example" value="yes" checked> yup

<INPUT type=radio name="Radio Button Group example" value="no"> nope

type=checkbox
Checkbox group. All buttons within the same group must have the same name. A single checkbox can be shown, provided its name is unique.

name=text
Tells the browser which checkbox group the checkbox belongs to. Tells the form-to-mail script what to return when describing the dialog item contents (so you know what the user was responding to when they fill in the dialog item).
value=text
The text that is returned if the checkbox is checked.
checked
Specify a default checkbox.


<INPUT type=checkbox name="CheckBox Button Group example" value="1"> one 

<INPUT type=checkbox name="CheckBox Button Group example" value="2"> two 

<INPUT type=checkbox name="CheckBox Button Group example" value="3" checked> three

type=password
Password text box.

name=text
Tells the form-to-mail script what to return when describing the dialog item contents (so you know what the user was responding to when they fill in the dialog item).
size=number
Specify the width of the password box in characters.
value=text
Provide the password.


Please give the password: 

<INPUT type=password name="Password Text Box" size=50 value="password">

type=submit type=reset
Submit and reset buttons. Respectively used to send and clear (reset defaults) the form.

value=text
Specify the button text.


<INPUT type=submit value="Yes! I want a copy">

<INPUT type=reset value="Clear all data">

<textarea></textarea>
Text entry area.

name=text
Tells the form-to-mail script what to return when describing the dialog item contents (so you know what the user was responding to when they fill in the dialog item).
cols=number
Specify the width of the text entry area in characters.
rows=number
Specify the height of the text entry area in rows.


Please write lots of text:<br>

<textarea name="Multi-Line Text Box" cols=50 rows=10>default text</textarea>

<select> <option>
List box. Use an <option> element with the <select> tags for each of the items in your list.

name=text
Tells the form-to-mail script what to return when describing the dialog item contents (so you know what the user was responding to when they fill in the dialog item).
size=number
Specify the number of list items shown at any one time. If this attribute is left out, the list box defaults to a drop-down list.
multiple
Allows the user to make more than one selection from the same list.
value
Used with the <option> element. This specifies what is returned in the e-mail for a selected item. The text between the opening and closing option tags is what appears in the list box.
selected
Used with the <option> element to specify a default selection.


Pick one:

<SELECT name="Single-line ListBox example">

<OPTION value="1">choice 1</OPTION>

<OPTION selected value="2">choice 2</OPTION>

<OPTION value="3">choice 3</OPTION>

<OPTION value="4">choice 4</OPTION>

</SELECT>

Pick some:

<SELECT name="Multi-line, multi-selection Listbox example" size=3 multiple>

<OPTION value="1">choice 1</OPTION>

<OPTION selected value="2">choice 2</OPTION>

<OPTION value="3">choice 3</OPTION>

<OPTION value="4">choice 4</OPTION>

</SELECT>

Example Form

<h2>Example Reply Form</h2> <form action="mailto:user@provider.com" method="POST"> <input type="hidden" name="subject" value="Example Form"> <select name="age"> <option value="under 18">under 18 </option> <option selected value="18 to 25">18 to 25 </option> <option value="25 to 30">25 to 30 </option> <option value="30 to 40">30 to 40 </option> <option value="over 40">over 40 </option> </select> Your age<br> <input type=text name="name" size=40> Your name<br> <input type=text name="email" size=40> Your e-mail <p> <textarea name="details" cols=50 rows=10>Something about yourself</textarea> <p> I think this guide is <input type=radio name="opinion" value="great" checked> great <input type=radio name="opinion" value="middling"> middling <input type=radio name="opinion" value="very poor"> very poor <p> <input type="submit" value="Process Data"> <input type="reset" value="Clear Data"> </form>

Example Reply Form

When the mailto action is used, as above, the results of the form are returned in a contiguous stream. This means the resulting e-mail from the above example form would look something like:

subject=Example+Form&age=under+18&name=Lee+Siddall
&email=lsiddall@mail.public.lib.ga.us&details=This+is+a+test
+and+only+a+test.&opinion=great

There is software available, such as that from Colosseum, which will parse the returned e-mails and present them in a more useable way.