HTML The Definitive Guide (107 page)

Read HTML The Definitive Guide Online

Authors: Chuck Musciano Bill Kennedy

BOOK: HTML The Definitive Guide
8.76Mb size Format: txt, pdf, ePub

Chapter 10

Forms

 

10.7 Multiple Choice Elements

Checkboxes and radio buttons give you powerful means for creating multiple-choice questions and answers, but they can lead to long forms that are tedious to write and put a fair amount of clutter onscreen. The Tag

By placing a list of

Function:

Create single-and multiple-choice menus

Attributes:

CLASS ONKEYPRESS

DIR ONKEYUP

DISABLED ONMOUSEDOWN

ID ONMOUSEMOVE

LANG ONMOUSEOUT

MULTIPLE ONMOUSEOVER

NAME ONMOUSEUP

ONBLUR ONSELECT

ONCHANGE SIZE

ONCLICK STYLE

ONDBLCLICK TABINDEX

ONFOCUS TITLE

ONKEYDOWN

End tag:

; never omitted

Contains:

select_content

Used in:

form_content

As with other form tags, the name attribute is required and used by the browser when submitting the form data to the server.

10.7.1.1 The multiple attribute

To allow more than one option selection at a time, add the multiple attribute to the to behave like an element. If multiple is not specified, exactly one option can be selected at a time, just like a group of radio buttons.

10.7.1.2 The size attribute

The size attribute determines how many options are visible to the user at one time. The value of size should be a positive integer. The default value is 1 when size isn't specified. At size=1, if multiple is not specified, the browser typically displays the to be displayed as a scrolling list.

In the following example, we've converted our previous checkbox example into a scrolling, multiple-choice menu. Notice also that the size attribute tells the browser to display three options at a time:

What pets do you own?


The result is shown in
Figure 10.5, along with the change in appearance when the
size attribute is set to 1 and multiple is not specified.

Figure 10.5: A form control.

Function:

Define available options within a tag's menu or scrolling list, so the content must be plain text only, without any other sort of markup.

10.7.2.1 The value attribute

Use the value attribute to set a value for each option the browser sends to the server if that option is selected by the user. If the value attribute has not been specified, the value of the option is set to the content of the

As an example, consider these options:

Both have the same value. The first is explicitly set within the

10.7.2.2 The selected attribute

By default, all options within a multiple-choice tags will preselect the first option if no option is explicitly preselected.

10.7.2.3 The label attribute

Normally, the contents of the

10.7.3 The Tag

Menus of choices in forms can be quite large, making them difficult to display and use. In these cases, it is helpful to group related choices, which can then be presented as a set of nested, cascading menus to the user. New in HTML 4.0, the tag brings this capability to HTML forms, albeit limited.


Function:

Group related

The browser creates submenus for each tag within the main


...



...


...


Since no browser yet supports the tag, we can't show you what this menu might look like. However, it will probably look and feel much like the familiar pulldown menus that are a common feature of most graphical user interfaces. When selected with the mouse or keyboard, the optgroup probably will open into one or more menus. For instance, our "state" example probably will have submenus labeled "Northeast," "South," and so on, each of which can be pulled open to reveal a list of included states.

Regrettably, the biggest drawback to the tag is that it cannot be nested, limiting you to one level of submenus. Presumably this restriction will be lifted in a future version of HTML.

10.7.3.1 The label attribute

Use the label attribute to define an optgroup's submenu title to the user. You should keep the label

short and to the point, to ensure that the menu can be displayed easily on a large variety of displays.

10.6 Multiline Text Areas

10.8 General Form Control

Attributes