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