網(wǎng)頁表單的Web標(biāo)準(zhǔn)解決方案

2024-04-27 13:53:20

字體：大中小

供稿：網(wǎng)友

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

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

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

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

在絕大多數(shù)情況下，表單的布局分兩列，左邊是標(biāo)記（label），右邊是輸入框(input type="text"...)。如此簡單的兩列布局，我強(qiáng)烈建議不要使用表格。參考http://stylephreak.frogrun.com/uploads/source/cssform.php和http://www.aplus.co.yu/css/forms/?css=1（絕對有價(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 對齊的一個(gè)小竅門是，固定label的寬度，然后根據(jù)需要使用text-align向左或者向右對齊。設(shè)定寬度的小竅門是，使用單位em根據(jù)標(biāo)記的最大字?jǐn)?shù)來定寬度，不必辛勞測試px。

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

以下為引用的內(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 {/*跟表單無關(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;
}