This tutorial takes a look at three HTML form fields that allow your visitors to choose from a list of options: checkboxes, radio buttons, and select
menus.
Checkboxes
HTML 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.
HTML checkbox 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.
Radio button 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
HTML select
fields
select
fields, or “menu” fields, are created with the HTML select
element. They allow the user to select one or more items from a list of available options. A select
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 HTML <select></select>
tags define 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, you place one or more HTML <option>
elements. 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.
HTML select
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>
HTML 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 HTML form fields
Now that you’ve learnt about HTML checkboxes, radio buttons and select
menus, find out about:
Prasanna says
❤❤❤❤❤