Question

I want to create a data-entry form like the following:

Name:    [ Name textbox ]
Age:     [ Age textbox  ]
label n: [ textbox n    ]

Where the labels left-align, and the textboxes left-align. I know I can do this in a table element, but I’m also aware that “tables should only be for tabular data”. While I part agree/disagree with that statement – I’d like to know whether my desired layout could/should be considered “tabular data”, and what an alternative layout would be to produce the same results without dozens of lines of complicated cross-browser CSS.

I don’t do web development much at the moment (strictly WinForms for some time now when I do UI work), so I appreciate there may be an elegant solution. Possibly involving an unordered list with the bullet points turned off and a bit off label->field y position offsetting, perhaps?

Answer 1

Unordered lists with label elements should be the way to go here. The markup I would use should look something like:

<form id="person" method="post" action="process.php">
    <ul>
        <li><label for="name">Name: </label><input id="name" name="name" type="text" /></li>
        <li><label for="age">Age: </label><input id="age" name="age" type="text" /></li>
        <li><label for="n">N: </label><input id="n" name="n" type="text" /></li>
    </ul>
</form>

And this CSS if to get something similar to want you asked for:

#person ul {
    list-style: none;
}

#person li {
    padding: 5px 10px;
}

#person li label {
    float: left;
    width: 50px;
    margin-top: 3px;
}

#person li input[type="text"] {
    border: 1px solid #999;
    padding: 3px;
    width: 180px;
}

See: http://jsfiddle.net/tZhUQ/1 , which contains some more interesting stuff you can try.