How to Align Web Form Text and Inputs Separately?

Question

I'm looking for the most efficient way to code a fairly simple html form layout I've done a mockup of.

So far I've thought of a number of ways to code this but they all seem rather cumbersome when implemented.

Basically what I'm trying to put into action is plain text aligned to the right and form imputes aligned to the left with a line in the center of both. Below is an image that should give an example of what I'm trying to achieve.

Answer 1

I recommend using the display values of table, table-row, and table-cell to keep the markup as semantically neat as possible: See this jsFiddle

Answer 2

Here's one approach, though I think you could have helped yourself a great deal more, by showing previous attempts and explaining problems you had. However:

form {
    width: 80%;
    max-width: 40em;
    margin: 0 auto;
    color: #3f3a27;
    background: #f4f0e5 url(http://davidrhysthomas.co.uk/linked/test.png) 35% 0 repeat-y;
    padding: 0.5em;
}

label, input[type=text], select {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -box-sizing: border-box;
    margin-bottom: 0.6em;    
}

label {
    width: 30%;
    text-align: right;
    margin: 0 10% 0 0;
}

label:after {
    content: ': ';
}

input[type=text] {
    width: 40%;
}

select {
    width: 20%;
}

fieldset {
    margin: 0 0 1em 0;
}

With the HTML:

<form action="#" method="post">
    <fieldset>
        <label for="fullName">Full name</label>
        <input type="text" id="fullName" />
        <label for="companyName">Company</label>
        <input type="text" id="companyName" />
    </fieldset>
    <fieldset>
        <label for="select">Select</label>
        <select id="select" name="select">
            <option>Option one</option>
            <option>Option two</option>
        </select>
        <label for="t1">Text input 1</label>
        <input id="t1" type="text" />
        <label for="t2">Text input 1</label>
        <input id="t2" type="text" />
        <label for="t3">Text input 1</label>
        <input id="t3" type="text" />
    </fieldset>
</form>

JS Fiddle demo.

Answer 3

Here is a basic form with minimal style

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>Save
    </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;
}

Test http://jsfiddle.net/andresilich/qxMVd/

Answer 4

I have it like you wanted it: http://jsfiddle.net/XURye/

With the same colors and every position is correct too!

Answer 5

This minimal two selectors CSS from this Drupal post worked really well:

.form-item {
  padding: 10px 0 10px 200px;
  position: relative;
}
.form-item label {
  left: 0;
  position: absolute;
}

Answer 6

CSS & HTML http://jsfiddle.net/27cdz/3/