Home arrow HTML arrow Page 4 - Good Form, Jack
HTML

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Good Form, Jack - Prevent Annoying Error Messages
(Page 4 of 5 )

You and I spend a good deal of time ensuring that people have entered the proper data types into the fields of a form. In fact, we even think of pleasant error messages, such as: “Excuse me Sir/Madam, you seem to have entered an incorrect date. Please be so kind as to enter the date in this format...” You see, we know that we need the date to be entered as DD/MM/YYYY, and we've prevented any programming errors by telling them so politely. But it will still be bothersome for the user to now go back, and change the field from "tomorrow" to the proper format.

So how do we ensure that they're typing in data as we need it, before they even try to submit the form? Well, if you want, you could always just stand behind them and watch over their shoulder, even slap their hands if they mistype. You can call me crazy, but I'd much prefer a programmatic solution.

In the case of date fields, it's very simple to ensure proper input. You just don't let them type anything in! It's that simple, you just add the readonly attribute to the input field. Of course they need some method to enter the date, which we provide ever so graciously with a JavaScript calendar. The reason for this is that you can configure in your code exactly how you want the date to be entered, and the calendar will consistently comply. Instead of wasting time creating your own calendar, you can download this slick tool: http://www.softcomplex.com/products/tigra_calendar/

Another area you would want to monitor input is with number fields. Whether currency, phone numbers, whatever, all you want in that field are the integers between 0-9, and maybe a period. You can find a quick tool to limit the input to integers here: http://www.devarticles.com/c/a/JavaScript/Universal-Form-Validation/3/


blog comments powered by Disqus
HTML ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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