HTML and CSS Reference
In-Depth Information
<fieldset>
<legend>Select your preferred format</legend>
<ul>
<li>
<label for="text">
<input type="radio" id="text" name="format" value="text"> Plain text
</label>
</li>
<li>
<label for="html">
<input type="radio" id="html" name="format" value="html"> HTML
</label>
</li>
</ul>
</fieldset>
<p><button type="submit">Subscribe</button></p>
</fieldset>
</form>
The
label
element describing the e-mail field doesn't enclose its associated
input
element, but they're
connected by the
for
and
id
attributes. The labels for the format options contain both their label text and
their
input
s, so their
for
attributes aren't strictly necessary but are still worth including. A
label
element
that lacks a
for
attribute and doesn't contain a control won't do much good at all; there's nothing to relate
that
label
to a form control.
You can see the final product in Figure 8-27. Alas, it's not very pretty when you see it with the browser's
default styling. Fortunately you have the power of CSS on your side, and you'll learn just a few ways to
improve the looks of your forms before the end of this chapter.
Figure 8-27
. The form isn't the prettiest thing when rendered with a browser's default style sheet, but its markup is
semantically sound and will be accessible to a wide range of people and devices.
Required Attributes
The
label
element doesn't require any attributes.
