By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,767 Members | 1,255 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,767 IT Pros & Developers. It's quick & easy.

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

jhardman
Expert 2.5K+
P: 3,405
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
Mar 14 '07 #1
Share this Question
Share on Google+
7 Replies


P: 24
The CSS would look a bit like this:
Expand|Select|Wrap|Line Numbers
  1.     <style>
  2.       #myForm dl {
  3.         line-height : 2em;
  4.         padding: 0;
  5.       }
  6.       #myForm dl dt {
  7.         text-align: right;
  8.         float: left;
  9.         clear : both;
  10.         width : 33%;
  11.       }
  12.  
  13.       #myForm dl dd
  14.       {
  15.          float : left;
  16.          width : 66%;
  17.          margin: 0 0 0 0.25em;
  18.       }
  19.  
  20.       .alert {
  21.         color : red;
  22.       }
  23.  
  24.       #registration {
  25.         border : solid 1px #ccc;
  26.       }
  27.     </style>
  28.  
and the form would look a bit like this:

Expand|Select|Wrap|Line Numbers
  1.     <div id="registration">
  2.       <form name="form" id="myForm" method="post" action="">
  3.         <dl>
  4.           <dt>
  5.             <label for="title"><span class="alert">*</span> Title:</label>
  6.           </dt>
  7.           <dd>
  8.             <input type="Text" name="title" id="title" size="10" maxlength="30" value="">
  9.           </dd>
  10.         </dl>
  11.         <dl>
  12.           <dt>
  13.             <label for="initials"><span class="alert">*</span> Initials:</label>
  14.           </dt>
  15.           <dd>
  16.             <input type="Text" name="initials" id="initials" size="10" maxlength="10" value="">
  17.           </dd>
  18.         </dl>
  19.         <dl>
  20.           <dt>
  21.             <label for="firstName"><span class="alert">*</span> First name:</label>
  22.           </dt>
  23.           <dd>
  24.             <input type="Text" name="firstName" id="firstName" size="24" maxlength="40" value="">
  25.           </dd>
  26.         </dl>
  27.  
  28.         <dl>
  29.           <dt>
  30.             <label for="surname"><span class="alert">*</span> Surname:</label>
  31.           </dt>
  32.           <dd>
  33.             <input type="Text" name="surname" id="surname" size="24" maxlength="40" value="">
  34.           </dd>
  35.         </dl>
  36.  
  37.         <dl>
  38.           <dt>&nbsp;</dt>
  39.           <dd>
  40.             <input type="Submit" value="Submit">
  41.             <input type="Reset" value="Reset">
  42.           </dd>
  43.         </dl>
  44.       </form>
  45.       <br style="clear : both">
  46.     </div>
Mar 14 '07 #2

drhowarddrfine
Expert 5K+
P: 7,435
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.
Mar 14 '07 #3

jhardman
Expert 2.5K+
P: 3,405
The CSS would look a bit like this:
Expand|Select|Wrap|Line Numbers
  1.     <style>
  2.       #myForm dl {
  3.         line-height : 2em;
  4.         padding: 0;
  5.       }
  6.       #myForm dl dt {
  7.         text-align: right;
  8.         float: left;
  9.         clear : both;
  10.         width : 33%;
  11.       }
  12.  
  13.       #myForm dl dd
  14.       {
  15.          float : left;
  16.          width : 66%;
  17.          margin: 0 0 0 0.25em;
  18.       }
  19.  
  20.       .alert {
  21.         color : red;
  22.       }
  23.  
  24.       #registration {
  25.         border : solid 1px #ccc;
  26.       }
  27.     </style>
  28.  
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
Mar 14 '07 #4

jhardman
Expert 2.5K+
P: 3,405
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
Mar 14 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
Fieldsets are nothing big deal. They just help keep different parts of a form more organized.
Mar 14 '07 #6

Expert 100+
P: 1,892
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
Mar 14 '07 #7

jhardman
Expert 2.5K+
P: 3,405
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
Mar 14 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.