Home arrow HTML arrow Page 3 - Good Form, Jack

Good Form, Jack

The face of the web is changing, but are we keeping up with it? Forms are the basic unit of functionality, turning simple-looking web pages into feature-packed applications. But are we making full use of forms, pulling their full potential for making our users happy? This article describes a number of ways to customize web forms, to the ultimate goal of making users forget that they're using a form!

Author Info:
By: Justin Cook
Rating: 4 stars4 stars4 stars4 stars4 stars / 20
May 12, 2004
  1. · Good Form, Jack
  2. · You Gotta Have Class
  3. · Getting a Little Fancy
  4. · Prevent Annoying Error Messages
  5. · Give Them a True GUI

print this article

Good Form, Jack - Getting a Little Fancy
(Page 3 of 5 )

A little trick that I have found to work nicely is to try imitating real life objects in your forms. Do you have a field that is strictly for currency? Why not try to mimic a receipt field, give it only one solid bottom line, so it doesn't feel like you're just typing into another box. Do you have a field where you sum up certain values and display the total? Why not mimic a standard accounting total field, with a single line at the top, and double lines at the bottom. You can do that with the following class:

.total {
border-width: 1px 0px;
border-top-style: solid;
border-bottom-style: double;

To come up with similar and perhaps better ways to enhance form fields, all you need to do is understand your users. Understand how they like to work, make changes in your design to reflect that understanding, and users will have no problems adapting to the use of your application.

Don't Expect Too Much

Something that people generally despise is being forced to do work where they shouldn't have to. People shouldn't have to know the product id of the item they want to buy, so don't expect them to. If you require some obscure and unique ID as an important variable in your application - whether it's a product, an employee, or anything else - don't expect them to manually input it. Give them a select menu of all possible items to choose from. When they choose the item they want, the ID can be determined behind the scenes, preferably in the value attribute of the selected option.

Though this may sound simple, it is very important. We as the developer may know that each item has an ID assigned to it, and we might even know a few IDs offhand. But if you have an edit screen that asks the user for the ID of the product they wish to modify, you will find that users simply do not care enough to know that information. And they will be annoyed by you asking them to. So just let them choose!

Now if you start getting into large lists, people will start to get annoyed yet again. After all, who wants to scroll for eternity for one item. So you have a few options to make their choosing experience much nicer.

The first method is a fun, 'suggest as you type' style of functionality you can add to your form. This will prevent the user from having to scroll at all. They just type in a few letters of what they're looking for, and our friend JavaScript helps them locate their desired item. You can find the tutorial for this here: http://www.devarticles.com/c/a/JavaScript/Suggest-As-You-Type/

The other user-friendly method is to break the list out into groups. Break products into categories (Electronics, Clothing, etc) or employees into divisions. You can then use JavaScript to automatically populate a second, more refined menu, with only the choices that belong to the option they've chosen from the first menu.

There are a few circumstances where this wouldn't apply, where the users need to be able to enter in unique IDs. One example is in an inventory application, where you should be able to type in a precise serial # to find a product. However for the most part, don't expect people to think too much, just give them choice.

blog comments powered by Disqus

- Does HTML5 Need a Main Element?
- Revisiting the HTML5 vs. Native Debate
- HTML5: Not for Phone Apps?
- HTML5 or Native?
- Job Hunting? Freelancer.com Lists This Quart...
- HTML5 in the News
- Report: HTML5 Mobile Performance Lags
- The Top HTML5 Audio Players
- Top HTML5 Video Tutorials
- HTML5: Reasons to Learn and Use It
- More of the Top Tutorials for HTML5 Forms
- MobileAppWizard Releases HTML5 App Builder
- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials