sloppy form alignment, what's the best css fix?

[jhardman]

I recently answered a post in the asp forum where a newbie had trouble accessing his form data. I chastised him for his sloppy coding and told him to validate his code (his form and input tags were so sloppy there was no way any data was sent to the asp). But I have a question about how he had formatted his form.

He essentially had a two-column table, the first column listed the name of the input field and the second column held the actual form inputs. The big problem was that he didn't actually use a table, he used line breaks and long strings of spaces to align the form inputs and labels how he wanted:
[HTML]name:         &n bsp;   
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" name="name"><br><br>
title: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&n bsp;&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input type="text" name="title"><br><br>etc.[/HTML] Now there is no reason I need to go into the problems with formatting in this way, I think we all groan when we see this. The question I have is this: If I was making this same form I would use a real table, but w3c seems to say that this is about as bad. W3C says tables should be reserved for tabular data. Is a form close enough to tabular data that it can be used for this without angering the purists? And if not, is there a simple method of sequential divs that would be as easy to manipulate and set up as a bare-bones table? Would that be simple enough for a coding minimalist like me to do quickly and without hassle?

Jared

[ConanTheVegetarian]

The CSS would look a bit like this:

    <style>
      #myForm dl {
        line-height : 2em;
        padding: 0;
      }
      #myForm dl dt {
        text-align: right;
        float: left;
        clear : both;
        width : 33%;
      }
 
      #myForm dl dd
      {
         float : left;
         width : 66%;
         margin: 0 0 0 0.25em;
      }
 
      .alert {
        color : red;
      }
 
      #registration {
        border : solid 1px #ccc;
      }
    </style>
 

and the form would look a bit like this:

    <div id="registration">
      <form name="form" id="myForm" method="post" action="">
        <dl>
          <dt>
            <label for="title"><span class="alert">*</span> Title:</label>
          </dt>
          <dd>
            <input type="Text" name="title" id="title" size="10" maxlength="30" value="">
          </dd>
        </dl>
        <dl>
          <dt>
            <label for="initials"><span class="alert">*</span> Initials:</label>
          </dt>
          <dd>
            <input type="Text" name="initials" id="initials" size="10" maxlength="10" value="">
          </dd>
        </dl>
        <dl>
          <dt>
            <label for="firstName"><span class="alert">*</span> First name:</label>
          </dt>
          <dd>
            <input type="Text" name="firstName" id="firstName" size="24" maxlength="40" value="">
          </dd>
        </dl>
 
        <dl>
          <dt>
            <label for="surname"><span class="alert">*</span> Surname:</label>
          </dt>
          <dd>
            <input type="Text" name="surname" id="surname" size="24" maxlength="40" value="">
          </dd>
        </dl>
 
        <dl>
          <dt>&nbsp;</dt>
          <dd>
            <input type="Submit" value="Submit">
            <input type="Reset" value="Reset">
          </dd>
        </dl>
      </form>
      <br style="clear : both">
    </div>

[drhowarddrfine]

I don't see any reason to use a table for that type of input. It's easy enough using forms and <fieldset> with css to make a nice layout. The guy obviously doesn't know css or he could have just used margins and padding to create space between elements.

[jhardman]

The CSS would look a bit like this:

    <style>
      #myForm dl {
        line-height : 2em;
        padding: 0;
      }
      #myForm dl dt {
        text-align: right;
        float: left;
        clear : both;
        width : 33%;
      }
 
      #myForm dl dd
      {
         float : left;
         width : 66%;
         margin: 0 0 0 0.25em;
      }
 
      .alert {
        color : red;
      }
 
      #registration {
        border : solid 1px #ccc;
      }
    </style>
 

Wow, I'd never thought of using a dictionary list like that. I don't see any code that would put the label to the left of the input, I thought this would put the input below the label until I tried it. What part of the code does that?

Jared

[jhardman]

I don't see any reason to use a table for that type of input. It's easy enough using forms and <fieldset> with css to make a nice layout. The guy obviously doesn't know css or he could have just used margins and padding to create space between elements.

I've never fieldsets, (I say with chagrine). It looks like I need to brush up some. Thanks for the suggestion.

Jared

[drhowarddrfine]

Fieldsets are nothing big deal. They just help keep different parts of a form more organized.

[AricC]

Jared,
The <dl> tag is for a definition list. I agree with Doc above Fieldsets are seldom used but can do a great job organizing forms etc... You can even style them so they don't look generic.

HTH,
Aric

[jhardman]

I like it. This is what I tried:
[HTML]<style>
<!--
label {
color: black;
position: relative;
left: 40px;
}

input {
position: absolute;
top: inherit;
left: 220px;
}

fieldset {
border: 0px;
padding: 5px;
}

-->
</style>[/HTML]

Is this llike what you would have done?

Jared