HTML and CSS Reference
In-Depth Information
<label style=”display: block”><input type=“radio” name=“color” value=“green” />
Green
</label>
.
Output
FIGURE 11.8
A group of radio
buttons.
I've used the same
<label>
technique here that I did in the check box example. Placing
the radio buttons inside the labels makes the labels clickable as well as the radio buttons
themselves. I've changed the
display
property for the labels to
block
so that each radio
button appears on a different line. Ordinarily I'd apply that style using a style sheet; I used
the
style
attributes to include the styles within the example.
As with check boxes, if you want a radio button to be selected by default when the form is
displayed, use the
checked
attribute. One point of confusion is that even though browsers
prevent users from having more than one member of a radio button group selected at once,
they don't prevent you from setting more than one member of a group as checked by
default. You should avoid doing so yourself.
11
Using Images as Submit Buttons
Using
image
as the
type
of
input
control enables you to use an image as a Submit button:
Input
▼
<input type=“image” src=“submit.gif” name=“submitformbtn” />
Figure 11.9 shows a custom button created with an image.
Output
.
FIGURE 11.9
The image input
type.
