• Choose a category
• All
• Classic-Fiction

By Root 1630 0

user interaction.

The formDemo.html page shows the following elements:

♦ A form: A container for form elements. Although the form element itself isn’t usually a visible part of the page (like the body tag), it could be with appropriate CSS.

♦ Text boxes: These standard form elements allow the user to type text into a one-line element.

♦ Password boxes: These boxes are like text boxes, except they automatically obscure the text to discourage snooping.

♦ Text areas: These multi-line text boxes accommodate more text than the other types of text boxes. You can specify the size of the text area the user can type into.

♦ Select lists: These list boxes give the user a number of options. The user can select one element from the list. You can specify the number of rows to show or make the list drop down when activated.

♦ Check boxes: These non-text boxes can be checked or not. Check boxes act independently — more than one can be selected at a time (unlike radio buttons).

♦ Radio buttons: Usually found in a group of options, only one radio button in a group can be selected at a time. Selecting one radio button deselects the others in its group.

♦ Buttons: These elements let the user begin some kind of process. The Input button is used in JavaScript coding (which I describe in Book IV), whereas the Standard and Submit buttons are used for server-side programming (see Book V). The Reset button is special because it automatically resets all the form elements to their default configurations.

♦ Labels: Many form elements have a small text label associated with them. Although labels are not required, they can make a form easier to style with CSS and easier for the user.

♦ Fieldsets and legends: These set off parts of the form. They’re optional, but they can add a lot of visual appeal to a form.

Now that you have an overview of form elements, it’s time to start building some forms!

Forms must have some form

All the form elements must be embedded inside a

pair. The code for basicForm.html illustrates the simplest possible form:

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

A basic form

Form elements go here

Other HTML is fine, too.

The

pair indicates a piece of the page that may contain form elements. All the other form doohickeys and doodads (buttons, select objects, and so on) must be inside a

pair.

The action attribute indicates what should happen when the form is submitted. This requires a programming language, so a full description of the action attribute is in Book IV. Still, you must indicate an action to validate, so for now just leave the action attribute null with a pair of quotes (“”).

Organizing a form with fieldsets and labels

Forms can contain many components, but the most important are the input elements (text boxes, buttons, drop-down lists, and the like) and the text labels that describe the elements. Traditionally, Web developers used tables to set up forms, but this isn’t really the best way to go because forms aren’t tabular information. XHTML includes some great features to help you describe the various parts of a form. Figure 7-2 shows a page with fieldsets, layouts, and basic input.

A fieldset is a special element used to supply a visual grouping to a set of form elements.

The form still doesn’t look very good, I admit, but that’s not the point. Like all XHTML tags, the form elements aren’t about describing how the form looks; they’re about what all the main elements mean. (Here I go again. . . .) You use CSS to make the form look the way you want. The XHTML tags describe the parts of the form, so you have something to hook your CSS to. It all makes sense very