XHTML Free Tutorial

Web based School

Form Controls

Previous Next


XHTML forms provide a way for users to interact with Web pages. 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 fields, or 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.

Text Box:
Password:
Textarea:
Radio Button: Radio Button
Checkbox: Checkbox
Drop-down List:
Submit Button:
Submit Graphic:
Reset Button:

Note that there are three basic categories of controls. The fields labeled "Text Box," "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. On the following pages we'll take a look at the uses and coding for each of these controls.

Form Processing

Of course, a single Web page containing a form cannot provide much in the way of processing power. Usually, XHTML forms are backed by processing routines, or programs, run either locally on the browser or remotely at the server, to handle data submitted from these forms. Thus, a form by itself is not of much value unless supported by browser-side or server-side processing.

Processing routines can be included on the same Web page as the form and run by the browser. Normally these scripts are written in the JavaScript language. This language has most of the features of regular programming languages. Its processing capabilities, though, are limited to what can be achieved on the local desktop PC.

Most likely, form information is sent to the Web server where it is processed by programs written in standard languages such as Visual Basic 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.

In this tutorial, focus is only on setting up forms on a Web page -- how to create the input, selection, and submission controls. Browser or server processing is beyond the scope of interest.


Previous Next