HTML and CSS Reference
In-Depth Information
An additional attribute available on the check box is the checked attribute. This attribute
provides a way to default a check box to the “checked” (or selected) state. By default, check
boxes aren't selected. However, by adding the attribute as follows, the check box defaults to
the “checked” state when the page is loaded:
<input type="checkbox" id="chkBrown" checked="checked"/> Brown
In other cases, when presented with a list of items, users might be able to choose only a
single item from the list.
Using the radio input type
The radio button is similar to the check box in that it provides a list of options for users to
select from. The difference from the check box is that users can select only a single item from
the list. An example would be asking users to rate something on a scale from 1 to 5. To add
this type of question to the survey, incorporate the following HTML beneath the check boxes:
<tr>
<td>
Rate your experience:
</td>
<td>
<input type="radio" id="chkOne" name="experience"/> 1 - Very Poor
<input type="radio" id="chkTwo" name="experience"/> 2
<input type="radio" id="chkThree" name="experience"/> 3
<input type="radio" id="chkFour" name="experience"/> 4
<input type="radio" id="chkFive" name="experience"/> 5 - Very Good
</td>
</tr>
Notice that as with all HTML elements, each radio input type needs a unique id . However,
the name attribute ties all the radio buttons together. With the same name specified for each
radio type, the browser knows that they are part of a group and that only one radio button
of the group can be selected. Figure 3-9 shows the output of the radio buttons added to the
survey.
In this output, the radio buttons are shown from left to right and enable users to select
only one option. When a user changes the selection to a different option, the previously
selected option is automatically cleared.
 
Search WWH ::




Custom Search