Tutorial: HTML forms - Checkboxes, radio buttons and menus
Level: Intermediate. Published on 28 November 2001 in HTML forms
Learn how to allow your visitors to choose from a range of options within HTML forms, using checkboxes, radio buttons, and 'select' menus.
This tutorial takes a look at three HTML form elements that allow your visitors to choose from a list of options. We look at checkboxes, radio buttons, and menus.
Find out how to create HTML forms in our Building forms tutorial.
Checkboxes
Checkboxes are simple fields that can be toggled on or off with a mouse click. A checkbox can have only one value — for example, "yes" or "true".
These fields are great for allowing the user to specify a single item of data — for example, whether they want to receive your newsletter or not, or to indicate that they have read your terms and conditions.
The checkbox field takes the format:
<input type="checkbox" name="xxxx" value="xxxx" checked="checked">
The name attribute is the name of the field (for example, "newsletter"). You can specify multiple checkboxes all with the same name, in which case they will belong to the same group. When the form is submitted, the values of all the checkboxes will be sent using the same field name.
The value attribute specifies the value that will be submitted if the user checks the box. If the user clears the box (so that it has no check mark in), then a null (empty) value will be submitted.
The checked attribute, if present, will display the checkbox already selected. If checked is not present in the tag, the checkbox will be displayed empty.
Example:
Would you like to be added to our mailing list?
<input type="checkbox" name="mailing_list"
value="yes" checked="checked"> Yes
Radio buttons
Radio buttons are similar to checkboxes, except that only one radio button in a group can be selected at any one time. (As with checkboxes, a radio button group is a collection of radio buttons with the same name attribute.)
Radio buttons are useful for getting a user to pick from a choice of options. (If you have a lot of options, consider using a menu instead.) The radio button tag has the same attributes as the checkbox element:
<input type="radio" name="xxxx" value="xxxx" checked="checked">
The name attribute is the name of the field (for example, "favourite_colour"). You can specify multiple radio boxes all with the same name, in which case they will belong to the same group. Only one radio button in the group can be selected at any one time.
The value attribute specifies the value that will be submitted if the user selects this radio button.
The checked attribute, if present, will display the radio button already selected. If checked is not present in the tag, the radio button will be displayed empty.
Example:
What is your favourite colour?
<input type="radio" name="favourite_colour"
value="red" checked> Red
<input type="radio" name="favourite_colour"
value="orange"> Orange
<input type="radio" name="favourite_colour"
value="pink"> Pink
Menus
Menus allow the user to select one or more items from a list of available options. A menu takes the format:
<select name="xxxx" size="xxxx" multiple>
<option value="xxxx" selected="selected">Option Text</option>
<option value="xxxx">Option Text</option>
...
</select>
The <select></select> tag defines the menu. The name attribute is the name of the menu (for example, "favourite_sport").
The size attribute specifies how many menu items will be displayed at once. If this attribute is not present or is set to 1, then a drop-down box will be displayed.
The optional multiple attribute, if present, will allow the user to select more than one option in the list by holding down the Shift or Control keys.
Inside the <select></select> tags, one or more <option> elements are placed. Each <option> element represents an item in the menu. The value attribute is the value that will be submitted if the user selects this option. The optional selected attribute will pre-select this option when the form is first displayed.
In between each <option></option> element, you can place the text label that you would like to be displayed for that option. Note that the text label does not have to be the same as the option's value attribute. The text label is not submitted with the form; it's just to guide the user.
Example 1: Drop-down menu
What is your favourite sport?
<select name="favourite_sport" size="1">
<option value="all" selected="selected">I love all sports!</option>
<option value="cricket">Cricket</option>
<option value="football">Football</option>
<option value="ice_hockey">Ice Hockey</option>
</select>
Example 2: 3-line list box
What is your favourite sport?
<select name="favourite_sport" size="3">
<option value="all" selected="selected">I love all sports!</option>
<option value="cricket">Cricket</option>
<option value="football">Football</option>
<option value="ice_hockey">Ice Hockey</option>
</select>
Enhancing select menus with option groups
Option groups are great when you have a select menu with a lot of options. Just as fieldsets help to group form fields into logical sections, option groups let you classify options within a menu.
Let's say we have an online store that sells 3 types of toys — rattles, teddy bears and balls — and each toy comes in different options. We could have all these variants in the one menu as follows:
It works, but it's a bit hard to read. Let's use option groups to classify the options by the type of toy:
<select name="toy">
<optgroup label="Rattles">
<option>Blue rattle</option>
<option>Green rattle</option>
<option>Stripy rattle</option>
</optgroup>
<optgroup label="Teddy bears">
<option>Humphrey bear</option>
<option>Cyril bear</option>
<option>Janet bear</option>
</optgroup>
<optgroup label="Balls">
<option>Soft ball</option>
<option>Beach ball</option>
<option>Spiky ball</option>
</optgroup>
</select>
And here's how it looks:
That's better! Now we can visually differentiate between the different product types. Much easier to use.
Other types of form fields
Now that you've learnt about checkboxes, radio buttons and menus, find out about:
The end
That's the end of this article. We hope you found it useful. If you're still stuck and would like further help, check out our online Help Forums, where you can get assistance from members of Elated and other webmasters.
Also, don't forget the free ELATED Extra Newsletter, where you can get more great Web-building articles and tips sent straight to your inbox!
If you would like to offer us feedback on this or any of our articles, please contact us. Have fun!