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 / 18
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

TOOLS YOU CAN USE

advertisement
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

- HTML5 Boilerplate: Working with jQuery and M...
- HTML5 Boilerplate Introduction
- New API Platform for HTML5
- BBC Adopts HTML 5, Mozilla Addresses Issues
- Advanced Sticky Footers in HTML and CSS
- HTML and CSS Sticky Footers
- Strategy Analytics Predicts HTML5 Phones to ...
- HTML5 Guidelines for Web Developers
- Learning HTML5 Game Programming
- More Engaging CSS3 and HTML Background Effec...
- Engaging HTML and CSS3 Background Effects
- More Web Columns with CSS3 and HTML
- Columns with CSS3 and HTML
- Creating Inline-Block HTML Elements with CSS
- Drag and Drop in HTML5: Parsing Local Files

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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