JavaScript: The Definitive Guide

Previous Chapter 21
JavaScript Reference
Next
 

Element Object

Name

Element Object---a form element

Availability

Navigator 2.0, Internet Explorer 3.0; enhanced in Navigator 3.0

Synopsis

form.elements[i]
form.name

Properties

checked

A read/write Boolean that indicates the selection state of form elements that can appear "checked" or "unchecked."

defaultChecked

A read-only Boolean that specifies the default state of a form element that can be "checked." This value is specified by the CHECKED attribute of the HTML tag that creates the element, and its value is used when the form is reset.

defaultValue

A read-only string that specifies the default value for a form element. For elements that display text, this property specifies the initial value displayed, and the value displayed after the form is reset. This property corresponds to the HTML VALUE attributed.

form

A read-only reference to the Form object that contains this element.

length

For the Select form element, this property specifies the number of options or choices (each represented by an Option object) that are contained within the options[] array of the element.

name

A read-only string, specified by the HTML NAME attribute, that specifies the name of this element. This name may be used to refer to the element, as shown in the synopsis above.

options[]

For the Select form element, this array contains Option objects that represent the options or choices displayed by the Select object. The number of elements in the array is specified by the length property of the Select element.

selectedIndex

For the Select form element, this integer specifies which of the options displayed by the Select object is currently selected. In Navigator 3.0, this property is read/write. In Navigator 2.0 and Internet Explorer 3.0, it is read-only.

type

A read-only string property, available in Navigator 3.0, that specifies the type of the form element.

value

A string property that specifies the value to be sent to the server for this element when the form that contains it is submitted.

Methods

blur()

Remove keyboard focus from the element.

click()

Simulate a mouse-click on the form element.

focus()

Give keyboard focus to the element.

select()

For form elements that display editable text, select the text that appears in the element.

Event Handlers

onblur()

Invoked when the user takes keyboard focus away from the element.

onchange()

For form elements that are not buttons, this event handler is invoked when the user enters or selects a new value.

onclick()

For form elements that are buttons, this event handler is invoked when the user clicks or selects the button.

onfocus()

Invoked when the user gives keyboard focus to the element.

Description

Form elements are stored in the elements[] array of the Form object. The contents of this array are Element objects, which represent the individual buttons, input fields and other controls that appear within the form. Strictly speaking, all elements within a form are represented by Element objects. It is often more convenient, however, to consider these object to have the type of the form element they represent. Thus, in this book we often refer to Button objects, Text objects, Select objects, and so on. This reference page describes the general behavior of form elements. Specific behaviors for form elements are described on their own pages.

The Element object defines quite a few properties, methods, and event handlers, but not all of them are functional for each type of form element. For example, the Button object triggers the onclick() event handler, but not the onchange() handler, while the Text object triggers onchange() but not onclick(). The following figure shows all of the form elements and the properties associated with them.

Figure 21.1: Form elements and their available properties

[Graphic: Figure 21-1]

In general, there are two broad categories of form elements. The first is the buttons: Button, Checkbox, Radio, Reset, and Submit. These elements have an onclick() event handler, but not an onchange() handler. Similarly, they respond to the click() method but not the select() method. The second category are those elements that display text: Text, Textarea, Password and FileUpload. These elements have an onchange() event handler rather than an onclick() handler, and respond to the select() method but not the click() method.

The Select and Hidden elements are special, and do not fall into either of the above two categories. The Select element uses several properties of the Element object not used by any other objects, and, surprisingly does not use the value property--values for this object are supplied by the Option objects it contains. Finally, the Hidden element has no on-screen representation, so it does not have any event handlers nor does it respond to any methods.

Bugs

Unfortunately, the behavior of form elements varies on different platforms, at least in Navigator 2.0 and Navigator 3.0 (Internet Explorer 3.0 only runs on one platform). On Unix platforms, which run the X11 window system, only the text-entry form elements participate in keyboard navigation, and so the button elements and the Select element do not respond to the blur() and focus() methods nor do they invoke the onblur() and onfocus() event handler. Also, on Unix systems, the Text element is the only one that responds to the select() method. On Windows platforms, on the other hand, all form elements are fully "wired in," and they all respond as noted in the table.

See Also

"Button", "Checkbox", "FileUpload", "Form", "Hidden", "Password", "Radio", "Reset", "Select", "Submit", "Text", "Textarea"


Previous Home Next
Document.writeln() Book Index Element.blur()

HTML: The Definitive Guide CGI Programming JavaScript: The Definitive Guide Programming Perl WebMaster in a Nutshell