These examples have been adapted from Programming the World Wide Web, 3rd edition, by Sebesta
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.
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.
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.
NOTE: Hold down CTRL key when clicking to select multiple elements.
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.