進(jìn)入eYou.com后，馬上就給新版的郵件界面轉(zhuǎn)化成XHTML CSS的工作，還好平時(shí)基本功還夠扎實(shí)，有條不紊的干了下來(lái)。當(dāng)然會(huì)碰到新的問(wèn)題，比如，平時(shí)做網(wǎng)頁(yè)，因?yàn)闆]有跟程序打過(guò)什么交道，較少使用表單。還好，世界還有Google，讓我可以輕松應(yīng)對(duì)新挑戰(zhàn)。一些經(jīng)驗(yàn)，寫出來(lái)大家分享。

基于易用性（accesibility）的考慮，表單的標(biāo)準(zhǔn)寫法應(yīng)該在<form>和</form>之中包含fieldset和legend（說(shuō)明），讓用戶明白該表單域的內(nèi)容概要。簡(jiǎn)單的結(jié)構(gòu)如下：

以下為引用的內(nèi)容： <form> <fieldset> <legend></legend> ...... </fieldset> </form>

在某些場(chǎng)合或許你不愿意讓也許fieldset和legend影響你的設(shè)計(jì)方案中的美觀，好辦，在CSS中把fieldset的border設(shè)置為0，legend的display設(shè)置為 none就行了。

在絕大多數(shù)情況下，表單的布局分兩列，左邊是標(biāo)記（label），右邊是輸入框(input type="text"...)。如此簡(jiǎn)單的兩列布局，我強(qiáng)烈建議不要使用表格。參考http://stylephreak.frogrun.com/uploads/source/cssform.php和http://www.aplus.co.yu/css/forms/?css=1（絕對(duì)有價(jià)值的兩個(gè)參考，你已經(jīng)可以不必往下看了），我們發(fā)現(xiàn)，Web標(biāo)準(zhǔn)通用的解決方法是，為label和input type="text"...的外圍加上一個(gè)div，并把把該div的display設(shè)置為block。把label設(shè)為float: left;（這也是要把div設(shè)置為display: block;的原因）之后就可以讓標(biāo)記跟輸入框同一行上了。讓label 對(duì)齊的一個(gè)小竅門是，固定label的寬度，然后根據(jù)需要使用text-align向左或者向右對(duì)齊。設(shè)定寬度的小竅門是，使用單位em根據(jù)標(biāo)記的最大字?jǐn)?shù)來(lái)定寬度，不必辛勞測(cè)試px。

為了使我的闡述更輕易理解，我簡(jiǎn)單寫些代碼：

以下為引用的內(nèi)容： XHTML：（部分） <form> <fieldset> <legend>表單實(shí)例</lengend> <div><label for="name">姓名：</label><input type="text" id="name" /></div> <div><label for="etc">其他等等：</label><input type="text" id="etc" /></div> <div class="submit"><input type="submit" value="提交" /></div> </fieldset> </form> CSS：（部分） body {/*跟表單無(wú)關(guān)，設(shè)置頁(yè)面的顯示效果*/ width: 400px; margin: 20px auto; font: 14px/1.5 Serif; } fieldset { border: none; border-top: 1px solid #ccc; } legend { padding: 2px; border: 1px solid #ddd; background: #ececed; } div { display: block; padding: 5px 0; } label { float: left; width: 6em; text-align: right; } .submit { margin-left: 6em; } .submit input { padding: 2px; border: 1px solid #ccc; background: #ececec; }