Apparently, form elements of type
<input type="image" src="...>
are not included in the form's elements[] collection.
I don't understand why not; according to DOM2, all form control
elements in the form are part of the elements collection. Further,
this element doesn't appear in the (DOM0) document.images
collection either; so it's really not well-accounted for.
And, to the contrary, the <input type="image"> element *does* have
a 'form' property, whose value is its parent form. This seems
completely wrong: if you count the nodes in form.elements, it
really should be equal to the number of nodes that reference
the form element in their form property.
Is there an explanation for this, or was this behavior chosen
strictly to mimic Internet Explorer's behavior? Or, am I doing
something wrong?
Thanks,
hj
Illustration:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!-- This behavior doesn't seem to be affected if I
omit the DTD, to fall back to quirks mode -->
<html><head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Img form elements</title>
<script type="text/javascript">
function ecount(f) {
var collection,i,node;
alert(f.elements.length + " elements in form, and \n" +
document.images.length + " images in document.images");
collection = f.getElementsByTagName('*');
alert(collection.length + " descendant nodes in form");
for (i=0; i<collection.length; i++) {
node = collection[i];
alert("Form descendant node: '" + node.nodeName +
"'.form='" + node.form + "'");
}
return false;
}
</script></head><body>
<h1>Img form elements</h1>
<div>
<form action="" onsubmit="return ecount(this)">
<p>There are 2 elements in this form:<br><br>
<input type="text">: <input type="text" name="txt" onblur="ecount(this.form)"><br>
and <input type="image">: <input type="image" src="../images/awki.png">
</p><p>
Click the image, or blur() the text input to count fields in the
form's elements array.</p>
</form></div>
</body></html>
