HTML and CSS Reference
In-Depth Information
To create option buttons:
1. Return to the survey.htm file in your text editor and then scroll down to the sec-
ond field set. Directly after the ordertype selection list, add the following code
(see Figure 6-36):
Make sure you use the
same field name for the
different radio buttons
within the group so that
browsers treat them all as
part of the same field.
<label>Was your service friendly?</label>
<fieldset class=”optionGroup”>
<label for=”sYes”>Yes</label>
<input type=”radio” name=”serviceFriendly” id=”sYes”
value=”yes” />
<label for=”sNo”>No</label>
<input type=”radio” name=”serviceFriendly” id=”sNo”
value=”no” />
</fieldset>
figure 6-36
Option button group for the servicefriendly field
field set cont a ining the
label and op t ion buttons
label associated with the
option button control
option button fo r the
serviceFriendly field
2. Save your changes to the file and then reopen survey.htm in your Web browser.
Figure 6-37 shows the current appearance of the option buttons.
figure 6-37
rendered option buttons
3. Click each option button and confirm that clicking one option button deselects
the other. Also verify that when you click the labels next to the option buttons, the
option buttons become selected.
The appearance of the option buttons and the field set box is partly based on the CSS
styles you created for the fieldset and input elements in the last session. The option
buttons take up more space than necessary and you think they would look better if they
were all on a single line. To accomplish this, you'll create style rules to display the labels
and option buttons as inline elements, reduce their widths, resize their margins, and pre-
vent them from floating. You'll also remove the border from the fieldset element that
contains the option button labels and controls.
Search WWH ::




Custom Search