HTML and CSS Reference
In-Depth Information
EXPLANATION
1
The HTML form starts here. It is named
myform
. JavaScript can now reference the
form by its name.
2
The input type is a button named
button1
and assigned a value of
red
. JavaScript
can now reference the button by its name. The
id
attribute will not be used in this
example. It is here because it is common to use both a
name
and
id
for the form
and its elements. The
id
gives JavaScript another way to get access to the object,
which will be covered in detail in later chapters.
3
The input type is a button named
button2
and assigned a value of
blue
.
4
The form ends here.
5
Within the JavaScript program the form is referenced by its name. It is a property
of the
document
object. Without naming the form, it would be referenced as
doc-
ument.forms[0].name.
6
The name assigned to the first button is displayed. Putting the name as a string in
square brackets (associative array) is a common approach to naming forms and
their elements. Without naming the form or the button, it would be referenced as
document.forms[0].elements[0].value
. It is easy to make typos here. Spelling
my-
form.name
as
myform1.name
causes the output to be
myform1 is undefined
. See Fig-
ures 11.14 and 11.15.
7
Using the associative array notation, the name for the form is a string inserted in
the first set of brackets, and the second element, a string name for
button1
is in-
serted in the second set of square brackets. We use the dot notation to retrieve the
value of the
type
property for the form's button.
8
Using the two-dimensional associative array notation, we retrieve the value that
was assigned to
button1
, which is
red
.
Figure 11.14
Name that button!
