HTML and CSS Reference
In-Depth Information
checked>
A checkbox element is shown in Figure 5-6.
Figure 5-6 A simple checkbox.
Radio Buttons
The radio type is used to display a radio button. This is useful if you have a number of different options to present
to users but only want them to choose one of these options.
When using multiple radio buttons as options, each <input> element should have the same name attribute. The
data that is associated with an option should be stored in the value attribute.
As with checkboxes, you can also set a default for radio inputs using the checked attribute.
Here is an example of how you might use multiple <input> elements with the type radio in order to collect a
user's favorite color.
<p>
What is your favorite color?
</p>
<div>
<label for=”green”>Green</label>
<input name=”favColor” id=”green” type=”radio” value=”green”>
<label for=”red”>Red</label>
<input name=”favColor” id=”red” type=”radio” value=”red” checked>
<label for=”orange”>Orange</label>
<input name=”favColor” id=”orange” type=”radio” value=”orange”>
<label for=”blue”>Blue</label>
<input name=”favColor” id=”blue” type=”radio” value=”blue”>
</div>
Notice how, in this example, all the <input> elements have the same name attribute. We have also indicated that
red should be the default option using the checked attribute.
Figure 5-7 shows how this example should look in your web browser.
Figure 5-7 Multiple input elements with the type radio.
Search WWH ::




Custom Search