31 Relying on field length

In comment #20 Justin wrote:
bq. […] by providing three fields, 2 with a max of 3 characters and 1 with a max of four characters. The form validator only has to validate whether the fields are numeric or not […]

Never rely on the fact that you are only receiving n characters because your forms have such an attribute set. You could end up inserting a little more than you wanted. ;-)

posted at 06:38 pm on December 21, 2005 by Philipp Bunge

32 field length woes

Ah yes – I got a little too literal in my description of what I wanted to achieve. I wanted to paint a verbal picture on how one could lay out a phone-number entry without making users enter their own delimiters.

posted at 06:52 pm on December 21, 2005 by Justin Rovang

33 The caption tag?

Nice article :)

I just have one question about the description of the <caption> tag. You write:

“Employ the <label> tag to ensure accessibility is maintained for all users. Also, make sure your labels are descriptive enough that users do not question what is expected in that field. Field names should be clear and concise. If additional information would be helpful, XHTML 1.1 provides the <caption> tag to add a descriptive caption and provide proper accessibility. For the less adventurous, you can always create small caption text using traditional XHTML 1.0 markup and CSS.”

I thought the <caption> tag was added around HTML 3.2? Second I thought it was only meant for use in tables (see W3Schools ) – or am I missing something here?

posted at 08:25 pm on December 22, 2005 by Thomas Watson Steen

34 Trackback

After reading the article it got me thinking and I wrote a few thoughts on the subject of form usability. Feel free to visit my post on justaddwater.dk

/thomas

posted at 09:43 pm on December 22, 2005 by Thomas Watson Steen

36 Kudos...

Excellent article, Brian. Another benefit to the single-field phone number is the accessibility aspect of only needing to label one field. If you have to label three, what would you call them? area code, prefix, and last 4? Suffix? Who would understand that in context? Thanks again!

posted at 08:47 pm on December 27, 2005 by James Craig

37 Let People Know Upfront

Great article, and easy to read and understand. I also heartily agree with Poster 4. My biggest beef with forms, is having to take the trouble to fill it all out… for example, for a free DVD describing the shop’s wares… and only after it is all filled out, finding they do not ship outside the U.S.

Sometimes, to satisfy my curiosity, I search the site for where I may have missed this info… and it is buried on some page in a small font, but is definitely not anywhere near the form page or within the form. I think such info needs to be made explicit. My suggestion is to put this type of info directly under the Title of the Form, something like “We do NOT ship outside the U.S.” It doesn’t hurt, especially if the form is a tad long and requires scrolling, to reiterate this message again, on top of another form section.

Although I am giving a specific example, I think the basic idea is a more general one: Let your audience know whether or not the Form even applies to them. The cardinal rule I would like to add goes something like: “Your users’ time is precious. Never waste it, or make them go through filling out a form unnecessarily. ALWAYS let them know whether or not a form applies to them, by stating these things clearly and upfront. Let them know if only people filling a certain criteria can apply.

Off the top of my head, another example might be if only VISA is accepted… shouldn’t you let people who may only have other Credit Cards, or none at all, know that ‘at this time, only VISA cardholders can complete the transaction’?

posted at 05:16 am on December 29, 2005 by Sandy Rubinfeld

38 The Legend of forms?

Brian, how do you feel about the use of Form Legends? Specifically with them being nigh on impossible to style them the same across browsers.

posted at 11:13 am on December 30, 2005 by Matt Sephton

39 Use https:// for sensitive data

Always use a https:// address for any form that contains any sensitive data (and pull all elements on the page from the https:// domain so the users don’t get a message about secure and non-secure items!).

A properly set up browser won’t cache data from a secured web site so your credit card details won’t be cached unless you overrode the default browser settings and enabled caching of secure web sites.

I’m like the others who despise forms that make information I don’t think the company needs for any valid purpose as mandatory and as much as possible when I hit such a site I ensure they get unusable garbage ( bitbucket@edgeoftheinternet.drop is my favorite email address :) ).

posted at 04:44 pm on December 30, 2005 by Roy Sinclair

40 cookies; JavaScript; autofocus

Cookies

If your form requires cookies, please say so, if only as an error message (this means you AListApart; I just spent several minutes trying to log in before I realized what was going on).

JavaScript

If your form requires JavaScript, rethink, but if you must, use a <noscript>This form requires JavaScript.</noscript>

Autofocus

Don’t autofocus on the first field on page load. I can’t count the number of times I’ve typed the first field and started typing the second (usually a password) when the page finishes loading and I wind up typing all or part of my password into the first, visible field. I also suspect this might be an accessibility issue for folks using screen readers, but I can’t say for sure since I don’t use one.

If it’s not an accessibility issue, then be intelligent about it and don’t autofocus if I’ve already started doing stuff with the page (typing, scrolling, tabbing through links, etc.). (And if the form isn’t the page’s sole purpose in life, then how do you know I want to fill in the form at all?)

Hope this helps.

posted at 12:53 am on December 31, 2005 by Charles Belov