JavaScript: The Missing Manual

Chapter 9. Enhancing Web Forms

Since the earliest days of the Web, forms have made it possible for Web sites to collect information from their visitors. Forms can gather email addresses for a newsletter, collect shipping information to complete an online sale, or simply receive visitor feedback. Forms also require your site’s visitors to think: read labels, type information, make selections, and so on. Since some sites depend entirely on receiving form data—Amazon wouldn’t be in business long if people couldn’t use forms to order books—Web designers need to know how to make their forms as easy to use as possible. Fortunately, JavaScript’s ability to inject interactivity into forms can help you build forms that are easier to use and ensure more accurate visitor responses.

Understanding Forms

HTML provides a variety of tags to build a Web form like the one pictured in Figure 9-1. The most important tag is the <form> tag, which defines the beginning (the opening <form> tag) and the end (the closing </form> tag) of the form. It also indicates what type of method the form uses to send data (post or get), and specifies where on the Web the form data should be sent.

You create the actual form controls—the buttons, text fields, and menus—using either the <input>, <textarea>, or <select> tags. Most of the form elements use the <input> tag. For example, text fields, password fields, radio buttons, checkboxes, and submit buttons all share the <input> tag, and you specify which ...