HTML and CSS Reference
In-Depth Information
EXAMPLE
11.6 (
CONTINUED
)
4 <
form name="form2" id="second_form
">
5 <input type="button" value="Press here">
6 </form>
<big>
7 <script type="text/javascript">
//
DOM Level 0
. How do we reference the form in JavaScript?
// Go down the document tree: window/document/form.property
// The window object can be left off, because it is at the top
document.write( "The first form is named: " +
8
window.document.forms["form1"].name
);
document.write( ".<br />The second form is named: " +
9
document.forms["form2"].name
);
document.write(".<br />Also can be referenced as: <em>" +
'document["form2"].name'
+".</em><br />");
document.write("Another way to reference a form: <em>" +
'document.form2.name'
+".</em><br />");
10 //
DOM Level 1.
The standardized W3C DOM way
document.write("<br />Using the id attribute to get the form \
name,<br />");
11
var f1 = document.getElementById("first_form")
;
// define variables
var f2 = document.getElementById("second_form");
12
document.write("The first form is named " + f1.name
+
".<br />");
document.write("The first form is named " + f2.name +
".<br />");
</script>
</big>
</body>
</html>
EXPLANATION
1
The
name
of the first HTML form in the document is
form1
. The
id
attribute is as-
signed
first_form
.
2
The input type for this form is a text field with a default value
“Name: ”
.
3
This tag ends the first form.
4
The name of the second form is
form2.
Its
id
is
second_form
.
5
The input type for this form is a button with the value
“Press here”
, which will ap-
pear as text in the button.
6
This tag ends the second form.
7
The JavaScript program starts here.
Continues
