JavaScript & jQuery: The Missing Manual, 2nd Edition

Chapter 9. Enhancing Web Forms

Since the earliest days of the web, forms have made it possible for websites 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.

Figure 9-1. A basic form can include many different types of controls, including text fields, radio buttons, checkboxes, menu lists, submit buttons, and so on. For a complete rundown on HTML form fields and how to use them, visit ...