Layout Form using CSS

You still using tables to display forms? I think it's time to move on with tables and let the Magic of CSS do its work.

Before we start, you will have to know how the label works.

The <label> tag defines a label for a <input> element. The <label> element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. The for attribute of the <label> tag should be equal to the id attribute of the related element to bind them together.

source: http://www.w3schools.com/tags/tag_label.asp

This field will be used to replace a td from the table structure.

Example:

<div>
 <label for="field1">Field 1:</label>
 <input type="text" name="field1" id="field1" />
<div>
</div>
 <label for="field2">Field 2:</label>
 <input type="text" name="field2" id="field2" />
</div>

Now, let's create the CSS:

label {
 display: inline-block;
 width: 100px;
}
input {
 display: inline-block;
}

Easy no?

Now, as you can see, there's some div wrapping each element (and label). If you want to get rid of these divs, you will need to use this simple jQuery technique.

$(document).ready(function() {
 $("input").after("<br />");
});

This will add a br HTML tag after each input automatically.