What's the best way to highlight a required field on a web form?
Generally speaking, the best web forms are the simplest ones that require me to think the least. The "standard" that has evolved is that required fields have an asterisk (*) next to them. Sometimes the asterisk is red to help it stand out a bit.
Why fight the standard? Don't make your users think too much. Go with the standard and keep your creativity for more important things.
If you're going to use colour to highlight the field, bear in mind that some people are colour-blind (so maybe provide another indicator too)
If you use stylesheets to format your HTML, then you can create a style for .mandatory
. As an example, set the mandatory input to use this style, then you can play with it more easily until you have the right mix of color, border, and other style elements to suit your overall design.
HTML
<input id="username" type="text" class="mandatory" />
CSS
.mandatory {
color: red;
font-size: 12pt;
font-weight: bold;
font-style: italic;
}
I also use the asterisk as the OP mentioned as a "backup".
-R