Inside Technique : Creating 2D Forms : Creating a 2D Form

Our original goal was to create a form where each input element is independently positioned. The correct approach as defined by HTML and CSS would be to position each input element directly as follows:

<FORM>
  <INPUT TYPE="text" STYLE="position: absolute; top: 10pt">
  <INPUT TYPE="text" STYLE="position: absolute; top: 20pt">
</FORM>

Unfortunately, this approach only works in Internet Explorer 4.0. We need to find a way to position the form elements in Netscape that fit into our two rules: Every input element must be inside of a form, and every positioned element must be a self-contained document. To meet these rules we need to modify the above HTML as follows:

<DIV STYLE="position: absolute; top: 10pt">
  <FORM>
    <INPUT TYPE="text">
  </FORM>
</DIV>
<DIV STYLE="position: absolute; top: 20pt">
  <FORM>
    <INPUT TYPE="text">
  </FORM>
</DIV>

The above meets our rules for Netscape and independently positions the two input elements. But now we have a new issue. The input elements are no longer grouped together for a single submission. Not only are they in separate forms, but in Netscape's model, they are in separate documents.

To solve this problem, we use a little bit of scripting wizardry. First, we switch from using DIV elements to positioning TABLE elements. This change has no effect on the scripting model but solves an issue with overlapping elements. If you position an element without a WIDTH, the width in Internet Explorer defaults to the width of the document. You can run into issues where elements end up underneath other elements becoming unselectable. Using a table ensures that the width is automatically calculated to match the width of the contents. This approach works the same in both browsers:

<TABLE STYLE="position: absolute; top: 10pt"><TR>&l;TD>
  <FORM NAME="userInfo" ONSUBMIT="return false">
    User Name: <INPUT TYPE="text" NAME="userName">
  </FORM>
</TD></TR></TABLE>
<TABLE STYLE="position: absolute; top: 20pt"><TR>&l;TD>
  <FORM NAME="userInfo" ONSUBMIT="return false">
    Address: <INPUT TYPE="text" NAME="address">
  </FORM>
</TD></TR></TABLE>

We also made a few additional changes. Notice that we added a name to each form. We are going to share the same name to group all related forms together. Notice that we did not create a submit button yet. Instead, we added a small onsubmit handler to each form that prevents the form from submitting. We are going to create a an additional form on the page that packages the input information from the other forms and submits it to the server.

<FORM NAME="userInfo">
  <INPUT TYPE="submit" ONSUBMIT="processSubmit(this)">
  <INPUT TYPE="hidden" NAME="userName">  
  <INPUT TYPE="hidden" NAME="address">
</FORM>

Again, this form has the same name as the other forms. In addition, hidden fields are defined that have the same name as an input control on one of the other forms. On this form, instead of canceling the submission, a function is called to locate the other input fields on the page and copy their values to the hidden fields. Once this is complete all the data is submitted to the server.

Internet Explorer 4.0 and Netscape Navigator 4.0 users can fully experience the demonstration. Downlevel browsers can also view the demo, but the elements will not be positioned.

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