Home arrow HTML arrow DHTML Form Enhancement

DHTML Form Enhancement

There are few tools to speed up form development. This article illustrates simple ways to provide some basic enhancements to your web application's forms such as validation, automatic submission, and hilighting of the field in focus.

Author Info:
By: David Fells
Rating: 4 stars4 stars4 stars4 stars4 stars / 40
June 21, 2004
  1. · DHTML Form Enhancement
  2. · Visual Appeal
  3. · Extensible Validation
  4. · Regex Validation and Equality Checking
  5. · Extending the validate function

print this article

DHTML Form Enhancement
(Page 1 of 5 )


Something that all of us have done once if not a thousand times is website form processing. For those of us who prefer not to use .NET generated JScript for our forms, there are few tools available to speed up form development. This typically means coming up with your own somewhat generic server-side form processing tools and quite possibly no tools for clientside form development. According to the latest stats, 92% of Internet users have scripting enabled in their browsers. This means you still need to validate data on the serverside, but the user experience can greatly be enhanced by providing validation and other enhancements to the form.

It is implied that a form will be styled. Default form field style is quite unattractive and most always calls for some enhancement. The first thing we will discuss is simply making a form look nice. You should take a moment to consider the data that will be entered and fields and set their size attribute accordingly. Let's just take simple CSS like this:

select, input, textarea {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 10px;
 background-color: #FFCF21;
 border: 1px solid #292C31;
select.selected, input.selected, textarea.selected {
 background-color: #FFFFFF;

You should also take advantage of the maxlength attribute to prevent users from putting too much data in a form. This will save some time with clientside validation. You should order the fields in as meaningful a way as possible with the fields organized in the form area neatly. With these things in mind, we will move on to some scripting.

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