Some HTML Forms

These examples have been adapted from Programming the World Wide Web, 3rd edition, by Sebesta

Grocery Checklist (Plain text labels)

Milk Bread Eggs

If a checkbox is left unchecked it typically does not post to the action page at all so checking for existence of the element is usually sufficient for identifying whether the box was checked or not.

NOTE: The input tag only produces the box. The labels are provided as plain text. There is a label tag that can be used. See if you can notice a behavioral difference between the checklist above and below.

Grocery Checklist (label tag labels attached via id)

Age Category (radio buttons)

0-19 20-35 36-50 Over 50

Radio buttons are mutually exclusive. For the buttons to know what other buttons are in the same family they have to share the same name. Therefore, the value attribute is used to differentiate among them.

Height Category (radio buttons with labels)

Grocery Menu (single select)

Each option tag can optionally be given a value attribute to specify what should be sent to the server if the option is submitted. In the absense of the value attribute the text is sent.

Grocery Menu (multiple select)

NOTE: Hold down CTRL key when clicking to select multiple elements.

Employment (textarea)

All of the form elements below are placed within a form with an associated action. It can be helpful to modify the form attributes to get an idea of how they affect form submission.

Sometimes tables are used as a way to align table elements in an aesthtically pleasing way. Similar results can be obtained by using only CSS.

Also we see examples of text boxes in this form.

Millennium Gymnastics Booster Club Popcorn Sales

Buyer's Name:
Street Address:
City, State, Zip:
Product Name Price Quantity
Unpopped Popcorn (1 lb.) $3.00
Caramel Popcorn (2 lb. canister) $3.50
Caramel Nut Popcorn (2 lb. canister) $4.50
Toffey Nut Popcorn (2 lb. canister) $5.00

Payment Method:

Visa Master Card Discover Check

NOTE: buttons to clear a form aren't used very often as you might imagine!