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!
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:
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.
HTML 
/ 20 
