Some readers of my blog hate html tables and often ask to me which is the better way to design FORMS with CSS, without using tables to place each form element in a table's cell.
How I said some time ago... tables are not evil. Sincerly, in some case I used pure CSS code to design forms but, in general, I prefer to use tables. It's simpler and faster than use only CSS property "to simulate" a table structure. In any case, for CSS lovers, this tutorial illustrates a proposal about how to design a pure CSS form without using html tables.
You can download the source code and use it in your web projects.
Download source codeStep 1: HTML Code
Create a new page index.html and copy and past this code into the tag <body>:
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="index.html">
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>
<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" name="name" id="name" />
<label>Email
<span class="small">Add a valid address</span>
</label>
<input type="text" name="email" id="email" />
<label>Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="text" name="password" id="password" />
<button type="submit">Sign-up</button>
<div class="spacer"></div>
</form>
</div>
<form id="form" name="form" method="post" action="index.html">
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>
<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" name="name" id="name" />
<label>Email
<span class="small">Add a valid address</span>
</label>
<input type="text" name="email" id="email" />
<label>Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="text" name="password" id="password" />
<button type="submit">Sign-up</button>
<div class="spacer"></div>
</form>
</div>
How you can see from the code above, the structure of our CSS form is the following:
I used <label> for the name of each input element and <span> tag for the short description. All labels and input elements have float CSS property set to left;
Step 2: CSS Code
Copy and paste the following CSS code in the <head> tag of your page:
body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
This is only a proposal for the form layout. You can reuse this code changing all properties how you prefer.
Download source codeRelated Post
Table's anatomy: why tables are not so bad
Are you a CSS fanatic?
Improve form usability with auto messages
I am 
Great write up, forms are always something I'm really not sure how to do. I've probably tried dozens of html and css layouts over the years and I think I settled on one similar to yours. I will have to try yours next, I like the text under the label better. :-)
Thanks!
Dude, what you use to do the images of the tutorials ?
@anonymous: I use photoshop + Illustrator :)
all posts are great! nice work, you are social writer and genius :)
This is the best blogger template I never seen! :)))
Can you try to make demoes of your tutorials! I love them, but would like to a demo of the final product.
I would clear the float's by using a linebreak (
). This is nicer because your (unstyled) form will look also good without any CSS. Now everything will be positioned horizontally.
You better add the "for" attribute to labels.
[label for="name"] where "name" is the id of your textfield
(P.S. Replace [ by < and ] by >)
Great tutorial ;) I often use tables to create form... I think is more simple for me (because I'm not a genius of CSS :P ), but I like this proceeding.
Your forms look great, but your class names and ids don't add any semantic value to the html.
class="small" and id="stylized" ??
Nice forms though. I also like the text under the label.
Perhaps instead of div stylized you might use a fieldset. Containing inputs is what a fieldset was designed for. Something to think about anyway.
OK, that works. But it doesn't look nice when un-styled. Why do I care? Because by default it would be usable on any phone or any other device/software that doesn't support CSS.
So I changed all my forms to either have all fields wrapped in [div class="field"] or in [p]. And it gives some extra styling power as well to wrap the elements.
Read my own tableless-forms article here: http://michiel.wordpress.com/2006/02/09/floating-forms/
nice graphics though.
Nice post. That's how i would have done it also.
don' use the button tag use input,
choose semantic class-names(eg not "small", but "instruction", an instruction can be small, but you can't know for sure you will always make your instructions small (people with disabilities))
Nice approach, I've seen alot of forms using definition lists as well, floating the dd elements left, which has worked well for me in the past, as its not code heavy, and allows good control of spacing cross browser..
In my opinion H1 should be H2 :) H1 is semantically reserved for the header of the site (the main title od the site)
@Me:
What's wrong with the <button> element?
@Antonio:
Very neat and original way to post a tutorial, bravo!
what about legends and fieldsets?
These are great for containing and labeling related elements in a form.
Nice tutorial!
Btw, it would be better if you use
for clearing or maybe a clearning without structural markup ":after method".
if you use < br / > [ line break ] *
Cool article. Forms can be a pain.
could be better! I would use a "fieldset" and "legend" instance of "h1". "div"'s to separate the elements and much more... Should think about the accessibility too, not only the good look! here is an example how I use to organise my forms. it's a simple example with not so much elements, but will give some idea. http://www.georgisvetoslavov.name/codes/form.html And with a js could make a basic form validadion before send the form data
@Me is right, don't use "small". Even if you were just making the text small, it defeats the purpose of using CSS at all.
@webmonkey Using <dl>s to style a form is wrong. Why? Because it's marked up as a "definition" when it's really a form.
thank you
Thanks for sharing your article. I like how you use labels. I have been using the definition list method for several years and have the same results.
Just a suggestion for better accessibility...rather than use just the label tag, do the label for="yourIDhere" tag to correspond with your input ID.
Also, I do like other people's suggestions about having a live demo. You should really consider doing that for anything you post.
Nice form but 1 minor problem is that it doesn't work well with radio buttons.
< input type="radio" />
Nice Style. But how to you handle form errors, syle-wise?
Medhat
I don't really like the hard-coded width of the label and the descriptive text underneath. That's the problem I always run into with mimicking tables in CSS... it looks great as long as they 1) use the right font, 2) don't resize the text. Hard-coding the widths seems kludgey.
What about not using any class on the SPANs, and go with this:
#stylized label span{...}
instead of this:
#stylized .small{...}
I like to use a definition list (dl tag). The [label] tag goes inside the [dt] tag, and the [input] goes inside the [dd]. Because, semantically, that's what you're doing: label is a data term, defined by the input that the user is about to enter.
Plus, it gives you all sorts of lovely hooks to style.
The use of float:left for all input elements could also cause issues if you were planning on having multiple input elements on the same line.
For example, if you were separating parts of phone numbers or birthdates into 3 separate boxes with a divider between, the boxes would float left, but the dividers would all be right of those.
You should use 'for' attributes on your labels and IDs on the inputs so that the labels can be associated with the inputs.
And as someone mentioned, it'd probably be a good idea to use legends and fieldsets (although not always necessary for short forms).
True, tables aren't evil... when tabulating data :P
I agree with Mark and Michiel a bit, perhaps a break or wrapping both floats in a p would work for styleless/semantic sake. Otherwise it's a great form.
Cheers!
Nice form and clear layout,
but I agree with mike:
" Perhaps instead of div stylized you might use a fieldset. Containing inputs is what a fieldset was designed for "
Really nice!!
Thxx!!
Thanks, this is pretty useful.
Excellent form treatment, I've got a lot from playing with the styles you've got here. not rocket science, but i've never made a form look this good before! thanks.
Thanks ^^
Thank you for your article.
Nice work on the styling of the form. I like the little descriptions a lot.
@Thierry Koblentz
I'd take it even a step further and remove the span tag altogether, replace it with something more standard and short, like em or strong. All the same styles would work just fine.
Overall, a good writeup!
Thanks, this was the best CSS form tutorial I have seen. I am a ColdFusion Guy, and usually use tables for forms.
One question how can I use a text area with this css?
I tried [textarea][/textarea] but I can't figure out the CSS:(
Any thoughts? I love to hear how you would go about this.
Thanks so much
John Barrett(johnbarr@hawaii.edu)
Great!
HTML:
[input type="textarea" class="mytextarea"]
CSS:
.mytextarea {
/* stuff */
}
I agree, this looks awesome, but one size width is too narrow, which is fine to fix, easily. but problem is as someone else said, radio buttons don't work, and i need them majorly to work with this theme perhaps.
Tick boxes need to work too must.
Advisement please provide!
Cheers,
Jon
Awesome write up.
Inspired me to get rid of some html
Good post, although I am interested in how you handle your warnings and errors. Your other post here http://woork.blogspot.com/2008/02/beautiful-css-form.html shows how you handle tips and things, which is a nice way of doing it. Thanks, and I really love your work and how you share your knowledge - well expertise.
Thank you so much. I found the form which I am searching for.
Thanks
Great tutorial just what i needed to create a CSS form
Excellent Tutorial.. very usefull
it's good
Hi,
It is very helpful. I have been finding such CSS for weeks.
Thanks.
The form is not looking good in IE 8.. :(
Thanks for a great starting point!
you have a very nice blogger template, nice css form tutorial
Really nice article!
Thnaks!
I added clear:left; on the labels css declaration. so the form won't mess up, when the small text goes over two lines.
Excelente recurso Antonio.
Gracias por compartirlo, he escrito una entrada en mi blog comentándolo.
Saludos!
very useful article!
Thanks!
Thats not a bad article, however why do you not put the advice into practise and producr a demo of the form?
Good work. Thanks.
how would u split the form into 2 or 3 pages if it gets too long ?
I always have trouble making my forms look nice. This helped quite a bit on my contact forms.