The end of the required field. IMHO.

To the right of the label. The reason I do it that way is because I actually use an image of an asterisk with an alt attribute of 'required'. The visual user sees the asterisk next to the label and realises that input is required; the text-only user (screen readers etc.) reads/hears 'name of input - required'.

I find it most visible/noticeable to the right of the input field. But that's possibly because I'm lazy and rarely even read labels much of the time.

In a less common form (i.e. something other than a comment form) with fields that require actually paying attention, to the right of the label would seem to me the most natural place.

To the right of the text field. I have messed around and placed the asterisk on the label as well.

Typically the right of the text field.

Definitly at the right of the required field, separated by a space.

The asterisk should be in red or an other non-used, jump-in-the-eye color.

Yep, agree with everyone,
To the right of the label with the labels right-aligned to avoid spaces between the text and the asterisk.

My vote goes to : right of the label, without a separation.

Funny thing, I've just finished reading this morning Web Form Design: Filling in the blanks by Luke Wroblewski...

He says if you have to put an asterisk to point a mandatory field, you should put it to the right of the label. The reason is: people scanning the labels before completing the form will have a better idea of what will be required for them to enter.

His main thesis though encourages creating form with only required fields and that optional fields should be avoided because they are not necessary to complete the form. Less fields is better. The optional ones can be asked in an extended profile (or whatever) once the user is logged in!

Personally, I prefer no asterisk at all and instead a subtle variation of background color in required fields.

But if you have to have an asterisk, I guess the right side is easier to see if you are scanning the page and not paying too much attention.

I use your option one. People (in our culture anyway) read from left to right so they know right away that is is required.

Personally I prefer the asterisk (or any other notification) on the right of the (first) line. This means on a single line input (where label and input field are on one line) the notification is on the right of the input field. In case of a multiple line input (label is above the input field) the notification is on the right of the label.

Or (as comment #9) no notification at all, but use some colors to show the visitor which field is required and/or wrong.

I agree with only including required fields in the form.

But in case it ain't a registration and optional fields are to be included, an asterisc to the right of the label seems more logical and easy to see.

Great post - enjoyable.

Like Jerome (#8), more often that not nowadays I'm not including an asterisk at all. Most of the time people will fill out the vitals (which we keep pretty lean to email, company & name for most purposes) anyway, so no need to yell at them before they do anything wrong.

Our goal is to reduce the 'sticker shock' with "Golly, I'm not going to fill out all those required fields!" even though most people will fill out nearly 100% of the fields, including all the optional fields, anyway. That being said, once we validate the form (server-side), we save all their entries and post them back to the form, all populated with their data, and I apply an error class to the label, and an errorfield class to the form elements. It yields a nice bright red (not quite #ff0000) with a 3px border around the form fields and a light red (yes, pink) background on the fields. So they KNOW what they've done wrong and which fields are required.

And hey, how much do you HATE it when a form validation fails and you lose all your entries? We get so many positive comments like "I can't believe it saved all my information" like it's rocket science or something.

Oh, and my final reason: I'm anal about page formatting, so putting an asterisk to the right of my fields will mess up the alignment of all my pretty right-aligned labels (in a side-by-side table format)! hehe.

But I strongly agree with post #7, Mehmet, in that less is better. I'd fill out a 3-field form way more than a 20 field.

Great blog Christian! Always refreshing. :)

Shoot, I just realized the "Posted By" is after, not before, the post. Sorry about that. To correct my post, Jerome's #8 post was supposed to be Mona's, #9. And Mehmet's #7, was supposed to be Jeromoe's at #8. Sorry everyone! :(

In addition to the asterisk I think it's a good idea to use bold type for required field labels and normal type for non-required. This has become somewhat of a convention and also makes required labels look more "important". I second (third, fourth?) the notion that minimizing or eliminating non-required fields is the way to go.

Definitely to the right of the label (#2). I'm not sure why, but my eyes don't notice the asterisk to the right of the input box, as well. When it's to the left of the label, I totally ignore it (without even realizing it).

It depends. Before label for right-aligned labels (this page's comment form), after label for left or top-aligned labels. Leave the area after/below input for error messages. What about a legend? Or, should the asterisk be text (*) or an image or (required)? Personally, I prefer (required) on top-aligned labels (no need for legend). Should (optional) be even used? I rarely ever see optional, but I guess it makes sense where most inputs are required and few are optional.

I prefer to the right of the text box. surprisingly, some users may confuse it as an artistic inclusion of the label text if it's paced with the label or to the left of the text box. I like to also cover all the bases by using JavaScript to highlight fields that are mandatory.

i forgot to put asterisk on my forms...oops. will follow your advise. Thanks

3 *

I go with the colored background on a required field. I also keep a div with the "Required" in it that I text-indent off the page for screen readers.

This is certainly not something I have lost any sleep over before, and have always just placed them at the end of the input box. Seemed to work well enough. Doesn't hurt to experiment with some upcoming projects though.

I would put the asterisk inside the text box on the left side, maybe as an image background aligned to the left.

2a imo

My vote goes for #2 and the one with the asterisk at the right side of the text and with the field below. I also use #3 depends on the design...

I normally pace it to the right of the required field.

On the right side of required field.

I agree with eliminating non-required fields for things like registration forms, possibly pointing out at the top that all fields are required. If they miss a field, reload the page with their input intact and then point out their errors. They can always fill out extra information after they've registered. For that (user profile page), I find it easier to have the required fields together at the top and set apart from the rest, perhaps in a different coloured container.

All these design examples are pretty poor but speaking strictly from a usability perspective then I'd say the asterisk should be placed near the fields name, it's identifier. If 'Name:' is the compulsory field that needs capturing then the asterisk would be placed near 'Name:'. Not the text field its self but the Identifier of what the text field is. Simple really.

according to me the asterisk should be to the right of the label . i think that if i place the astrisk to the right of the label then the look of the form will be good the alignment looks good and there is no disturb in the future for any changes actually the asterisk takes place in the label width so there is no break up in the code

I really don't think it matters where you put the asterisk as long as it's obvious. Making it a different colour so that it stands out is good - red and orange naturaly draw the eye.

Alternatively, you can change the label text colour, the lable text font weight, the field background colour or the field border colour.

More important, in my view, is dealing with any entry problems as they arise - using the onblur event. This is so much better than dealing with errors on submit. It's a horrible feeling thinking you've submitted a form and then having to find where you went wrong. And there's nothing worse than having to re-enter details like passwords.

Definately on the right, this seems to be the most easily idenifiable position that the eye pics up on. If placed on the left hand side with the text if can blend in, while on the other hand if you place the asterix on the right it is the only thing on that side and thus easily picked up. But that is my 2 cents worth.

This is a very interesting question! And after looking at the different examples realized that sometimes I set the required field asterisk yet another way, between the end of the label and the colon! Now this way looks strange so I think I'll change to the right of the field like in example 3 - it seems the cleanest (less cluttered) from a design point of view.

My vote goes to : right of the label, without a separation and below input.

#1 (asterik to the left of the label)
- This way it is easy to scan for required fields.
- People with bad sight or blind will hear "asterik" first, so they will be immediately aware that following info (label name) is important.