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

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

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

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

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

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

以下為引用的內(nèi)容： XHTML：（部分） <form> <fieldset> <legend>表單實例</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 {/*跟表單無關(guān)，設(shè)置頁面的顯示效果*/ 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; }