The Web Professional's Handbook: Document Object Models -WebReference.com- | 4

The Web Professional's Handbook: Document Object Models

The elements Object

When you access a form, you usually actually want to access one or more of its elements. In itself that's easy. Each form object has an elements[] array object as a property, which works in the same way as the forms[] array. Once again document.forms[0].elements is only an array – to actually access the element of your choice, you must specify it. For example, to access the input field named input1 in the first form, we can use any of these four references:

document.forms['firstform'].elements[0]
document.forms['firstform'].elements['input1']
document.forms[0].elements[0]
document.forms[0].elements['input1']

There are several types of form elements, and it's best to divide them into four groups:

The text fields (text, textarea, hidden, and file). You may want to read out the data the user has entered or write new text to these elements.
The checked elements (checkbox and radio). You may want to see if these are checked, or check/uncheck them yourself.
The buttons (button, reset, and submit). You rarely want to do anything with these.
The select element, which forms a group of its own. Each select box has one or more options. Select boxes have become powerful navigation tools and sometimes you want to change their options extensively.

These are some of the properties and methods of individual form element objects.

Property	Form Elements Applicable To	Read/write	Description
checked	Checked elements	read/write	Returns a Boolean that is true when the element is checked, and false when it isn't.
disabled	All elements, except hidden	read/write	Returns a Boolean. When set to true, the form field is disabled: the user cannot change anything. Supported by IE 4+, Netscape 6+, Opera 6+, iCab, and Konqueror.
form	All elements	read-only	Returns a reference to the form the element is a part of.
length	Select	read-only	Returns the number of options in the element
name	All elements	read-only	Accesses the name attribute of the element
selectedIndex	Select	read/write	Returns the index number of the currently selected option
type	All elements	read-only	Gives the type of the element. Its value is the same as the type attribute of the form field, except that: 1) <select> elements can be of two types: select-one (if attribute multiple is set to false) or select-multiple 2) A <textarea> element has type textarea
value	All elements	read/write. read-only for file upload fields	Accesses the value attribute of the element. If you set the content of a text element, it shows this value. Older browsers don't recognize the value of a select box.

Method	Form Elements Applicable To	Description
blur()	All elements, except hidden	Takes the focus away from the element.
click()	All elements except text	Simulates a mouse click on the element.
focus()	All elements, except hidden	Gives the element focus.
select()	Text elements, except hidden	Selects all text in the element.

Created: March 11, 2003
Revised: March 11, 2003

URL: http://webreference.com/programming/professional/chap6/1

The Web Professional's Handbook: Document Object Models -WebReference.com- | 4

The Web Professional's Handbook: Document Object Models

The elements Object

Find a programming school near you