How do *you* indicate required fields in a web form?

[discopatrick]

Hi all,

I'm sure that most web developers will at some point have created a form where some of the fields are required, or must validate to a regular expression (e.g. email or date field). These fields must be indicated to the user as being required. I wanted to begin a discussion on how this can be achieved.

I'll begin by explaining how I achieve this:

As an ASP.NET developer, I often use the validator controls that come as part of the framework.

They work by default like this: you specify the text that will be displayed next to each field. Often this is just a '*' symbol of red colour. When the page first loads, none of these '*'s are visible.

It's only once you click the submit button that the '*'s become visible next to fields that had problems. If you have javascript enabled, they change immediately without a reload, and will continue to change dynamically as the user edits the form. If javascript is disabled, the page reloads and displays the '*'s.

I can see some pros and cons with this approach. First, the con: Why would you wait until the user had clicked the submit button to tell them that some of the fields were required? Wouldn't it be better to let them know straight away? Especially if javascript is disabled - they would have to wait for a full page reload before they discovered they missed a required field.

Secondly, the pro: if the browser has javacript enabled, then the form becomes visually dynamic - the user gets instant feedback from the edits they make to the form as the '*'s appear and disappear.

Finally, another thought: how does this fit in with web accessibility? Someone using a screen reader would (as I understand it) probably have javascript turned off, to prevent the page from changing. Therefore, if they missed a required field, the page would reload with '*'s next to the fields. How would you indicate to the user that they now had to go and correct the fields they missed? I think if I were the user, I would be confused that I was back on the same page (I would have been expecting some kind of confirmation page). Maybe we need a message to alert the user to the fact that some fields were missed - but where? Probably near the top of the page. Then, would the user have to traverse the page until they found a '*'?

I'm very interested to hear your opinions on this. Required fields are such a common element of a website, I'm sure every developer has got an opinion on how they should be done.

Also, please post links to what you consider to be good, usable examples of forms with required fields.