Finally, a post!
<label> is in my opinion one of the most useful element when designing forms, especially when they have lots of radio buttons and checkboxes. Unfortunately, it is also the most widely forgotten...
I quite like AJAX in a form, however, the "check username" function is usually a good one.
It's the one thing in building web pages that I really hate doing.
I don't think it's necessarily true that one should avoid Ajax in forms. As with anything, it just needs to be done properly to add optional functionality.
The example of 'check username' is a good one. It's a useful thing, but it's also quite possible to set up so that if JS isn't available the 'check username' button doesn't appear.
Likewise, if the Ajax request fails, show a friendly message saying that the name couldn't be checked.
It's all about progressive enhancement. Make the form work, then (and only then) add stuff to make it work better and improve user experience.
Although I tend not to use Ajax for form submission, the same principle can be applied. Make the form work without the Ajax call, then (if you have the time and inclination) do the Ajax submission with some detection/fallback if the Ajax call fails.
On the subject of checkboxes, radio buttons and labels. I'm in a state of flux as to how exactly to mark up a group of radio buttons (for example).
Assuming that your form has a question/answer format do you use a legend tag and a fieldset to group your buttons together then apply labels to each radio button? Or do you group them in a div and put your question into a label for that div?
I can never decide!
Oh, yes, welcome back :)
I encountered some nasty forms on the British Gas site recently. I couldn't remember my password, so tried to reset it. The forms use some pretty but ultimately useless AJAX tooltips that don't actually advise you on what validation is being applied to the fields, and what help is available becomes unavailable if you shift focus; to another form field or browser tab, for example.
What's worse, one of the password validation criteria -- that you can't choose one of your last 12 passwords -- isn't listed *anywhere*! I only found this out by emailing BG.
Luckily, I remembered my password and didn't need to reset it after all.
Yes, yes and yes. Great post on coding forms.
Labels are very important.
Aggressive client-side validation can lock users out while revealing your business logic.
For file uploads, the basic file uploads are horrible for uploading multiple files and styling, consider SWFUpload or a Java uploader like Facebook.
I'd generally advise against any AJAX stuff in forms, but I must confess I've been impressed once or twice with those forms that check username availability before submission.
@Pete - Can't say I'm a regular user of the fieldset/legend elements, but (for longer forms especially) they could be useful for grouping elements, stylistically at least.
Fantastic post, i got enriched with valubale information regarding HTML coding.
Thanks for finally making a post!! I know you been busy with work and all but seeing a post is great!
All this advice really helps, I never have had overly large forms. Some stuff on this post is totally new to me, so I will be looking more into that soon.
Forms that require unnecessary information piss me off big-time! Case in point, I'm trying to alert someone to a 404'ed link - but the site designers DEMAND I enter my first & last name plus some other junk they don't need. My response, generally, is to enter garbage (eg "William Gates III" or "Why, why, why"). On bad days, the garbage gets a bit more, er, spicy.
FYI, I've not no complaint with your comment form. It just seemed apropos to enter crap. Sorry. :)
Hmph. I suppose I'll have to prepopulate the name with 'Anonymous' or similar :-)