Comments: Good Practice in Implementing HTML Forms 21 November, 2007 — Stuart Brown

< Back to 'Good Practice in Implementing HTML Forms'

11 comments:

Matt K wrote:

Finally, a post!

Xavier Lepaul wrote:

<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...

Todd wrote:

Welcome back!

Forms are one of my biggest gripes. So tedious to create, check validation etc. I hate the fact if I check the form using javascript, I then have to check it using php server side.

I quite like AJAX in a form, however, the "check username" function is usually a good one.

Pete wrote:

Ugh. Forms.
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 :)

Barry Bloye wrote:

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.

Marc wrote:

Yes, yes and yes. Great post on coding forms.

Use Ajax/JavaScript effects sparsely on your forms only when necessary. Don't hide important information behind fading JavaScript effects unless it is very intuitive and adds to the user's experience.

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.

Stuart Brown wrote:

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.

Nazar wrote:

Fantastic post, i got enriched with valubale information regarding HTML coding.

Adam Griffiths wrote:

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.

Cheers Stuart!!

William Gates III wrote:

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. :)

Stuart wrote:

Hmph. I suppose I'll have to prepopulate the name with 'Anonymous' or similar :-)

Comments are closed.

< Back to 'Good Practice in Implementing HTML Forms'