佈局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已經整理了一些例子。