2009-07-24

CSS 部屬經驗-表單樣式

為了 IE6 的相容這裡我不會用太新穎的選擇器,希望有一天 IE6 的使用群可以消失,這樣在排版時可以不去顧慮 IE6 的問題。

主旨:
  1. 為什麼要用<table>作表單排版
  2. HTML 結構
  3. CSS 設定


為什麼要用<table>作表單排版
下面是利用 <table> 的排版方式,雖在排版上我非常不喜歡用 <table>,但在使用很多種排版方式及撰寫 JavaScript 的使用者介面輔助後,將 <table> 用在表單上可以有比較好的樣式結構,而且在 JavaScript 的輔助開發上對版面的操作也比較不會造成跑版問題。

如果有過在表單上做過很複雜的 JavaScript 介面輔助後,你一定會瞭解我在說什麼。


實際頁面 Wacanai.com


HTML 結構

<table class="FormList" border="0" cellspacing="0" cellpadding="0">
<tr class="NotNull">
<th><label for="name">欄位名稱</label></th>
<td>
<input class="Full" type="text" value="" id="name" name="name"/>
<small class="Explain">欄位說明</small>
<div class="Error">錯誤訊息</div>
</td>
</tr>

<tr class="NotNull">
<th><label for="email">欄位名稱</label></th>
<td>
<input class="Full" type="text" value="" id="name" name="name"/>
<span class="Error">錯誤訊息</span>
<small class="Explain">欄位說明</small>
</td>
</tr>
</table>

在結構我設置了 JavaScript 會用到的訊息樣式,在下面的 CSS 設定中會先將這些訊息隱藏,之後在用 JavaScript 去處理顯示的動作,這樣的好處是 JavaScript 可以用很簡單的方法做到很複雜的介面輔助。


CSS 設定

/*讓表格寬度撐開*/
table.FormList{
width:100%;
}

/*基本的間距設定*/
table.FormList th,
table.FormList td{
padding:6px 10px 6px 4px;
}
table.FormList th{
width:25%;
text-align: right;
vertical-align:top;
font-weight:normal;
white-space:nowrap;
}

/* 必填項樣式 */
table.FormList tr.NotNull th label{
padding-left:20px;
}

/* 欄位寬度設定 */
table.FormList .Full{
width:95%;
}
table.FormList .Verify{
width:40px;
}

/*標示說明文的樣式*/
table.FormList small.Explain {
display: block;
font-size: 0.8em;
margin: 0 0 5px 0;
padding: 1px 3px;
}


/*錯誤訊息的樣式*/
table.FormList div.Error ,
table.FormList span.Error {
color: #f00;
display: none;
font-size: 1.2em;
font-weight: bold;
}
/*警示訊息的樣式*/
table.FormList div.Warning ,
table.FormList span.Warning {
color: #00f;
display: none;
font-size: 1.2em;
font-weight: bold;
}

/*套用在整列的錯誤樣式*/
table.FormList tr.Error label{
color: #F00;
}
table.FormList tr.Error textarea,
table.FormList tr.Error select,
table.FormList tr.Error input{
border: 1px solid #F00;
}



參考頁面:
Last.fm
Wacanai.com

0 回應: