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)

Milk Bread Eggs

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)

Short Medium Tall

Grocery Menu (single select)

milk bread eggs cheese

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.

milk bread eggs cheese

Employment (textarea)

(Be brief and concise)

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.