HTML表格或流中表單佈局的最佳實踐？

什麼被認爲是在html中佈局表單的最佳實踐？具體來說，您有一組帶有標籤的字段，以及可能的錯誤指示符。我能做的最好的事情就是使用一張桌子，但在面向css的佈局設計中，這並不能很好地工作。例如：HTML表格或流中表單佈局的最佳實踐？

<table> 
    <tr> 
    <td>Name:</td> 
    <td><input type="text" /></td> 
    <td style="display: none" id="NameError">*</td> 
    </tr> 
    <tr> 
    <td>Phone:</td> 
    <td><input type="text" /></td> 
    <td style="display: none" id="PhoneError">*</td> 
    </tr> 
    <tr> 
    <td>Birthday:</td> 
    <td><input type="text" /></td> 
    <td style="display: none" id="BirthdayError">*</td> 
    </tr> 
</table>

這似乎不是很CSS，但我不確定如何使用面向css的佈局來使這項工作正確。

什麼會被認爲是最佳實踐？

來源

2011-08-02 Roger Davis

@WTP - 嚴格來說，

是一個定義列表（它們的項目和定義列表），因此不是特別合適，IMO - 但是，我已經看到它們以這種方式使用。 –

「最佳實踐」將使用表格來表達它的意圖（represent data）並使用div，span或其他元素的組合來設置輸入表單的樣式。

來源

2011-08-02 16:48:02

你能提供一個這樣做的例子嗎？我試圖避免爲此使用表格，但這裏的所有聰明人似乎都不能提出一個相當健壯的工作解決方案。作爲第二個數據點，我看到的幾乎所有大型網站都採用了表格或固定寬度列的方法，但這兩種方法都不是理想的。 –

@Roger：這裏是使用div表格的一個很好的例子：https://secure.blippy.com/signup –

@Brad Christie：你的例子使用固定寬度的列。 –

使用字段標籤的實際<label>元素，這對於可用性也很好，並使用CSS適當地設計它們。

例如，

<label for="name">Name</label> <input type="text" name="name">

然後在你的CSS，你可以樣式LABEL元素有，例如，display:block和你的願望的寬度，和適當clear值。

對於tickbox /收音機輸入，輸入本身應該是<label>元件內 - 這意味着標籤本身可點擊以選擇輸入，如：

<label for="mycheckbox"> <input type="checkbox" name="mycheckbox"> Tick me if you dare</label>

來源

2011-08-02 16:48:27

你能更具體一點嗎？我不想在標籤上設置明確的寬度，我希望控件佔用他們需要的很多空間，然後讓標籤佔據空間的其餘部分，就像在上面的表格佈局中一樣。例如：http://jsfiddle.net/roger_davis/7h3bC/看起來像地獄。 –

最佳實踐= NEVER使用表格進行佈局。

你可以嘗試像藍圖我們的960網格系統的CSS框架。

來源

2011-08-02 16:49:50 Cygnusx1

...除非您顯示錶格數據，在這種情況下，始終適合使用

作爲結構選項。雖然您應該避免使用

標記來破解佈局，但按照預期方式使用HTML標記沒有任何問題。在

中呈現表格數據不違反結構和風格的分離;你告訴消費者，「這是結構化的表格數據！」 –

是的。我同意。這就是爲什麼我說佈局;-)在總體佈局方面。 – Cygnusx1

我們在同一頁面 - 我只是擴大你的答案，並不反對。 –

可以爭辯一個表格是表格數據，所以一個表格是可以接受的。正如David所說，他們主要的問題是你想使用正確的LABEL標籤。

在你的例子中，我不確定你通過CSS使用表獲得了什麼，但是。

來源

2011-08-02 16:50:27

魔鬼的倡導者說，通過使用表格而不是CSS，他可以將相同的標記部署到多個網站，這些網站可能各自爲「列」設置不同的首選寬度。如果你想要相同類型的健壯的非表格佈局，使用div和浮點數往往需要你給定指定的寬度......我總是發現自己正在調整CSS以匹配每個特定的站點，而不僅僅是一般的「一刀切」可悲的解決方案... – Funka

ha ...哎呀。我的意思是說「不知道你從在表上使用CSS獲得什麼」。至少在給出的例子中，我會說一張桌子最有意義。 –

將您的後續問題發給我的答案，因爲它很可能會作爲副本關閉。

我不知道有多好，在這個瀏覽器的支持，在FF4測試：http://jsfiddle.net/shanethehat/7h3bC/11/

<div id="tableForm"> 
    <div class="tableRow"> 
     <div class="tableCell"> 
      <label for="mycheckbox"> Tick me if you dare</label> 
     </div> 
     <div class="tableCell"> 
      <input type="checkbox" name="mycheckbox" id="mycheckbox"> 
     </div> 
    </div> 
    <div class="tableRow"> 
     <div class="tableCell"> 
      <label for="mytext"> Give me some text test test</label> 
     </div> 
     <div class="tableCell"> 
      <input type="text" name="mytext" id="mytext"> 
     </div> 
    </div> 
</div> 


div#tableForm { 
display:table; 
} 
div.tableRow { 
    display:table-row; 
} 
div.tableCell { 
    display:table-cell; 
    width:inherit; 
}

是的，我知道，我剛剛創建的div使用一個表。問題的關鍵是，這是很好的訪問和語義上適當的。

編輯：在IE7中失敗悲慘，其中固定寬度將是唯一的方法，但8和9似乎沒問題。

編輯2：切換標籤/字段並設置右對齊：http://jsfiddle.net/shanethehat/7h3bC/12/。在這一點上，這個標記正在變得很輕鬆。 :first-child將是使用left類的替代方法，但代價是IE8。

來源

2011-08-03 00:03:23 shanethehat

我不知道你們，但我不使用很多標記的表單佈局。

下面是一個簡單的日誌中的形式的標記（沒有佈局標記即div的，表格等）

<form method="post"> 
    <label>Username</label> 
    <input type="text" name="username" /> 

    <label>Password</label> 
    <input type="password" name="password" /> 

    <input type="submit" name="Log In" /> 
</form>

這裏是CSS的形式

label,input{float:left} 
label,input[type="submit"]{clear:left}

下面是結果

The rendered result of the above HTML and CSS

這個令人驚奇的是：

缺乏標記的CSS的
缺乏
靈活性

如果你看一下CSS中，label元素被清除左（左浮動）。這意味着該標籤將與其同伴input一起浮動，但每label將成爲一條新線。

這使得它非常容易添加額外的輸入。輸入後，即使驗證消息

採取這種形式例如

<form method="post"> 
    <label>Name</label> 
    <input type="text" name="username" /> 

    <label>Password</label> 
    <input type="password" name="password" /> 

    <label><abbr title="Date of Birth">D.O.B.</abbr></label> 
    <input type="text" name="dob_day" /> 
    <input type="text" name="dob_month" /> 
    <input type="text" name="dob_year" /> 

    <input type="submit" name="Log In" /> 
</form>

有了這個CSS

label,input{float:left} 
label,input[type="submit"]{clear:left} 
input[name^="dob_"]{width:44px;margin:2px} 
label{width:70px}

我們得到

The rendered result of the above HTML and CSS

它真的就是這麼簡單:)

使用這個概念，您創建了大量的可能性，並且您再也不必使用表格進行佈局！

來源

2013-11-26 15:36:36

相關問題

HTML表格或流中表單佈局的最佳實踐？

回答

相關問題