Complex HTML Form without Tables

Home › Knowledge Builder: HTML Forms Without Tables

Sun, 31/08/2008 - 20:41 — horuskol

I came up with this solution about a month ago, and have since been implementing it into new site designs.

To tie up the extra information related to each input, I'm going to recruit the oft-overlooked <dl></dl> element.

The definition list is a handy way to link details with another element. The way it works is that in the list, there are one or more definition terms (<dt></dt>), each having one or more definitions (<dd></dd>) after them. Using the relationships of this set of elements, we can link the comments about the inputs more easily:

CSS:

form dl,
form dt,
form dd {
  padding: 2px 0px;
  margin: 0px;
}
 
form dt {
  float: left;
  width: 125px;
}
form dd {
  margin-left: 125px;
}
 
form .buttons {
  padding: 2px 0px 2px 125px;
}
 
form .even {
  background-color: #ccc;
}

HTML:

</p><form method="post">
  <dl class="odd">
    <dt><label for="reg_username">Username: </label></dt>
    <dd><input id="reg_username" name="reg_username" type="text" /></dd>
    <dd class="note">This is the name which you will use to access the application</dd>
  </dl>
 
  <dl class="even">
    <dt><label for="reg_screenname">Screen-name: </label></dt>
    <dd><input id="reg_screenname" name="reg_screenname" type="text" /></dd>
    <dd class="note">This is the name which will be displayed to other users</dd>
    <dd class="note">If you leave this blank, then your username will be shown instead</dd>
  </dl>
 
  <dl class="odd">
    <dt><label for="reg_password">Password: </label></dt>
    <dd><input id="reg_password" name="reg_password" type="password" /></dd>
    <dd class="note">Passwords must be more than 6 characters long</dd>
  </dl>
 
  <p class="even buttons">
    <button>Register</button>
    <button>Cancel</button>
  </p>
</form><p>

There maybe a little more markup now because of the lists, but we have now inextricably linked the extra information about each input to the relevant input.

Of course, how any browser uses this semantic link is beyond the control of the site developer, but this form will display nicely in any browser now, and not a single table in sight.

complex registration form without tables