Form Controls
An HTML form provides a way for users to interact with a Web page. A
form is, basically, a data capture device. It presents the user with one or more data
input or selection controls, or fields, through
which the user submits information to a Web page. On the basis of this submitted
information, the page can respond to the user. This response can vary depending on
the purpose of the form. The submitted data may be used,
- to direct visitors to a different page, much like what happens when clicking a link;
- to present visitors with personalized pages containing information and links pertinent
to their interests or preferences;
- to trigger a complex search process to locate information, products, or services about
which the user is interested;
- to perform personalized displays of options or calculations of prices of those products
or services;
- to trigger a credit card check during purchase of products or services;
- to interface with the organization's accounting and billing systems to finalize purchase;
- to generate automated email responses as purchase confirmations;
and the list can go on and on. The point is that forms are the triggers for a whole host
of activities that transform Web sites from simple electronic "page turners" into
full-featured information processing systems.
Form Controls
Forms gather information from users by displaying special form controls that permit
the user to enter data or make selections. The variety of standard controls that can
be coded on a Web form are shown below.
Figure 10-1. Varieties of form controls.
Note that there are three basic categories of controls. The fields labeled "Textbox,"
"Password," and "Textarea" present input areas where the user can enter information as
typed characters. The controls labeled "Radio Button," "Checkbox," and "Drop-down List"
provide options for the user to select from displayed items. The controls labeled
"Submit Button," "Submit Graphic," and "Reset Button" are clickable controls for
submitting the form data for processing or refreshing the entire form by clearing
entries and selections.
HTML 5 introduces several new interactive form controls. Many of the the form controls
include built-in validation. Currently, not all browsers support these controls. If a
control is not supported, it will display as a standard input control with no dynamic
functionality. Below are some of the most common and widely supported HTML 5 form controls.
Figure 10-2. Commonly supported HTML 5 form controls.
Form Processing
A form by itself cannot provide much in the way of processing power. Therefore, HTML
forms are backed by processing routines run remotely at the Web server to handle data
submitted from these forms. Form information arriving at the Web server is processed by
programs, or scripts, written in server languages such as ASP.NET, PHP, or Java.
These are full-featured programming languages that often interact with databases and
files on the server, thus offering a full range of information processing capabilities.
Although a large part of form processing takes place on the Web server, certain kinds
of processing can take place locally at the browser. These processing scripts are
written in the JavaScript language, the default scripting language included with
modern browsers. This language has many of the features of regular programming
languages. Its processing capabilities, though, are limited to what can be achieved
on the local desktop PC.
In this tutorial, focus is only on setting up forms on a Web page -- how to create
the input, selection, and submission controls. Server and browser processing is
beyond the scope of interest.