How to code this form?

Question

Im trying to get away from using the html TABLE tag, but cant figure out how to build, what I want it to look like. I have made a screenshot of me using the table tag, How would I do this with divs or/and spans etc, and still retain the vertical alignment of the labels (firstname, lastname in this example)?
(font size and color etc is of course irrelevant here)
alt text http://img522.imageshack.us/img522/7857/forme.jpg

thankful for any input,
modano

Answer 1

It's good that you don't want to use the table tag for layout. The thing to keep in mind when switching is to try to make the HTML as semantical as possible. What this means might vary, since there are no real strict rules, but it could look something along these lines:

<form [..]>
   <ul>
      <li class="hasError">
         <em class="feedback">error message here</em>
         <div class="attribute">
            <label for="firstName">First name:</label>
            <em>(required)</em>
         </div>
         <div class="input">
            <input type="text" name="firstName" id="firstName" />
            <em class="description">optional description here</em>
         </div>
         <span class="clearBoth" />
      </li>
      <li>
         <em class="feedback" />
         <div class="attribute">
            <label for="firstName">Last name:</label>
            <em>(required)</em>
         </div>
         <div class="input">
            <input type="text" name="lastName" id="firstName" />
            <em class="description">optional description here</em>
         </div>
         <span class="clearBoth" />
      </li>
   </ul>
</form>

This achieves the following:

• By placing the error feedback message above the divs, you can make an arbitrarily long error message without losing alignment
• Each input element (and label) is kept in a single list item, thus grouping them logically. It also reads something like the following in a screen reader: "Form. List of two items. Label [...]". This gives the user a hint of that the form contains two inputs.
• By adding the hasError class to a list item, you can easily target the descendant elements with CSS for error specific styling.

A sample CSS file could look something like (note that this is untested):

form li {
    width: 300px;
}
form li.hasErrors {
    width: 298px;
    border: 1px red;
    background-color: #C55;
}
form .attribute {
    float: left;
    clear: left;
    width: 60px;
}
form .input {
    float: right;
    clear: none;
    width: 240px;
}
form .feedback {
    display: block;
    padding-left: 50px;
    color: red;
}
form .description {
    display: block;
    clear: both;
    color: #888;
}
.clearBoth { display: block; clear: both; }