What's the best way to highlight a required field on a web form?

Question

I don't find the oft-used "*" to be very nice looking - can anyone suggest a nicer-looking method or point me to an example?

I tried making the field highlighted in red as one person suggested but I did not like the look.

Bold labels might do the trick.

But I really like the idea of "Required" being shown in grey in the field until text is added. Does anyone have code for this?

Answer 1

add style="border: thin red solid;" to the element

Answer 2

I typically have no objections to seeing (required) in a smaller font either right below the field name or adjacent to the entry field.

I could also see using a "textbox watermark" to have the field say "required" in it until they bring focus to the field and start typing.

Answer 3

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)

Answer 4

I've found the answers on LukeW.com to be the most useful. because there isn't a simple solution here. It depends on what percentage of the fields are required, how many fields are in your form, and how long your labels are. For the vast majority of the web, people understand bold to be required, and normal-weight to be optional (if any options are bolded). Only after form validation fails would I present the user with the required-yet-skipped input boxes highlighted.

Answer 5

If you use CSS stylesheets to format your HTML, then you can create a style for "mandatory" input. (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.

#mandatory {
 color: red;
 font-size: 12pt;
 font-weight: bold;
 font-style: italic;
}

as an example. use with 'id=mandatory' in or just before the input statement.

I also use the asterisk as the OP mentioned as a "backup".

-R

Edit: the comments are correct: CLASS is preferred to ID.

Answer 6

Might want to check out www.PeterBlum.com - His Professional Validation Package rocks for validating and formatting of controls. He has tutorials for using and numerous examples as well as a detailed manual.

Answer 7

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.

Answer 8

Sometimes it really is justifiable to mark fields as mandatory and optional. However, before you do so, you should question whether it is reasonable to ask the user any non-mandatory information. This applies especially in registration forms.

In registration forms and such, it is much better to ask only the minimum information. After the registration the user can, at will, fill out optional information in separate forms.

After all the unnecessary cruft has been taken out from the form, you might see that there is no need to mark fields as mandatory; either everything is mandatory, or it might be so obvious to the user which fields are optional, that there would be no need to give visual cues about it.