This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Monday, February 25, 2008

Beautiful CSS Form

Do you love simplicity of Facebook design? Take inspiration to design a beautiful CSS Form.

This tutorial explains how to design a beautiful form (Facebook inspired) using a clean CSS design with only <label> and <input> tags to simulate an HTML <table> structure. You can reuse all CSS/HTML elements to design your custom form for your web projects:


Live preview Download this tutorial (HTML + CSS)

Update: I solved an issue with Safari and Firefox, download the new zip file.

Step 1: Input elements and labels
When you design a form (for example to Sign-in or Sign-up on your site), a fast solution to place all form elements in a page is add them into the table's cells. A good and simple alternative is using HTML <input> and <label> tags in this way:

<label>
<span>
Full name</span>
<input type="text" class="input-text" name="email" id="email"/>
</label>

...and the css code is the following:

div.box .input-text{
border:1px solid #3b6e22;
color:#666666;
}

div.box label{
display:block;
margin-bottom:10px;
color:#555555;
}

div.box label span{
display:block;
float
:left;
padding-right:6px;
width:70px;
text-align:right;
font-weight:bold;
}

...in this way, <span> element inside the <label> tag set the same width (70px) for the field descriptions to the left of each <input> element in your form, like if field description and input was placed in a table row with two horizontal cells.

Update: to solve an issue with Safari (using size attribute) and with Firefox (problem to display correctly input label) I changed the following code:

div.box label span{
display:inline-block;
...
}

with:

div.box label span{
display:block;
float
:left;
...
}



Step 2: Submit Button
When you add a standard/unstyled button in a form (<input> or <button> tag) take a mind it looks different on different browser and OS. A good practice to uniform how it looks is to define a CSS class to apply to your button. Instead of <input> or <button> tag you can also use a simple link (<a> tag) like in this case (I designed and applyed "green" class to the link <a>):

<a href="#" onClick="javascript:submit()" class="green">
Sign in
</a>

...and CSS code for the "green" class is the following:

.green{
background:url(img/green.gif);
padding:0px 6px;
border:1px solid #3b6e22;
height:24px;
line-height:24px;
color:#FFFFFF;
font-size:12px;
margin-right:10px;
display:inline-block;
text-decoration:none;
}

The final result is very nice and clean, ready to reuse in your projects.

Download this tutorial (HTML + CSS)

Related Content
Table's anatomy: why tables are not so bad

blog comments powered by Disqus
Anonymous said...

Not so beautiful in Safari 3.0.4
-> http://www.polarblau.com/stuff/form.png

UpperCanuck said...

Slick! Love the button tip!

Sam Brown said...

This has sporadic results across different browsers.

Firefox displays everything inline and doesn't respect the inline-block span's width. Safari displays the labels and input boxes on separate lines and has broken widths for the span.

Antonio said...

@sam brow: I don't have this problem on firefox... can you send me a screenshot?

Antonio said...

@anonymus: I saw the screenshot yuo sent me. I think the problem is in the input "size" attribute. Set it to 20 or define a fixed width in pixel in this way:

div.box .input-text{width:160px;}

Zephyr said...

Well, this solution isn't very good, because the semantic meaning von the Label-Tag is no longer usefull.
Normally, you would include the describing text for the input-field in the label-tag. Only the describing text, not the the input-field itself.

But well, it works for the purpose, you suggested.

Andrew Herron said...

Because this would make too much sense, eh?

<div>
<label>
My Label
</label>
<input/>
</div>

Antonio said...

@andrew herron: how you wrote you can't use <label> display:block; property to simulate a table's row.

Beckley said...

I've been using the method Andrew Herron brought up. Same amount of markup, and makes more sense to me to separate the label tag from the input rather than wrapping the whole thing in the label tag. I think ideally the label tag should contain the label text and nothing else.

Also, doesn't replacing the submit with the javascript link render the form useless if javascript is turned off? You could also use an input with type="image" to show a gif as a button.

Peter Daams said...

Nice one Antonio. I've always kept the label tag separate myself though. Incidentally, if you do that, it does NEED the "for" attribute and a matching, unique ID on the input tag. So Andrew Herron's example should read:

<div>
<label for="myinput">My Label</label>
lt;input id="myinput"/>
</div>

That has the added benefit of being able to click on the label to activate the input (particularly useful with checkboxes)

Finally, you may be interested in using Uni-Form

It does a pretty nice job of achieving the same kind of thing (and quite a few others)!

nub340 said...

Definately neat but I'm gonna stick with my tables+css for now! I learned the hard way that in the real world, when you need to code something quickly AND have it render consistantly across all browsers, nothing beats a good 'ole HTML table. Yes you CAN get pure CSS to work but how much time does it end up taking you to get it working on all the browsers; adding little hacks here & there; all to just get the same effect as a table, but with LESS cross-browser compatibility? The bandwidth overhead is NOT worth the effort in 99% of cases. Still pretty cool though, I've never thought of using labels in that way.

Joe said...

this is pretty good and through yet straight to the point ill end up using this.

Anonymous said...

An even better solution is to use the fieldset tag:

<form>
<fieldset>
<label>Your name:</label>
<input />
</fieldset>
...etc.
</form>

phyzome said...

Please give that <span> a classname, and use it. Here's why.

Nick Dunn said...

From an accessibility point of view I would change two things.

1. Group related form fields into FIELDSET elements. Not indvidual controls, but "related" controls. And provide concise LEGEND elements as descriptors.

2. Don't use JavaScript to submit the form! What happens to users with JavaScript disabled (by choice or otherwise) or using assistive technology which does not support it? Using the BUTTON element does indeed allow you to fully style the button how you wish (even in Safari) so this would be the optimal solution. Even an image input element would be preferable over an anchor and JavaScript cludge.

Jon Hartmann said...

Wouldn't the following format be more syntactically correct? Label can technically wrap the element its describing, but I think that using it with the for attribute is a lotcleaner.

<p>
<label for="email">Full name</label>
<input type="text" class="input-text" name="email" id="email"/>
</p>

Garrick said...

If your site is using DOCTYPE HTML 4.01 Strict, then you HAVE to wrap the code inside the form using fieldset+legend.

<form>
<fieldset>
<legend></legend>
<label>
<span></span>
<input>
</label>
</fieldset>
</form>

This method actually validates, which is good. But since fieldset is being used, might as well use it instead of adding span.

Dennison Uy - Graphic Designer said...

Beautiful indeed, but I am not sure I like placing labels within span tags. Also, form elements should be placed outside the label tag. For CSS forms, I personally prefer Jeff Howden's solution.

brandonrichards said...

Not a good practice by using onClick in the button link; attach the event externally to the document markup

Studio Créatif said...

This is a beautiful css form. I'll try to use it on my next project. Thanxs.

recosmic.com said...

thanks..nice article. i review your blog in indonesia language

Emergence said...

Was wondering how you would make a form where you have the form then the fieldset(which can be more than one), the legend for that section, and a list of the labels and inputs within. Just curious as what you would put for the layout of that design.

Jamie Larsen said...

Thanks for the post. I think that the web is going towards a more simplistic design. Clean is the new black.

The button styles work on most browsers except for MAC safari.

Ron said...

Great looking form, is there a way to add a text field that keeps the same width too?

baobaz said...

hi.. I am still learning CSS from your website. It's very nice. but I have question that stuck in my head.

Why were you write code like this:
div.box input .input-text {}

Why dont you, write like this:
div.box label input .input-text {}

I think < input > is in < label > so, why are you write like that?

And.. why is your code work and my code also work?

Please.. help me :)
thank brother..

Meghna said...

Really great article, i never design a form using CSS style so this article will help me a lot.

Judd Lyon said...

Good post! Web forms are always up for debate since there are several ways to approach it.

For those interested, I wrote a post summarizes a few common CSS/HTML form techniques.

Elmi said...

Hi,
I love this form but i have a dout Can we use list/menu in place on text field in this form....

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News