Question

I want to create a form so there is text on the left side and the inputs on the right, currently I am doing

<div id="labels">
<ul>
<li>The Label</li>
</ul>
</div>

<div id="inputs">
<ul>
<li><input type="text /></li>
</ul>
</div>

And the CSS

input[type=text] {
    height: 14px;
}

#labels {
    float: left;
}

#inputs {
    float: right;
}

li {
    padding-top: 4px;
    padding-left: 10px;
}

// Text size is 14px

What happens is that the text and fields are not aligned perfectly (the inputs get progressively lower as I add items). I am thinking this is because not all the inputs can be 14px (I use drop downs, checkboxes, radios, etc.).

What would be the correct way to create this? I know a table would fix the problem but is that semantic?

Answer 1

This sort of question has been asked multiple times here in SO, you can do a simple search and find many solutions.

But here is a simple form to get you started:

HTML

<form>
    <div class="line">
        <label for="input">Full Name</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="input">Company</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="nselect">Dropdown Menu</label>
        <div class="input">
            <select name="select">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
    <div class="line">
        <label for="input">Text 1</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="input">Text 2</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="input">Text 3</label>
        <div class="input">
            <input type="text" size="15" name="input">
        </div>
    </div>
</form>

CSS

form {
    margin:10px 0;
}

label {
    color: #404040;
    float: left;
    font-size: 13px;
    line-height: 18px;
    padding-top: 6px;
    text-align: right;
    width: 130px;
}

label, input, select, textarea {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 13px;
    font-weight: normal;
    line-height: normal;
}

input, textarea, select {
    -moz-border-radius: 3px 3px 3px 3px;
    border: 1px solid #CCCCCC;
    color: #808080;
    display: inline-block;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    padding: 4px;
    width: 210px;
}

select {
    height: 27px;
    line-height: 27px;
}

form .input {
    margin-left: 150px;
}

form .line {
    margin-bottom: 18px;
}

Here is a demo: http://jsfiddle.net/5aduZ/1/

A lot of people will not agree with my use of divs to separate the form elements but through testing i found this format to be the safest and surefire way to go about it as it separates the fields cleanly, and it works just fine under IE. Plus, it is the format used by the big boys (facebook, twitter, google).