HTML and CSS Reference
In-Depth Information
When going down the DOM hierarchy,
document.forms[0].elements[0]
refers to the
first field in the first form. The
element
objects also contains properties, such as the
name
,
type
, and
value
of the field. For example,
document.forms[0].elements[0].name
ref-
erences the name of the field and
document.forms[0].elements[0].type
references the type
of the field, such as
submit, reset, button, text, radio,
or
checkbox
.
If you name the field or input types, those names can be used to reference the corre-
sponding JavaScript object. For example,
document.forms[“myform1”].elements[“your-
name”].value
is easier to decipher than
document.forms[0].elements[0].value,
although
they reference the same field value. Furthermore if the forms on the page are reordered,
using the name of the form element as an associative array value makes it easier to move
the object by name rather than by resetting the index values. When you start using DOM
1 and 2 in Chapter 15 the form and its elements can be assigned an
id
attribute. The
id
attribute must be unique for each element. It is used with the
getElementById()
method
to retrieve a reference to the form or its fields, and in fact it can be used to retrieve any
other element on the page as well.
The following example contains two forms, each containing input types. The name
of the first form is
form1
and the name of the second form is
form2
. Each form is an ele-
ment of the
forms[]
array.
Properties and Methods
EXAMPLE
11.5
(Two Forms)
<form name="form1"
id="form1">
<input type="text"
name="yourname"
: Type your name here /><br />
<input type="button"
name="button1"
id="button1"
value="Push Button" />
</form>
<form name="form2"
id="form2">
<input type="radio"
name="veggie"
id="veggie1"
value="bean" />Beans
<input type="radio"
name="veggie"
id="veggie2"
value="carrot"/>Carrots
</form>
Continues
