11.1: Form Controls

Last updated
Save as PDF

Page ID: 93844

\( \newcommand{\vecs}[1]{\overset { \scriptstyle \rightharpoonup} {\mathbf{#1}} } \) \( \newcommand{\vecd}[1]{\overset{-\!-\!\rightharpoonup}{\vphantom{a}\smash {#1}}} \)\(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\) \(\newcommand{\id}{\mathrm{id}}\) \( \newcommand{\Span}{\mathrm{span}}\) \( \newcommand{\kernel}{\mathrm{null}\,}\) \( \newcommand{\range}{\mathrm{range}\,}\) \( \newcommand{\RealPart}{\mathrm{Re}}\) \( \newcommand{\ImaginaryPart}{\mathrm{Im}}\) \( \newcommand{\Argument}{\mathrm{Arg}}\) \( \newcommand{\norm}[1]{\| #1 \|}\) \( \newcommand{\inner}[2]{\langle #1, #2 \rangle}\) \( \newcommand{\Span}{\mathrm{span}}\)\(\newcommand{\AA}{\unicode[.8,0]{x212B}}\)

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.

Control Type	Browser Display
Textbox:
Password:
Textarea:
Radio Button:	Radio Button
Checkbox:	Checkbox
Drop-down List:
Submit Button:
Submit Graphic:
Reset Button:

Figure \(\PageIndex{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.

Control Type	Browser Display
Email Address Input:
URL Input:
Search Field Input:
Datalist
Calendar:	Note: type="date" is supported only in Chrome, Safari, and Opera.
Color Picker:
Range/Slider Input:	(Range 1-110)
Number:	(Enter number between 0 and 10)
Telephone:	Note: type="tel" is supported only in Safari 8.

Figure \(\PageIndex{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.