Forms With Style Part 3 - Required Fields
3rd edition — by Patrick McNeil — Jan. 27, 2006
The Design Element
Forms most always have some fields that are required and others that
are optional. Yet there seems to be little creativity
when it comes to communicating this information to users. I often wonder
if it isn't shown in the hopes that you will just fill in all the information
assuming it is all required. But many times I don't want to give out my
email address, only to find out it is actually required.
Regardless, informing
users up front of what is required can only result in a more positive experience.
Look at the samples below for some ideas on how you could denote this required
status. Some of the techniques and colors used are far from subtle, but this
is in an effort to emphasis what was done to denote the required field.
In order to avoid confusion about how styles apply for the purpose of this
article, all extra tags have been removed from the form. The fieldset,
heading tags, and the submit button have been removed. In all cases the
core html remains unchanged.
In sample 1 we start with the trusty red asterisk. We have however replaced
it with a snazzier image based version. This not only looks better, but also
allows us to avoid editing the text in the html, we simply set the image
as a background for the label tag.
note: As usual Safari messes with a few of these samples. So beware before
you implement them.
Links
Form Showcase (GREAT inspiration)
W3Schools Links:
HTML
Fieldset tag
HTML
Legend tag
HTML
Label tag
CSS Position property
CSS Display property
CSS Top property
Other Links
FamFamFam (free
and beautiful icons used on this page)
Great
Fieldset samples
IE
fix for displaying legends in fieldsets
The Form Assembly
Jot Form (online form builder)
