風格標籤字段形式的最佳方式？

說你想用下面的佈局形式風格標籤字段形式的最佳方式？

|-----------------------------------------------------------| 
| Street Address 1    Street Address 2 
| _____________________   _____________________ 
| |_____________________|  |_____________________| 
| 
| City    State     Zip 
| ______________ ____  _____________________ 
| |______________| |___^|  |_____________________| 
| 
|-----------------------------------------------------------|

我敢肯定，有沒有比接受了幾個社會上更多的做HTML/CSS這又每次都爲「正確」的方式，我覺得不必風格自己類似的東西我與寬度擺弄，花車，嵌套的標籤與使用for=""等

什麼都好，普遍接受的（這意味着它不只是您的意見）方法創建的HTML和CSS和它具有語義上的意義，可維護性，並且可以與瀏覽器一起工作大小調整？

編輯： 我當然意識到，沒有一種技術適用於所有情況。然而，當你開始創建一個表單時，你首先需要某種基準，一些指導 - 這是我一直無法找到的和我正在尋找的東西。

來源

2012-01-22 George Mauer

我不確定，但不能將每個標籤和輸入結合在一對和標籤中，並且使用適當的css按照您想要的方式製作？

來源

2012-01-22 22:26:28

埃米爾，問題不是**如何做到這一點;有一百萬種方法。問題是社區接受什麼是正確的方式。 –

社區，就曾經有過「社區」觀點而言，我認爲：任何最適合你和你的用例的理想情況下，理想情況下，它不會謀殺語義。 –

@George Mauer：這似乎是結案的理由，即使你不要求***只是***個人的意見... – BoltClock

我典型地在一個div，然後組那些結合標籤/輸入轉換成可以被視爲一個單元的容器（通常爲字段集）。然後你可以有一個一致的寬度，花車，邊距等。

我也使用類應用標籤和輸入一致的大小 - 認爲（小，中，大）。

它看起來是這樣的：

<fieldset> 
<div class="medium"> 
<label for="street1">Street Address 1</label> 
<input id="street1" /> 
</div> 
<div class="medium"> 
<label for="street2">Street Address 2</label> 
<input id="street2" /> 
</div> 
</fieldset> 

<fieldset> 
<div class="small"> 
<label for="city">City</label> 
<input id="city" name="city /> 
... 
</fieldset>

如果你感覺真的ambitiuos，那麼隨着時間的推移，你可以創建自己的「終極包」 like Simon Collison，你可以用它來啓動你的項目。

來源

2012-01-23 00:04:07 ryankeairns

下面的鏈接提供的技術是乾淨和語義的。

label標籤包含相應的輸入元素。

fieldset標籤包含輸入元素組。

ul和li標籤一行一行地組織表單元素。

然後，所有內容都通過CSS進行視覺上的調整以達到完美。

http://www.slideshare.net/AaronGustafson/learning-to-love-forms-web-directions-south-07

注：一些幻燈片的底部被裁剪。整個演示文稿可以作爲OpenOffice文檔下載，無需剪切。

來源

2012-01-23 00:17:30 Sparky

Twitter Bootstrap具有堆疊形式的組件，並developed as a style guide and toolkit因此它可能是最佳做法的合理的工作示例（至少對於那些特別設計，顯然不適合每一個使用案例比比皆是）。

最一致的最初步實踐我已經看到了創建窗體是標籤標籤附上兩個標籤和輸入，以增加點擊區域，從而使形式更便於使用。

來源

2012-01-23 01:18:29 ellawren

風格標籤字段形式的最佳方式？

回答

相關問題