HTML and CSS Reference
In-Depth Information
Optional Attributes
for
: Explicitly associates the
label
with a single control when the attribute's value matches the
control's unique ID.
form
: This is new in HTML5 and allows the label to be associated with one or more additional
forms. The
form
attribute accepts a value of one or more form IDs, separated by spaces. This
feature allows authors to work around the lack of support for nested
form
elements.
INDICATING REQUIRED FIELDS
Not every control in every form is essential for the form's completion. Some fields may be required while
others will be optional, so it's polite and advisable to clearly indicate the difference. In the relatively short
life of the Web so far, it's become a convention to indicate required fields with an asterisk (*), a small
graphical dot or icon, or the word “required” next to the control (preferably in a
label
element).
In addition to an indicator of some sort, you should also include an informational statement to introduce
that notation to anyone who might not be familiar with it. A sentence such as “Required fields are marked
with *” at the beginning of the form will suffice. If a particular form has no optional fields, it could become
redundant to indicate every single control as required, so simply stating “All fields are required” might be
preferable. An instructional statement probably isn't necessary if required fields are individually flagged
with the word “required.”
Some web designers opt for indicating required fields with an italicized or boldfaced label, but that cue is
essentially visual and hence problematic for non-sighted users. If you choose to alter the presentation of
label text to indicate required fields, do so by wrapping the text in an
em
or
strong
element so even non-
visual devices can suitably emphasize it. If you use an image as a required field indicator, adding
alt="required"
will assist non-sighted visitors using screen-reading software. You shouldn't indicate
required fields purely through the use of color either; color-blind users might be unable to distinguish
them, and unsighted users will obviously run into problems. Don't indicate required fields visually through
CSS alone (with a background image or some other decoration); the indicator has real meaning and it
belongs in the HTML.
Displaying Output
Along with all the new and interesting ways to input data into a form, HTML5 has introduced a few new
elements specifically intended for displaying data to users. These elements aren't strictly related to forms,
though they're often very useful in conjunction with forms to display and visualize the results of a user's
input.
