Creating form to have fields and text next to each other - what is the semantic way to do it?

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?

Wait, what? You don't want to use a table, because doing that would be "semantic", but you are using lists? Why? You don't care for lists? You like abusing them? — Mr Lister, Jan 08 '12 at 19:57

score 6 · Accepted Answer · answered Jan 08 '12 at 19:52

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).

The only minor quibble I have is giving the wrapping div a class of 'line', which sounds presentation-ish. The fields themselves may all be on the same line, for example. For this reason, I usually call the wrapping div something like "fieldWrapper". — Dan Blows, Jan 08 '12 at 20:16
@Blowski Yup, thats ok, i only use it cause its simple to remember :D ..im not very creative :( — Andres I Perez, Jan 08 '12 at 20:19

score 3 · Answer 2 · answered Jan 08 '12 at 19:52

It makes sense for the label to be next to the input in the HTML - it's easier to read and more maintainable. Typical HTML for this would be:

<div class="fieldWrapper">
  <label for="something">Something</label>
  <input type="text" id="something" name="something">
</div>
<div class="fieldWrapper">
  <label for="something">Something</label>
  <input type="text" id="something" name="something">
</div>

And CSS would be:

label, input {
  float:left;
}

input {
  font-size:14px;
  padding: 2px; // instead of using fixed height
}

label {
  width: 100px; // can use JavaScript if it needs to be dynamic
  padding-top: 3px; // to make the label vertically inline with the input element
}

.fieldWrapper {
  clear:left;
}

scott.korin · Answer 3 · 2012-01-25T16:53:05.580

At my company, way back when we first started our first web application back in 2001, we used a table.

<table class="formTable">
    <tbody>
        <tr>
            <td><label>Name:</label></td>
            <td><input type="text" name="name" /></td>
        </tr>
        <tr>
            <td><label>E-mail:/label></td>
            <td><input type="text" name="email" /></td>
        </tr>
    </tbody>
</table>

And while this works, philosophically I don't like the approach, because as far as I am concerned, a table should hold table-ized data.

You could use CSS and DIV's, as well:

<style>
    .formLabel, .formInput {
        display:inline-block;   
    }
</style>

<div class="formField">
    <div class="formLabel"><label>Name:</label></div>
    <div class="formInput"><input type="text" name="name" /></div>
</div>
<div class="formField">
    <div class="formLabel"><label>E-Mail:</label></div>
    <div class="formInput"><input type="text" name="email" /></div>
</div>

See here: http://jsfiddle.net/9P7pg/

Or, you could avoid the use of div's all together, and just apply the display: inline-block for each label and input (or use classes). But then you will also have to remember to use a breaking space for carriage returns in between the label-field combination.

score 0 · Answer 4 · answered Jan 08 '12 at 19:59

If you really can't change your HTML, you could set a CSS height on the <li> tag to fix the alignment problem. But I strongly recommend you to choose one of other proposed solutions, because your HTML is very hard to read in its current state. And you should use the <label> tag.

score 0 · Answer 5 · answered Jan 08 '12 at 20:00

0

Write this <input type="text" name="firstname" /> and set the height width and padding

answered Jan 08 '12 at 20:00

score -1 · Answer 6 · answered Jan 08 '12 at 19:44

-1

there is a special list for this actually! it's called definition list (dl) and is comprised of definition terms and definition definitions (dt/dd). i usually put the text in the dt and the input box in the dd. like this:

<form action="bla">
    <dl>
        <dt>Name*</dt>
        <dd><input type="text" name="name" />
        <dt>Email</dt>
        <dd><input type="text" name="email" />
    </dl>
    <p><input type="submit" /></p>
</form>

answered Jan 08 '12 at 19:44

davogotland

2,718
1
15
19

4

I don't like it for the reason given on @Jan's answer. It lacks flexibility, and it's semantically incorrect. If you need to insert a paragraph in the middle of the form, for example, how do you do this? What about when you have 'tips' associated with inputs - where do they go? Also, what about when you have a `fieldset`? You can't put a `
`, so you end up with complicated nesting. Semantically, it isn't a definition list, and programatically, it's more complicated.
– Dan Blows Jan 08 '12 at 20:10

Creating form to have fields and text next to each other - what is the semantic way to do it?

6 Answers6

Linked