HTML and CSS Reference
In-Depth Information
FIGURE 3-9
Adding some
radio
input types to the form
Like with the
checkbox
input types, defaulting the state of the
radio
input to selected is
possible. This is done in exactly the same way, by specifying the
checked
attribute:
<input type="radio" id="chkFive" name="experience" checked="checked"/> 5 - Very Good
In this case, the rating of 5 - Very Good defaults to selected for the group of radio buttons.
You can have multiple groups of radio buttons on the same page by specifying a different
name for each group of buttons. Another way to provide users with the ability to specify a
single value within a group of values is with the use of the range control.
Using the
range
input type
Using the
range
input type enables users to specify a value within a predefined range by
using a slider bar. This type can be used in cases where a wider range of values is required to
choose from but using radio buttons would be too unwieldy. Add another rating question to
the survey, as shown in the following HTML after the radio buttons:
<tr>
<td>How likely would you recommend the product:
</td>
<td>
<input type="range" min="1" max="25" value="20"/>
</td>
</tr>
This HTML markup provides users with a slider bar that they can use to specify a value
between 1 and 25. The
min
attribute specifies the minimum value of the range; the
max
at-
tribute specifies the maximum value. The
value
attribute specifies a default value. If you omit
Search WWH ::
Custom Search