JavaScript: The Definitive Guide, Fourth Edition

Defining Form Elements

HTML form elements are the primitive objects with which we create graphical user interfaces for our JavaScript programs. Figure 15-1 shows a complex form that contains at least one of each of the basic form elements. In case you are not already familiar with HTML form elements, the figure includes a numbered key identifying each type of element. We’ll conclude this section with an example (Example 15-1) that shows the HTML and JavaScript code used to create the form pictured in Figure 15-1 and to hook up event handlers to each of the form elements.

Figure 15-1. HTML form elements

Table 15-1 lists the types of form elements that are available to HTML designers and JavaScript programmers. The first column of the table names the type of form element, the second column shows the HTML tags that are used to define elements of that type, and the third column lists the value of the type property for each type of element. As we’ve seen, each Form object has an elements[] array that contains the objects that represent the form’s elements. Each of these elements has a type property that can be used to distinguish one type of element from another. By examining the type property of an unknown form element, JavaScript code can determine the type of the element and figure out what it can do with that element. (We’ll see this done in Example 15-2, at the end of the chapter.) ...