XHTML Forms - Web Development and Design Foundations with XHTML - page 357

perhaps he or she may not want to divulge this particular e-mail address. Perhaps they have
another e-mail address that is used for forms and newsletters, and do not want to waste time
filling out your form. In either case, the result is an unhappy Web site visitor. So, while using the
mailto: URL is easy, it does not always create the most usable Web form for your visitors.
What's a Web developer to do? Use server-side processing (see Hands-On Practice 9.4) to
handle form data instead of the mailto: URL.

Form Controls

The purpose of a form is to gather information from a Web page visitor; form controls
are the objects that accept the information. Types of form controls include text boxes,
scrolling text boxes, select lists, radio buttons, check boxes, and buttons. XHTML tags
that configure these form controls include the <input /> , <textarea> , <select> , and
<option> tags. Most form controls are configured with the <input /> tag, which is
self-contained. The text box , password box , check box , radio button , scrolling text box ,
select list , submit button , reset button , button , and hidden form element fields are intro-
duced in the following sections.

Text Box. This form control is configured by the <input /> tag and accepts text or
numeric information such as names, e-mail addresses, phone numbers, and other text. A
sample text box is shown in Figure 9.5.

Figure 9.5
The <input />
tag with
type="text"
configures this form
element

The XHTML code follows:

E-mail: <input type="text" name="email" id="email" />

Common text box attributes are listed in Table 9.2.

Table 9.2 Common text box attributes

Common
Attributes

Values Usage

type text Configures the text box.

Alphanumeric, no spaces,
begins with a letter

Names the form element so that it can be easily accessed by client-
side scripting languages (such as JavaScript) or by server-side process-
ing. The name should be unique.

name

Alphanumeric, no spaces,
begins with a letter

Provides a unique identifier for the form element.

id

Numeric Configures the width of the text box as displayed by the browser. If size

is omitted, the browser displays the text box with its own default size.

size

Numeric Configures the maximum length of data accepted by the text box.

maxlength

Text or numeric
characters

Assigns an initial value to the text box that is displayed by the browser.
Accepts information typed in the text box. This value can be accessed
by client-side scripting languages and by server-side processing.

value