網頁設計5種簡單的XHTML網頁表單_HTML/Xhtml_網頁製作

網頁設計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;}

Contact Form

Name Email Choices (radio) — wrapped label Choice 1 Choice 2 Choice 3 Choices (checkbox) — non-wrapped label, margin reset Choice 1 Choice 2 Choice 3

Choices (checkbox) — wrapped, hard line-break Choice 1 Choice 2 Choice 3 Question Option 1 Option 2 Option 3 Message

運行結果：
#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
4. 選項（複選框） 選擇1 選擇2 選擇3
5. 問題 選項1選項> 選項2選項> 選項3選項>
6. 訊息標籤>

字段集>
運行結果：
#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; }

Contact Form

Name Email Choices (radio) Choice 1 Choice 2 Choice 3

Choices (radio) Choice 1 Choice 2 Choice 3 Choices (checkbox) Choice 1 Choice 2 Choice 3 Question Option 1 Option 2 Option 3

運行結果：
#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選項> 訊息 字段集>
運行結果：