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