Making Choices

Checkbox

This HTML...	Produces this...
<form> Operating systems you have used:<br> <input type=checkbox name="os" value="Win">Microsoft Windows<br> <input type=checkbox name="os" value="DOS">MS or PC-DOS<br> <input type=checkbox name="os" value="MacOS" checked>Apple Mac OS </form>	Operating systems you have used: Microsoft Windows MS or PC-DOS Apple Mac OS

The name attribute is required and the same name is used for all checkboxes in the same group. The checkbox control allows multiple boxes to be checked. Note the checked attribute on the last checkbox listed. It allows you to specify a default selection which can be useful when a certain option in the set is chosen more often than others.

Radio Button

This HTML...	Produces this...
<form> What is your favorite flavor?<br> <input type=radio name="taste" value="choc">Chocolate<br> <input type=radio name="taste" value="van">Vanilla<br> <input type=radio name="taste" value="straw">Strawberry<br> </form>	What is your favorite flavor? Chocolate Vanilla Strawberry

The radio button is similar to the checkbox control with one major difference: only one radio button from a group can be selected at a time. Clicking on one radio button automatically unselects any previously selected button. As with the checkbox, you can specify a checked item, but this should only be done when a selection must be made.

List Box

This HTML...	Produces this...
<form> Pick a color: <select name="colors"> <option value="none"> <option value="R">Red <option value="O">Orange <option value="Y">Yellow <option value="G">Green </select> </form>	Pick a color: Red Orange Yellow Green

The listbox control begins with the <select> tag in the mandatory name attribute is specified. Items in the list are indicated by using an <option> tag for each one. Note the blank option specified at the top of the list. This lets you create a list without automatically displaying the first real choice.