JavaScript® Programmer's Reference

Chapter 14. Forms

One of the earliest uses for JavaScript was to improve the experience of web-based forms. In the early days of the web, when everyone had dialup and page loads took forever, the round-trip to the server to validate the contents of a form was a serious detriment. With JavaScript and the rudimentary DOM, it was possible to perform basic prevalidation on form contents, saving users considerable aggravation. With the addition of Dynamic HTML and of course Ajax, it's now possible to provide a feeling of live feedback, as though the data you're entering is processed on the fly and the form experience adjusted to match your inputs precisely.

Why does someone go to all this trouble? In a consumer world with low switching costs and short attention spans, the easier you can make forms like sign-up and checkout experiences for users, the more of them you'll be able to capture as they move through these steps. A key component of all this is understanding the extent to which you can control form behavior. That's what this chapter is all about. I'll begin by taking a detailed look at the Form object itself.

The Form Object

The Form object, known as an HTMLFormElement in DOM parlance, is the object representation of the HTML form object. If you've worked with HTML forms before, you'll recognize the HTML tag and many of its attributes:

<form id="signupForm" name="signupForm" action="signup.php" enctype="application/x-www-form-urlencoded" method="post" target="_self" > <!-- FORM CONTENTS ...