網站製作學習誌

表單一直是網頁設計裡，一門重大的學問。這裡介紹大家一些簡單的表單設計技巧，希望對大家有所幫助。

表單的邊界問題

在多數瀏覽器預設的表單樣式，會讓表單上下會有一小塊空間，如下所示：

原始碼如下：

<form name="form1" id="form1" method="post" action="">
 <table width="400" border="1">
   <tr>
     <td>文 字 欄 位 1</td>
     <td><input type="text" name="text1" /></td>
   </tr>
   <tr>
     <td>文字欄位2</td>
     <td><input type="text" name="text2" /></td>
   </tr>
   <tr>
     <td valign="top">多行文字欄位</td>
     <td><textarea name="text3" cols="25" rows="10"></textarea></td>
   </tr>
 </table>
</form>

所以一般在設計表單時，都會像上面這樣利用表格來編排輸入欄位，再將 <form> 標籤藏在 <table> 裡，如下：

<table width="400" border="1">
  <form name="form1" id="form1" method="post" action="">
   <tr>
     <td>文 字 欄 位 1</td>
     <td><input type="text" name="text1" /></td>
   </tr>
   <tr>
     <td>文字欄位2</td>
     <td><input type="text" name="text2" /></td>
   </tr>
   <tr>
     <td valign="top">多行文字欄位</td>
     <td><textarea name="text3" cols="25" rows="10"></textarea></td>
   </tr>
  </form>
</table>

但是這不符合 W3C 的標準，而且在 Dreamweaver 編輯時，也不容易點選表單。

透過 CSS ，我們能夠很容易地解決這個問題，我們只需設定：

<form name="form1" id="form1" method="post" action="" style="margin: 0;">
 <table width="400" border="1">
   <tr>
     <td>文 字 欄 位 1</td>
     <td><input type="text" name="text1" /></td>
   </tr>
   <tr>
     <td>文字欄位2</td>
     <td><input type="text" name="text2" /></td>
   </tr>
   <tr>
     <td valign="top">多行文字欄位</td>
     <td><textarea name="text3" cols="25" rows="10"></textarea></td>
   </tr>
 </table>
</form>

如果要讓整個網站的表單都能依此規則作用，那麼我們僅需在共用的 CSS 檔案裡加入：

form {
  margin: 0;
}

但是除非必要，否則大多數情況還是不建議大家使用表格來編排輸入欄位。

用 CSS 來編排輸入欄位

不過不使用表格的話，怎麼做表單的排版呢？

我們利用 <p> 標籤和 <label> 標籤來完成這項任務，如下所示：

<form name="form1" id="form1" method="post" action="">
<p>
  <label for="text1">文 字 欄 位 1</label>
  <input type="text" name="text1" id="text1" accesskey="1" />
</p>
<p>
  <label for="text2">文字欄位2</label>
  <input type="text" name="text2" id="text2" accesskey="2" />
</p>
<p>
  <label for="text3">多行文字欄位</label>
  <textarea name="text3" id="text3" cols="40" rows="10" accesskey="3"></textarea>
</p>
</form>

實際上的畫面如下圖：

當然這樣標籤並沒有對齊，所以我們透過 CSS 來搞定它。

首先當然是把 <form> 的邊界去除：

form {
  margin: 0;
}

接著，我們讓 <label> 變成浮動，並固定它的寬度為 100px ，當然你可以視你的標籤文字寬度來決定。

form label {
  float: left;
  width: 100px;
}

最後，為了不讓接下來的輸入欄位被上一層的浮動 <label> 影響，我們再設定 <form> 裡的 <p> 標籤：

form p {
  clear: both;
}

這樣一來，就如下圖所示：

是不是很簡單呢？

當然，除了不用表格之外，這樣的表單我還加上點選文字標籤 <label> ，或是利用鍵盤上的 [ALT] 加上數字鍵，就能夠將輸入焦點自動放到對應的 <input> 欄位上。這些都是無障礙網頁規範裡的一小部份，大家可以多多留意喔。