HWG-News Tips Late February 2000

Effective Form Use Tips

HWG-News features member-submitted "tips" in each issue, in the space between articles and announcements. These were the tips submitted for the 19 February 2000 newsletter, for the following category:

Creating Effective Forms

Input fields, checkboxes, textareas, radio buttons -- these are the building blocks of HTML forms. How can you use them to greatest effect? When should you use each type of input element? Can you validate your users' input? How do you process a form once it has been submitted?

This issue's winner!

Most people, when filling out forms, hate to do a lot of typing. A good way to create an effective form is use as many presets as possible, set TABINDEX attributes to increase ease of use, and limit your questions to necessities. Eliminate text input tags and replace them with check boxes, radio buttons and drop-down menus whenever you can.

-- Submitted by Ben Cross <bcross@djinn7.net>

Other Form Use Tips Tips

In addition to the short tips listed below, Phil Jansen submitted a longer explanation of form validation using Javascript, which was unfortunately too long to run as a tip. We have instead presented it as a separate page.

All my checkboxes have clickable labels. When you click the label --just as in any windows app-- the checkbox is checked or unchecked. Same goes for radio buttons. The whole thing is done with two short scripts, one server side script which creates the widgets and one client side JavaScript which handles the clicking of labels.

-- Submitted by Robin Lauren <robin.lauren@novostore.com>

I think there are some obvious points when considering a form from the users' perspective:

• Organize: Align form fields on the page (use tables?).
• Group similar data fields (address, dates, etc)
• Simplify input: Define defaults in drop down boxes (for most common entry, such as USA for country)
• Set logical tab sequence (To tab to next field and force page scroll when required.)

-- Submitted by Dawne Holz

Be sure to specify format requirements for fields such as phone number, Social Security Number (SSN), date of birth, etc. Tell the user whether or not to include dashes in the SSN: 123-45-6789 or 123456789. Tell the user to enter their date of birth in the format you want, such as MM/DD/YYYY. Nothing is more frustrating than filling out a form, only to be told that it was done incorrectly and you must start over. If you want people to supply information, make it easy for them to do so.

-- Submitted by Kim Straight <kim.straight@jntf.osd.mil>

For an initial inquiry form on a website be sure to keep it short. Having too many fields to fill in and asking for a lot of details from the visitor may seem 'invasive' to most of them and will only discourage them from submitting a query. The only essential fields are name, email address and a text area for query details. Once they submit this information, you know someone is interested in your product/services and you can always contact them via email with specific questions.

-- Submitted by Parag Kapashi <web@sitewala.net>

The best advice I can offer on using forms effectively is to not forget about the drop-down menu! The drop-down menu is the best choice for a field that has a limited number of values. And remember that you can allow a user to choose more than one entry with the use of the MULTIPLE tag.

-- Submitted by Dan Romanchik <danr@webpublishinggroup.com>

Other Tips Submitted

Sometimes we get tips that don't directly relate to the topic at hand, but they may be useful anyway. Rather than discard them, we've chosen to list them here:

One very common mistake designers make is failure to specify a secondary font choice. We forget that not everyone (particularly Mac users) has the same fonts installed on their systems. "Arial", for example, is growing in popularity for body text. But what of those with an early Mac who lack this font? Simply specify "Helvetica" as the secondary font and 99% of the viewing world will see what you want them to see, not the default font on their particular system.

-- Submitted by Jim Peden <jim@middlebury.net>

Spell checkers don't catch mistakes in grammar for words that sound alike. It isn't really that hard to learn the difference among "you, your, you're". Sentences like, "Run you spell checker" cause (some readers) to stumble and distract from the message. Look through your page to see if your usage is correct before you send it to the server.

-- Submitted by Lewis Overton <lewy@iname.com>

A good design is a simple design. It can be stunning and image intensive, but it should always be simple to use and easy to navigate.

-- Submitted by Mel Carrie <mel@unicg.com>

The worst web design mistake I've seen is emphasizing web design and ignoring the task of keeping the site current. One of the reasons I learned HTML is because a non-profit I did volunteer work for had a site which still advertised an event that was over in early July in late February. All the while ignoring the events planned for the upcoming summer.

-- Submitted by Stan Furlong <stan@qconline.com>

If you provide an order summary page after a customer order and place on the page: "Print this page for your records" You should triple check that the customer can in fact print that final page and get what they see. Netscape Communicator re-fetches the page to format and print. That frequently results in either a "this page is expired" or some other inane error on the printed page. What's sad is that I see this more often on big store sites than on smaller web sites.

-- Submitted by Roxanne Reid-Bennett <rox@tara-lu.com>

One of the things that irks me in general is the lack of artistic endeavor that I find on the web. Designing pages is an art, and folks should try to remember that art is not a matter of copying what's already been done... The true artist try's to push the limits of the form, and his/her ability forward. This is a whole new artistic medium with no set rules. Its the first time in history that the viewer has a chance to change the content\context of what they see, yet I see very little true interactivity or artist endeavor. Lets see a little more thinking outside the box!

-- Submitted by Rick Welin <rwelin@telus.net>

Did you know that most browsers see the IMG HEIGHT and WIDTH attributes as they do the HEIGHT and WIDTH for tables, etc? This means that instead of specifying an absolute value, you can use a relative (percent) one. You can stretch your image to fill a variable-sized table cell, or to stretch a 2X2 image into a simple bar to fit the users screen resolution. This works best for simple, monocolor images.

-- Submitted by Todd L'Herrou <lherrou@pressroom.com>

More HWG Resources on Forms

• Online Course Introduction to HTML 4.0
• HWG Resources Collection: Forms and CGI