Any comments: e-mail me, feedback or show your appreciation

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 Internet service providers have special software (cgi-script) for performing the form-to-mail procedure. These will require a slightly different method to that described here, so check with your ISP 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!). It must be noted that mailto: only works with Netscape browsers and you should tell your readers such. The most effective use of forms is always through the use of cgi-script.

<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" target="resultswindow"> <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. swapusername@provider.com with your own e-mail address. If you are using a special form-to-mail processing script from your access provider, the action attribute should be changed to the address of the processing script. If you are using form-to-mail script, the target attribute can be used to specify a frame or window to direct the results to.
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 dialog items (text boxes, drop-down lists, etc.) available for forms are described below.

Dialog items are placed using the <input> command and specified using the type attribute.
The following types are available: text, radio, checkbox, password, image and file.
type=text
Single line text box. See <textarea> for multiple line text boxes.
- 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.
- maxlength=number
  Specify the maximum number of characters that can be written in the text box. If this is greater than can be displayed according the size attribute, then the field will scroll.
- value=text
  Specify some default text for the text box.
Just one line of text please: <INPUT type=text name="Single-Line Text Box" size=50 maxlength=75 value="default text">

Just one line of text please:
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

yup 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

one two three
type=password
Password text box. HTML itself cannot do intelligent things like interpreting passwords, it can only provide the interface to type them in. You will need to link (action) the password form to a piece of programming, such as Java or cgi-script (written in Visual Basic, C, Perl, etc.). Such scripts are beyond the scope of this Guide, however you should be able to find some relevent information in Yahoo. See also: FAQs.
- 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>

Please give the password:
type=image
Image field. The whole form is sent when the user clicks on the graphic. The value from the image is in the form of pixel coordinates, taken from the top left of the graphic. They are returned in the form name.x and name.y, where x and y are the coordinates of the mouse-click and name is the value given in the name attribute.
- 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).
- src=URL
  Specify the location of the graphic in the same way as you would with the <img> tag.
- align=left|right|middle|top|texttop| absmiddle|baseline|bottom|absbottom
  Specify the alignment of the graphic in the same way as you would with the <img> tag.
- border=pixels
  Specify the border width of the graphic in the same way as you would with the <img> tag.
- height=pixels, width=pixels
  Specify the height and width of the graphic in the same way as you would with the <img> tag.
- hspace=pixels, vspace=pixels
  Specify the vertical and horizontal space around the graphic in the same way as you would with the <img> tag.
Submit a colour: <INPUT type=image name="ColoursImageField" src="graphics/colours.jpg" align="absmiddle">

Submit a colour:
type=file
Netscape 3 and MS Internet Explorer 3 beta 2+ only. This input type enables the user to send a file and should bring up a text box and browse button (no browse button appears with Internet Explorer).
- name=text
  Provides a descriptive name for the file being sent.
- size=n
  Specifies the size of the text box in characters.
- maxlength=n
  Specifies a maximum length for the filename in characters.
- accept=MIME content type
  Specify the types of files accepted using MIME content types in a comma separated list.
Send your file: <INPUT type=file name="The users file" size=35 accept="image/*" maxlength=50>

Send your file:
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.
- wrap=off | soft | hard
  Netscape 2+ only. Specifies how the text input should wrap. Setting wrap=off means no wrapping will occur - text is sent exactly as typed. Setting wrap=soft means the display wraps but the text is sent as typed. Setting wrap=hard means the display wraps and text is sent with line breaks at all wrap points. Note: The values soft and hard have now replaced virtual and physical as text wrapping attributes.
Please write lots of text:<br> <textarea name="Multi-Line Text Box" cols=50 rows=10 wrap=physical>default text</textarea>

Please write lots of text:
default text
<select> <option>
List box. Use an <option> element with the <select> tags for each of the items in your list. You may have seen list boxes used as hyperlinks to other locations. This is JavaScript at work and unfortunately is beyond the scope of this Guide.
- 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>

Pick one: Pick some:

Example Form

Feedback

real

<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 wrap=physical>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=Richard+Rutter
&email=rrutter@woodhill.co.uk&details=This+is+a+test
+and+only+a+test.&opinion=great

There is software available, such as that from Nisseb for the Mac and Informatik for the PC, which will parse the returned e-mails and present them in a more useable way. As stated above, it must be noted that mailto: only works with Netscape browsers and MS Internet Explorer 3 beta 2 or later; the most effective use of forms is always through the use of cgi-script. Any Internet Service Provider worth paying money to will have form-handling script available.

	Sizzling HTML Jalfrezi
	©1997 Richard Rutter
	`rrutter@woodhill.co.uk`

Maintenance of this page is attempted by Richard Rutter (rrutter@woodhill.co.uk) using the gorgeous HTML Notepad and the wonderful Sizzling HTML Jalfrezi.