在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，其中包含一些您可以尝试的更有趣的东西。