Forms

Contents of this Session

• Introduction to Forms
  • Most important point of session
  • Appropriate element for each kind of input
  • Each element has an HTML tag
• Analyze a simple form
• Create a simple form and try it out

Introduction

The only interaction you can provide on a basic web page is a list (or equivalent) of places for the user to go, and allow the user to click on one. There are a number of situations where you may want to acquire more sophisticated information from the user, or do something with the information other than have the user go to a new page. Examples include:

• forwarding information from the web page to an email address (application form, on-line test)
• specifying a search (in a database, reference work, etc)
• accepting information to be verified, checked or processed by a program (on-line test)

Most Important Point of This Session

A form is a means of acquiring information from the user, that's all. The form does nothing with the information provided by the user. Unless you are simply emailing the information, you must have software to do something with that information: a program of a certain kind running on the server (the computer serving the web page) or on the client (the user's computer with the browser running on it). Matt's Script Archive is one reliable source of programs that work with forms.

Usually, the difficult problem is how to process the input from the form (that is, buy or write the appropriate CGI, javascript or java program). Today we'll work with the simplest processing, and look at examples of more sophisticated processing.

Typical uses of Forms

Application Form (mailto or CGI)

Search a Database (CGI + data files on server)

Get input to generate feedback on page (Javascript, Java, Plug-in)

Different Kinds of Information Are
Obtained by Different Input Elements

An element of a form is any one button, text box etc. There are about a dozen different kinds of elements, each suited for certain tasks. For example, you would not use the same kind of element for both open-ended text and to choose from a short list of mutually exclusive options.

What you want to do	Element you use to do it
allow user to type in one word or short phrase	text
allow user to type in extended block of text	textarea
allow user to choose one from a list of options	set of radio buttons popup menu
allow user to choose one or more from a list of options	set of checkboxes scrolling list
allow user to clear form and start over	reset button
allow user to submit information	submit button
include form information that user doesn't see	hidden
pass information to a javascript	button

A form to obtain expressions of interest from prospective students might include:

• a text box for the prospective student's name
• another text box for his or her email address
• some checkboxes to indicate previous courses taken
• a textarea for his or her statement of interest
• a submit button

Remembering the most-important-point of this session, you'd also have to include the necessary information to tell the user's browser to send the information from the form to your email address.

As you might have guessed, forms are created by using HTML tags. Next is a very brief and incomplete overview of tags for form elements, and then we'll go on to a simple example.