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

Common scrolling text box attributes are listed in Table 9.6.

Table 9.6 Common scrolling text box attributes

Common
Attributes

Values Usage

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 processing.
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 in character columns of the scrolling text box. If

cols is omitted, the browser displays the scrolling text box with its
own default width.

cols

Numeric Configures the height in rows of the scrolling text box. If rows is

omitted, the browser displays the scrolling text box with its own
default height.

rows

Select List. The <select> container tag (along with <option> tags) configures a
select list. This form control has several names: select list, select box, drop-down list,
drop-down box, and option box. It allows the visitor to select one or more items from a
list of predetermined choices. The <option> container tag configures the choices in a
select list. Sample select lists are shown in Figures 9.10 and 9.11.

Figure 9.11
This select list has
size set to 4 ; since
there are more than
four choices, the
browser displays a
scroll bar

Figure 9.10
A select list with size
set to 1 functions as
a drop-down box
when the arrow is
clicked

The XHTML code for Figure 9.10 follows:

<select size="1" name="favbrowser" id="favbrowser">
<option selected="selected" >Select your favorite browser</option>
<option value="Internet Explorer">Internet Explorer</option>
<option value="Firefox">Firefox</option>
<option value="Opera">Opera</option>
</select>

The XHTML code for Figure 9.11 follows:

<select size="4" name="jumpmenu" id="jumpmenu">
<option value="index.html">Home</option>
<option value="products.html">Products</option>
<option value="services.html">Services</option>
<option value="about.html">About</option>
<option value="contact.html">Contact</option>
</select>