網頁設計之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;}
<form> <fieldset>
<legend>Contact Form</legend>
<label for="name">
Name</label>
<input id="name" name="name" size="20" />
<label for="email">Email</label>
<input id="email" name="email" size="20" />
<label for=" Choices"> Choices (radio) — <em>wrapped label</em></label>
<input name=" Choice" type="radio" /> Choice 1
<input name=" Choice" type="radio" /> Choice 2
<input name=" Choice" type="radio" /> Choice 3
<label style="margin-bottom: 0pt;" for=" Choices2"> Choices (checkbox) — <em>non-wrapped label, margin reset</em></label>
<input name=" Choice2" type="checkbox" /> Choice 1
<input name=" Choice2" type="checkbox" /> Choice 2
<input name=" Choice2" type="checkbox" /> Choice 3
<div style="height: 10px;"><!-- just to split the demo up --></div>
<label for=" Choices3"> Choices (checkbox) — <em>wrapped, hard line-break</em></label>
<input name=" Choice3" type="checkbox" /> Choice 1
<input name=" Choice3" type="checkbox" /> Choice 2
<input name=" Choice3" type="checkbox" /> Choice 3
<label for="dropdown">
Question</label>
<select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>
<label for="message">
Message
<textarea cols="36" rows="12" name="message"></textarea>
</label>
<input type="submit" value="send it" />
</fieldset>
</form>
運行結果：
#expamle1 label,#expamle1 input,#expamle1 select,#expamle1 textarea {display: block;}
#expamle1 label {margin-bottom: 10px;}
#expamle1 input[type="radio"],#expamle1 input[type="checkbox"] {display: inline;}
技術2：懶人
許多開發者采用了這種不正統但是快速簡單（用換行隔斷標記）的方法。雖然能運行，但是對你的 css 能力有害，因為你不需要任何 css 去實現它。
主要好處：快速
代碼：
<form> <fieldset>
<legend>Contact Form</legend>
<label for="name">Name</label>
<input id="name" name="name" size="20" /> <label for="email">Email</label>
<input id="email" name="email" size="20" /> <label for=" Choices"> Choices (radio)</label>
<input name=" Choice" type="radio" /> Choice 1
<input name=" Choice" type="radio" /> Choice 2
<input name=" Choice" type="radio" /> Choice 3
<label for=" Choices3"> Choices (checkbox)</label>
<input name=" Choice3" type="checkbox" /> Choice 1
<input name=" Choice3" type="checkbox" /> Choice 2
<input name=" Choice3" type="checkbox" /> Choice 3
<label for="dropdown">Question</label>
<select id="dropdown"> <optgroup label="Group of Options"></optgroup> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>
<label for="message">Message</label>
<textarea cols="36" rows="12" name="message"></textarea>
<input type="submit" value="send it" />
</fieldset>
</form>
運行結果：
上一頁
12 下一頁 閱讀全文