表單一直是網頁設計裡，一門重大的學問。這裡介紹大家一些簡單的表單設計技巧，希望對大家有所幫助。
表單的邊界問題
在多數瀏覽器預設的表單樣式，會讓表單上下會有一小塊空間，如下所示：
原始碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <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> 裡，如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <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 ，我們能夠很容易地解決這個問題，我們只需設定：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <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 檔案裡加入：
1
2
3
| form {
margin: 0;
}
|
但是除非必要，否則大多數情況還是不建議大家使用表格來編排輸入欄位。
用 CSS 來編排輸入欄位
不過不使用表格的話，怎麼做表單的排版呢？
我們利用 <p> 標籤和 <label> 標籤來完成這項任務，如下所示：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <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> 的邊界去除：
1
2
3
| form {
margin: 0;
}
|
接著，我們讓 <label> 變成浮動，並固定它的寬度為 100px ，當然你可以視你的標籤文字寬度來決定。
1
2
3
4
| form label {
float: left;
width: 100px;
}
|
最後，為了不讓接下來的輸入欄位被上一層的浮動 <label> 影響，我們再設定 <form> 裡的 <p> 標籤：
1
2
3
| form p {
clear: both;
}
|
這樣一來，就如下圖所示：
是不是很簡單呢？
當然，除了不用表格之外，這樣的表單我還加上點選文字標籤 <label> ，或是利用鍵盤上的 [ALT] 加上數字鍵，就能夠將輸入焦點自動放到對應的 <input> 欄位上。這些都是無障礙網頁規範裡的一小部份，大家可以多多留意喔。