Forms Tutorial

FORMS ON THIS PAGE DO NOT FUNCTION...only to learn code to produce the form itself!

Much of the content on the Web delivers information to the user, and the reader controls by following links and following leads they have discovered. With pages presenting fill-in forms, a new level of interactivity may be achieved. Writing a form for use on the Web is not a difficult task. This tutorial will give a basic understanding of the tags used to write the forms.

There are four basic steps to programming a forms based document:

  1. Design the input form.
  2. Using HTML Tags, write the corresponding HTML document.
  3. Write the application program that interprets the data from the input form.
  4. Design the document generated by the program as the reply to the user. Usually this document is written in HTML.

This tutorial will focus only on the first two steps, as steps 3 and 4 are dependent on the server setup. A typical form may look like this:

Enter your name:

This source of this form looks like this:

<FORM METHOD=POST ACTION="http://yourserver.net/cgi-bin/FormMail">


Enter your name: <INPUT NAME=your_name>

<INPUT TYPE=submit VALUE="Test this form">

</FORM>

The FormMail example was included as a typical example used on many commercial servers. This is a common forms processing program that sends email to the site containing data submitted. Other programs may process further, to include capability such as populating databases with user input.

Can I create my own forms?

Anyone who has some experience with HTML is capable of creating a form. The difficult part is processing the form with a program named in the ACTION parameter. It is not necessary to write a program, but the writer needs to find a suitable cgi or other program on the server. This will involve talking with the webmaster, or referring to publish information for your server.

Sample Form

Would you care for a cup of coffee?
Yes
No
If yes:
Flavor:
Include Cream
Include Sugar This labeled button would send off form information to the server (not linked in theis example)

FORM Tag - Opening and Closing a Form

Syntax:

<FORM METHOD=POST ACTION="name of your program">
...
</FORM>

The FORM tag is used to open and close a field. In a HTML page, it is possible to have multiple forms, with FORM tag openning an closing each field. Forms cannot be nested with a form.

METHOD specifies which technical protocol the web server will use to pass the form data to the program which processes it. Most processing programs require METHOD set to POST. Note: POST must be in upper case, otherwise the method defaults to GET.

ACTION tells the server which program will be used on the server to process the data.

HTML Forms - Text Input Fields

Text input fields display one line of text. To display multiple lines, use a TEXT AREA tag.

To create a text-entry field, you can use either TYPE="text" in the tag or leave off the TYPE specificztion altogether. The default type for the tag is "text". a NAME attribute must also be included, indicating the name of this field as passed to the scripting program.

Syntax:

<INPUT TYPE="text" NAME="myText" SIZE="30">

Example

        To: 
 Your Name: 
Your Email: 
   Subject:

Multiple Line Text Area - TEXTAREA

Syntax:

<TEXTAREA NAME="name" ROWS="number" COLS="number">
</TEXTAREA>

TEXTAREA signals the browser to produce a potentially multi-line field, and the ROW and COLS tags tell it how many lines and how wide the field should be. Note that NAME is still required at the beginning of every input field, to signal waht variable the input will be stored and returned to the browser. Reader can continue to add text past edges of box.

Example



CheckBoxes

Syntax:

<INPUT TYPE=checkbox (or radio) NAME="a name" VALUE="Y" or "N">

Checkboxes allows the user to select an item or more with click of a mouse. It more than on option is possible, then checkbox must be used. On the other hand where only one option is possible, radio button is used.

TYPE specifies the type of box, either checkbox of radio, NAME specifies the cariable where the returned value will be stored, and VALUE can be anything you choose. If VALUE is nopt specified, the valued of checked fields is defaulted to "on".

Example

Would you care for a cup of coffee?
Yes
No
If yes:
Flavor:
Include Cream
Include Sugar

Radio Buttons

Radio buttons allow the user to choose only one of a number of options. When you choose one option, any previously selected option is unselected. Like checkboxes, you can define a radio button to be checked by default, but unlike checkboxes you should only have one radio button in a group initially checked. Radio buttons are grouped together by assigning them all the same NAME however they need to have different VALUEs). Here is an example of a multiple choice question using radio buttons:

Which one of these edibles is not a fruit?

Here is the HTML source for this example.

Syntax:

<BR><INPUT TYPE="radio" NAME="fruit" VALUE="Apple" CHECKED>Apple
<BR><INPUT TYPE="radio" NAME="fruit" VALUE="Fig">Fig
<BR><INPUT TYPE="radio" NAME="fruit" VALUE="Orange">Orange
<BR><INPUT TYPE="radio" NAME="fruit" VALUE="Pineapple">Pineapple
<BR><INPUT TYPE="radio" NAME="fruit" VALUE="Banana">Banana

This code is almost the same as the code for the checkbox example. The only difference is that instead of being able to have a different variable associated with every checkbox, all the radio buttons in a group must have identical NAMEs.

Submit and Reset Buttons

Syntax:

< INPUT TYPE=submit(or reset) VALUE=button name >

Once you have finish completing the form, you need to send in information to the server. Usually there is a button to submit the data. The input type submit creates a button the user pushes when they are done filling the form. The submit button must be present, otherwise the data cannot be sent to the server. A "submit" element is necessary in all forms except those containing only a single INPUT element of type TEXT (in which case Return in the text entry area submits the form) or at least one INPUT element of type IMAGE (in which case a click in the image submits the form).

The VALUE parameter let the user put whatever words for the button. If the VALUE is omitted, the default name is Submit Query.

Enter your name: VALUE=Test this form

Enter your name: No VALUE parameter

The parameter TYPE can also be set to Reset instead of Submit . This option will clear all the fields.

HTML Forms - <SELECT> and <OPTION>

To create areas that are displayed as menus and scrolling lists, use the <SELECT> and <OPTION> tags. These two tags work together much like <OL> and <LI> tags do.

Menu Examples

Please select the operating system with which you are most comfortable.

Syntax:

<SELECT NAME="OS">
<SELECT NAME="OS">Unix
<SELECT NAME="OS">DOS/Windows
<SELECT NAME="OS">Macintosh
</SELECT>

Please tell us how we could best help you learn more about HTML.

    Format:
    <SELECT NAME="name">
    <OPTION>Option 1
    <OPTION>Option 1
    <OPTION>Option 1
    </SELECT>
  • To select a specific option, add SELECTED after one of the OPTION tags, otherwise the first item will be selected. Only one item can be selected.

  • Contents of OPTION element sent to server as value, unless you add VALUE attribute.

SCROLLING LISTS

Please tell us how we could best help you learn more about HTML.

  • Format: exactly as menus, except SIZE and/or MULTIPLE attributes are added
  • Adding MULTIPLE attribute allows multiple selections.
  • Adding SIZE attribute determines how many choices will be visible.

HTML Forms - the Server

What happens after the reader hits the "submit" key?

The gateway script:
  1. Sends a reply to the reader, and/or
  2. Puts the information received into a useful format.

Guidelines for Forms

  • Make sure each entry field is given a different name.
  • Consider separating the form from the rest of the page by using horizontal rules.
  • Provide a link back to your main web page(s) from the page with the form on it.