Home arrow HTML arrow Page 5 - 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 - Give Them a True GUI
(Page 5 of 5 )

Why is Windows so popular? Why do people love the quick-launch bar? Why are you more likely to click the little 'save' button on the toolbar than click File > Save? You may say speed is the reason, but the speed is attained through the GUI. The mind associates a graphic with the function you wish to perform, and the eyes can easily and quickly locate that graphic for your mouse to click on.

Use this knowledge to the benefit of the ergonomics of your application. Instead of providing a standard button that says “save”, provide the image of a disk. Instead of a button that says “delete”, use the standard 'X'; it's what people are accustomed to seeing. You can make these images come alive with a little JavaScript. Here's a self-explanatory example:

<form name="form1">
<input type="hidden" name="_action" />
<img src="/img/save.gif" onclick="document.form1._action.value=
'save';document.form1.submit()" />

Now this is already much prettier than a plain old button. However, people might not intuitively know to click on the image, because they're not used to just clicking on plain old images on the web. They're used to clicking buttons, and links. So really all we have to do is make them think they're looking at a link. The following class will change the cursor to a hand, and works in multiple browsers:

.flink {

cursor: pointer;

cursor: hand;


Just in case CSS2 isn't available to their browser, or just doesn't render properly, always explain in detail that they can click on the image and what will happen. You can do that with the 'title' attribute. So our polished image code will look like this:

<img src="/img/save.gif" class="flink" title="Click here to save!"
form1.submit()" />

I absolutely guarantee that users will enjoy a comfortable GUI interface to perform the tasks that they have to within their forms. If you know the operating system or office suite most commonly used by the user(s), try to imitate the look and feel somewhat, to ensure a smooth transition into the environment you've created.


The techniques I explained in this article are not hard and fast rules. They are the results of years of feedback, both positive and negative. No doubt as you receive criticism from people, you will find creative ways to make your forms more user-friendly. Feel free to fire me an email, or post your suggestion to the forum!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials