網頁設計之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>
運行結果: 上一頁1 2 下一頁閱讀全文