Easy Tableless Forms

I often fight with myself over the best way to represent forms. They are very tabular in design, they have rows and columns but I don't like using tables where I don't have to and it never seems that I have to when dealing with forms. I've tried many different ways to represent forms and after trial and error I've settles on one way. I use these forms in all of my projects now and not only are they very basic but they are pretty scalable as well. Feel free to take this and use it on your own projects, it might not be the best way to do it but it's the way that I personal find the easiest.

First, a quick example.

Source

<style>
    form.form_one div{
        float:left;
        clear:left;
    }
    form.form_one label{
        font-weight:bold;
        float:left;
        display:block;
        padding-right:6px;
    }
    form.form_one input{
        float:left;
        width:150px;
    }
</style>

<form class="form_one">
    <div>
        <label for="first_name">First Name:</label>
        <input type="text" name="first_name" />
    </div>
    <div>
        <label for="last_name">Last Name:</label>
        <input type="text" name="last_name" />
    </div>
</form>

Each row in the form has it's own div element. This keeps the rows seperate without the need for a line-break.

Del.icio.us     Digg