網(wǎng)頁(yè)設(shè)計(jì)之5中簡(jiǎn)單的XHTML網(wǎng)頁(yè)表單。 技術(shù)1：標(biāo)簽三明治

將輸入框，選擇框和文本框全部包含進(jìn) label 元素，并全部設(shè)置為塊級(jí)元素。將單選按鈕和多選框顯示方式設(shè)置為 inline 以便于它們?cè)谕恍谐霈F(xiàn)。如果你比較喜歡 label 和單選按鈕/多選框出現(xiàn)在不同行，可以選擇不把它包含在 label 里面，或者使用硬換行處理。

每種情況都在下面展示了。

當(dāng)這些看起來(lái)比較時(shí)髦的時(shí)候，W3C 事實(shí)上已經(jīng)含蓄地展示了他們的 label 例子。

主要好處：簡(jiǎn)單

代碼如下:

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>

運(yùn)行結(jié)果：

#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;}

技術(shù)2：懶人

許多開(kāi)發(fā)者采用了這種不正統(tǒng)但是快速簡(jiǎn)單（用換行隔斷標(biāo)記）的方法。雖然能運(yùn)行，但是對(duì)你的 css 能力有害，因?yàn)槟悴恍枰魏?css 去實(shí)現(xiàn)它。

主要好處：快速

代碼如下:

<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>

運(yùn)行結(jié)果：

網(wǎng)頁(yè)設(shè)計(jì)之5中簡(jiǎn)單的XHTML網(wǎng)頁(yè)表單。 技術(shù)3：語(yǔ)義先生

web 標(biāo)準(zhǔn)的信條之一就是考慮數(shù)據(jù)類(lèi)型和與之對(duì)應(yīng)的代碼。既然表單是一個(gè)連續(xù)的問(wèn)題列表，那么有序列表用在這里就非常貼切。

主要好處： 結(jié)構(gòu)化

代碼如下:

ol { list-style: none; padding-left: 0; } <form> <fieldset> <legend>Contact Form</legend> <ol> <li> <label for="name">Name</label> <input id="name" name="name" size="20" /></li> <li> <label for="email">Email</label> <input id="email" name="email" size="20" /></li> <li> <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</li> <li> <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</li> <li> <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></li> <li> <label for="message">Message</label><textarea cols="36" rows="12" name="message"></textarea></li> <li> <input type="submit" value="send it" /></li> </ol> </fieldset> </form>

運(yùn)行結(jié)果：

#example3 ol {

list-style: none;

padding-left: 0;

}

技術(shù)4：分而治之

假如你采取將橫向表單，需要何種形式？很多情況（客戶）會(huì)要求橫向表單。我們可以依賴的是老伙伴 div，只需要把表單分割成多欄。利用標(biāo)簽三明治方法我們可以很容易的實(shí)現(xiàn)。

主要好處：空間的利用

代碼如下:

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; } <form> <fieldset> <legend>Contact Form</legend> <div class="form-column"> <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</div> <!-- /form-column --> <div class="form-column"> <label for=" Choices3"> Choices (radio)</label> <input name=" Choice2" type="radio" /> Choice 1 <input name=" Choice2" type="radio" /> Choice 2 <input name=" Choice2" type="radio" /> Choice 3 <label for=" Choices3"> Choices (checkbox)</label> <input name=" Choice2" type="checkbox" /> Choice 1 <input name=" Choice2" type="checkbox" /> Choice 2 <input name=" Choice2" 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> <input type="submit" value="send it" /></div> <!-- /form-column --> </fieldset> </form>

運(yùn)行結(jié)果：

#Example4 label,#Example4 input, #Example4 select, #Example4 textarea {display: block;}

#Example4 label {margin-bottom: 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;

}

技術(shù)5：老學(xué)究似的懶人

如果你不想糾纏與 CSS，非常匆忙，并且不打算做瀏覽器測(cè)試，你應(yīng)該另外找個(gè)新工作。玩笑而已，這個(gè)是為你準(zhǔn)備的。

主要好處：直觀

代碼如下:

<form> <fieldset> <legend>Contact Form</legend> <table border="0"> <tbody> <tr><!-- column one --> <td><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</td> <!-- column two --> <td><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></td> <!-- column three --> <td><label for="message">Message</label> <input type="submit" value="send it" /></td> </tr> </tbody></table> </fieldset> </form>