468,316 Members | 1,992 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,316 developers. It's quick & easy.

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

jhardman
3,405 Expert 2GB
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
7 2391
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
7,435 Expert 4TB
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
3,405 Expert 2GB
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
3,405 Expert 2GB
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
7,435 Expert 4TB
Fieldsets are nothing big deal. They just help keep different parts of a form more organized.
Mar 14 '07 #6
AricC
1,892 Expert 1GB
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
3,405 Expert 2GB
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.

Similar topics

5 posts views Thread by Clint Olsen | last post: by
67 posts views Thread by S.Tobias | last post: by
7 posts views Thread by Doug Bell | last post: by
13 posts views Thread by aegis | last post: by
1 post views Thread by Alan T | last post: by
11 posts views Thread by Brian Gladman | last post: by
8 posts views Thread by ramsatishv | last post: by
reply views Thread by NPC403 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.