網頁設計5中簡單的XHTML網頁表單。
技術1：標籤三明治
將輸入框，選擇框和文字框全部包含進 label 元素，並全部設定為區塊級元素。將單選按鈕和多選框顯示方式設為 inline 以便於它們在同一行出現。如果你比較喜歡 label
網頁設計之5中簡單的XHTML網頁表單。
技術1：標籤三明治
將輸入框，選擇框和文字框全部包含進 label 元素，並全部設定為區塊級元素。將單選按鈕和多選框顯示方式設為 inline 以便於它們在同一行出現。如果你比較喜歡 label 和單選按鈕/多選框出現在不同行，可以選擇不把它包含在 label 裡面，或使用硬換行處理。
每種情況都在下面展示了。
當這些看起來比較時髦的時候，W3C 事實上已經含蓄地展示了他們的 label 例子。
主要好處：簡單
程式碼：
label, input, select, textarea {display: block;}
label {margin-bottom: 10px;}
input[type="radio"], input[type="checkbox"] {display: inline;}
運行結果：
#expamle1 label,#expamle1 input,#expamle1 select,#expamle1 textarea {display: block;}
#expamle1 textarea {display: block;}
>bot : 10px;}
#expamle1 input[type="radio"],#expamle1 input[type="checkbox"] {display: inline;}
技術2：懶人
許多開發者採用了這種不正統但是快速簡單（用換行隔間標記）的方法。雖然能運行，但是對你的 css 能力有害，因為你不需要任何 css 去實現它。
主要好處
：快速
程式碼：
聯絡表圖例>
名稱標籤>
電子郵件標籤>
> 選擇（單選）
選擇1
選擇2
選擇3
選項（複選框）
選擇1
選擇2
選擇3
選項1選項> 選項2選項> 選項3選項>
訊息標籤>
字段集>
運行結果：
#p#
網頁設計之5中簡單的XHTML網頁表單。
技術3：語意先生
web標準的信條之一就是考慮資料類型和相關的回應代碼。既然表單是連續的問題列表，那麼社區列表用在這裡就非常貼切。
主要好處：構造
程式碼：
ol {
列表樣式：無；
左填充：0；
}
聯絡表圖例>
- 名稱標籤>
- 電子郵件標籤>
- 選擇（單選）
選擇1
選擇2
選擇3
- 選項（複選框）
選擇1
選擇2
選擇3
-
選項1選項> 選項2選項> 選項3選項>
- 訊息標籤>
-
字段集>
運行結果：#example3 ol {
list-style: none;
padding-left: 0;
}
技術4>padding-left: 0;
}技術4 ：分而治之假如你採取將橫向表單，需要何種形式？很多情況（客戶）會要求橫向表單。我們可以依賴的是老夥伴 p，只需要把表單分割成多個欄位。利用標籤三明治方法我們可以很容易的實現。
主要好處：空間的利用
程式碼：
label, input, select, textarea {display: block;}
label {margin-bottom: 10px;}
input[type="radio"], input[type="checkbox"] {display: inline;}
.form-column {
width: 150px;
height: 250px;
padding-left: 20px;
border-left: 1px solid #ccc;
float: left;
}
運行結果：#Example4 label,#Example4 input, #Example4 select, #Example4 textarea {display: block;}
#Example4 label {mar-ginbot : 10px;}
#Example4 input[type="radio"], #Example4 input[type="checkbox"] {display: inline;}
#Example4 .form-column {
width: 150px ;
height: 250px;
padding-left: 20px;
border-left: 1px solid #ccc;
float: left;
}
}
老學究懶人
如果你不想糾纏與CSS，非常匆忙，並且不打算做瀏覽器測試，你應該另外找個新工作。玩笑而已，這是為你準備的。
主要好處
：直覺
程式碼：
聯絡表圖例>
| 名稱標籤>
電子郵件標籤>
> 選擇（單選）
選擇1
選擇2
選擇3 |
選項（複選框）
選擇1
選擇2
選擇3
選項1選項> 選項2選項> 選項3選項> |
|
字段集>
運行結果：
