More and more I’m noticing a new trend in web-based forms.

The days of the <select> tag are numbered. The most recent example is GMail’s “More actions” drop-down.

It’s gone from this

to this

I completely understand why. Unavailable CSS styling and <select> bugs in IE have always been frustrating, but the real motivation to move away from the tag has been its lack of features.

With a JavaScript/DHTML solution you can simply do so much more. In December 2004 when Google released “Google Suggest” (which is an auto-complete-like drop-down of the search field) many developers started to consider abandoning <select> tags. Add to that the flexibility of cross-browser styling, adding images to drop-downs and dramatic visual effects… The end is near.

However, I’m not suggesting the end of the tag’s use. Using a <select> tag gives the browser the responsibility to make the form accessible to vision and mobility-impaired people which is often overlooked in a small project or web-based application.

We’ve all seen web applications that require the user to do a repetitive task. Unfortunately, programmers often ignore how unnatural it is to go through a multitude of form fields, how unclean the design looks, and how hard-coding the number of elements one can enter at a single time limits the use of your application. Stick with keeping it simple, and keeping it simple means keeping things clean and intuitive. (more…)

Form validation is vital to every web based application, and too often I’ve seen it implemented page-by-page. Custom code blocks to check for email address formats, telephone numbers, social security numbers, etc.

If you need client-side form validation and you can rely on javascript, I highly recommend Andrew Tetlaw’s “Really easy field validation.” It does require prototype.js and of course, java script enabled browsing.

I’ve written a few additional validators that I’ll post sometime soon for anyone that might be interested.