CWIS HTML Forms Workshop

Table of Contents

  1. Purpose of HTML Forms
  2. Examples of HTML Forms
    1. Mailto Forms
    2. Other Forms
  3. The Anatomy of an HTML Mailto Form
  4. HTML Forms Tags
  5. Try It Yourself

Purpose of HTML Forms

Web sites are great sources of information for visitors. But HTML forms allow visitors to be actively involved with your Web site. Forms can be used to solicit information from visitors or to provide visitors with dynamically generated output. The latter type of form requires the labors of a computer programmer, though.

Examples of HTML Forms

Mailto Forms

  1. IUP Graduate Admissions Inquiry
  2. On Line Appeal of University Parking Ticket
Other examples might include surveys or requests for specific types of feedback about your Web site.

Other Forms

  1. Weather Forecast
  2. Plotting a Function

The Anatomy of an HTML Mailto Form

Here is the HTML code for a simple HTML form. When this form is submitted, it will send an email message to hedonley. The subject of the message will be Visitors_Name and the body of the message will contain the last and first names entered into the form.

  <FORM METHOD="POST" ACTION="/htbin/cgi-mailto/hedonley/Visitors_Name">
  Last Name: <INPUT NAME="lastname" TYPE="text" SIZE=40><BR>
  First Name: <INPUT NAME="firstname" TYPE="text" SIZE=40><P>

  <INPUT TYPE="submit" VALUE="Submit">
  <INPUT TYPE="reset" VALUE="Reset">

This is what the form looks like in an HTML document. Notice that ordinary HTML code can be mixed in with the special HTML forms tags.

Last Name:
First Name:

If hedonley wants to receive email messages from the cgi-mailto program, he needs to create a file named .WWW_MAILABLE. Here are the commands that he needs to execute to create this file and to make it readable by the Web server.

  $ set default disk$user:[hedonley]
  $ set protection=w:e [-]hedonley.dir
  $ create/dir [.www]
  $ set protection=w:e www.dir
  $ set default [.www]
  $ create/protection=w:re .www_mailable

HTML Forms Tags

There are only a few HTML tags for creating forms.

Here is an example that uses all of the tags that you are likely to use.

Follow the link to The Orange Survey and then select Document Source under the View menu. Look at both of these simultaneously to see how each form element is created.

Try It Yourself