Inside Technique : Creating 2D Forms : CSS-P and DHTML

Since Internet Explorer 4.0 has separated the presentation from content, the object model for manipulating elements is very straightforward. Every element in the document is always accessible, regardless of any of its CSS properties. Therefore, the DIV element and its contents are always programmable the same way regardless of whether the DIV is positioned.

In Netscape, the programming model changes significantly when you position elements. The first difference is Netscape only allows access to a very small number of elements on the page. For example, before the DIV was positioned, there was no way to program the element. When the DIV element became positioned, it became programmable, not as a DIV element, but as a document container.

To demonstrate, imagine the following HTML document that contains 2 forms:

<FORM NAME=form1>
   <INPUT TYPE="button" VALUE="Sample Button">
</FORM>
<DIV STYLE="position: absolute; left: 100pt">
  <FORM NAME=form2>
    Button: <INPUT TYPE="button" VALUE="Sample Button">
  </FORM>
</DIV>

Looking at that document, it clearly contains 2 forms. Both Internet Explorer and Netscape Navigator expose a forms collection representing all the forms in the document. In Explorer, the forms collection contains 2 forms, form1 and form2. In Netscape Navigator 4.0, the forms collection only contains 1 form, form1. This is because the second form is contained within a positioned DIV. The second form is actually exposed in a separate forms collection that is available through the positioned element.

To further complicate matters, prior to the 4.0 browsers, both Netscape and Explorer would return 2 forms in the forms collection. This is because the style information is correctly ignored and both forms are recognized by the browser.

Below are a few code fragments to demonstrate the object model differences:

  // IE3, NS3, IE4
  document.forms.length  // 2
  document.forms["form2"].length // 1

  // NS4
  document.forms.length // 1
  document.forms["form2"].length // error does not exist
  // Instead to access form2:
  document.layers[0].document.forms["form2"] // 

In Navigator 4.0, the positioned element is added to the layers collection, and a new document is exposed. This requires you to navigate through the hierarchy of positioned elements to locate their contents. If you were to later remove the positioning information from the DIV, the layer object is not created, and the form would be accessible through the top-level document (just like IE3, NS3, and IE4). Therefore, care needs to be taken when modifying documents that have script and positioned elements. In Explorer 4.0, the style does not change the model for accessing elements, so this is not an issue.

Next, we return to our ultimate goal, creating a 2D input form.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.