HTML and CSS Reference
In-Depth Information
EXAMPLE
11.17 (
CONTINUED
)
<br />
<font face=arial>
<big>
<script type="text/javascript">
//
How do we reference the form's text field in JavaScript?
//
Go down the document tree: document.form[].element.property
document.write( "The type of the input device is:<em> "+
5
document.form1.namefield.type);
// document.write( "The type of the input device is:<em> "+
6
//
document["form1"]["namefield"].type)
;
document.write( "<br /></em>The textbox is named:<em> "+
document.form1.namefield.name
);
document.write("<br /></em>The value in the text field is:<em>"
+
document.form1.namefield.value
);
document.write("<br /></em>The size of the text field is:<em>"
+
document.form1.namefield.size
);
//
Using the id attribute of the element
var tfield=document.getElementById("namefield");
document.write("<br />The id of the textbox is "+
tfield.id
);
document.write("<br />The name of the textbox is "+
tfield.name
+"<br />");
</script>
</big>
</font>
</body>
<html>
EXPLANATION
1
The form starts here in the body of the document.
2
The input type is a textbox, named
namefield
with a default value
“Name: ”
.
3
When the mouse cursor is clicked in this box, the
onFocus
event is triggered and
the
select()
method causes the value in the textbox to be highlighted.
4
Instead of using the long, drawn-out, DOM hierarchy, the
this
makes it easier to
reference this input type.
5
The property for the textbox, named
namefield
, is accessed using the DOM hier-
archy. The output is shown in Figure 11.26.
6
An alternate way to access the property of the textbox is to shed the array format,
in this case a two-dimensional associative array.
