15

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?

WPWoodJr
  • 1,155
  • 1
  • 12
  • 16
  • Duplicates: https://stackoverflow.com/questions/1861027/how-to-indicate-required-fields, https://stackoverflow.com/questions/262922/whats-the-best-way-to-highlight-a-required-field-on-a-web-form – Matěj Kříž Aug 31 '18 at 14:43

9 Answers9

15

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.

David Irwin
  • 458
  • 3
  • 9
  • Sometimes standards don't age well, and eventually find themselves in dire need of modernization. While I know many people will disagree, I'd suggest this standard is one of them. The asterisk is old and ugly, and we can do much better. It's more work, certainly, but I would suggest retaining the asterisk, but then hiding it via client-side scripting and highlighting the associated field with a color instead - perhaps yellow - when it's empty. Think about those fancy new password fields that update a strength indicator as you create it. Something like that. – Mir Jan 30 '13 at 19:18
7

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)

cagcowboy
  • 30,012
  • 11
  • 69
  • 93
5

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

Tim
  • 88
  • 6
Huntrods
  • 2,561
  • 3
  • 22
  • 29
4

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.

smt
  • 1,171
  • 1
  • 10
  • 13
2

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

Steven A. Lowe
  • 60,273
  • 18
  • 132
  • 202
  • works fine on most elements but doesn't work well with a set of radio buttons... or a checkbox (e.g. I agree with required spamming service) – scunliffe Nov 04 '08 at 19:27
  • I'm not sure the colour conveys the intent properly either. Red feels too much like an error message, but this is no such thing. Maybe a green border would encourage people to 'go' to those fields ... – Bobby Jack Nov 04 '08 at 20:08
  • Oh, and thin displayed very differently between Mozilla and IE when I last checked - not to say you *don't* want that. – Bobby Jack Nov 04 '08 at 20:10
2

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.

Eric Caron
  • 6,181
  • 1
  • 24
  • 26
1

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.

Dillie-O
  • 29,277
  • 14
  • 101
  • 140
  • Is there a simple way to add some grey text such as "Required" to a text box, which disappears on focus, or does it require javascript? – WPWoodJr Nov 04 '08 at 19:00
  • You can do it with stylesheets, but you would need some javascript to swap stylesheets once the user clicks on the textbox field. – Dillie-O Nov 04 '08 at 19:04
1

I like the way it is done in the ASP.NET Ajax Control Toolkit for the ValidatorCallout control:

alt text

Glorfindel
  • 21,988
  • 13
  • 81
  • 109
splattne
  • 102,760
  • 52
  • 202
  • 249
  • I don't like that because it doesn't tell you what is required until after you've attempted to submit the form. If all that is required is an email address, then that should be the only field flagged as required... how is the question. ;-) – scunliffe Nov 04 '08 at 19:29
0

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.

silverbugg
  • 214
  • 2
  • 7
  • 1
    I don't know what styling options are available for those validators but I have to say those are some of the ugliest client side validators I've seen. – scunliffe May 14 '09 at 17:24