網頁表單的Web標準解決方案

2024-04-27 13:53:20

字體：大中小

來源：轉載

供稿：網友

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

基于易用性（accesibility）的考慮，表單的標準寫法應該在<form>和</form>之中包含fieldset和legend（說明），讓用戶明白該表單域的內容概要。簡單的結構如下：

以下為引用的內容：
<form>
<fieldset>
<legend></legend>
......
</fieldset>
</form>

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

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

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

以下為引用的內容：

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 {/*跟表單無關，設置頁面的顯示效果*/
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;
}