在HTML中布局数据输入表单:表格还是没有表格？

Question

我想创建一个数据输入表单，如下所示：

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

标签左对齐，文本框左对齐。我知道我可以在table元素中做到这一点，但我也知道“表应该只用于表格数据”。虽然我同意/不同意这种说法--我想知道我想要的布局是否可以/应该被认为是“表格数据”，以及在没有几十行复杂的跨浏览器CSS的情况下，另一种布局会是什么。

我目前不太做web开发(当我做UI工作时，严格地说是WinForms )，所以我很感激可能会有一个优雅的解决方案。可能涉及到一个无序列表，其中的项目符号被关闭，而标签->字段y的位置偏移了一点？

Answer 1

这里应该使用带有label元素的无序列表。我使用的标记应该类似于：

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

这个CSS如果想得到与你想要的相似的东西：

#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;
}

请参阅：http://jsfiddle.net/tZhUQ/1，其中包含一些您可以尝试的更有趣的东西。

Answer 2

Webcredible have an example，只要删除text-align: right就可以得到你想要的东西。

Smashing Magazine和Design Shack整理了一些例子。