HTML and CSS Reference
In-Depth Information
Discussion
While there are other ways to dynamically enable form fields, this method is one future
possibility that takes advantage of the new
disabled
attribute added for
fieldset
s in
HTML5.
Depending on how user agents support the
disabled
attribute, you may need to add
scripts that dynamically set the
disabled
attribute on the
fieldset
instead of hardcoding
the attribute.
See Also
The W3C's HTML5 Edition for Web Authors draft on forms at
http://dev.w3.org/html5/
7.8 Identifying Required Form Fields
Problem
You want to indicate to users visually and programmatically which form fields are
required.
Solution
If every field is required, include text instructions at the top of the form informing users
that everything's required. This works fine if the form is short.
Write out required
If you need to accommodate internationalization (IL8N) or users with low vision, place
the label on a separate line. Include
(Required)
within each
label
element for required
fields:
<p><label for="fName">First Name
(Required)
</label></p>
<p><input type="text" id="fname"></p>
If the design dictates that the label and field must be on the same line, add an image
icon within the
label
element. Set the value of the image
alt
attribute as
Required
:
<label for="fName">
<img src="required-icon.jpg"
alt="Required"
>
First Name
</label>
<input type="text" id="fname">
Using ARIA
If the design dictates that the label and field must be on the same line, add an image
icon within the
label
element. Set the value of the image
alt
attribute as
Required
, set