很多時(shí)候，我們僅僅為了實(shí)現(xiàn)數(shù)據(jù)采集這個(gè)功能來使用表單，常看到的表單都是“千人一面”、毫無生氣，本專題嘗試著來改變這一現(xiàn)象，試圖賦予表單一個(gè)豐富多彩的面貌。
表單的外觀，也是最為直接的花樣，可以通過改變它來實(shí)現(xiàn)特效，本文分兩個(gè)出發(fā)點(diǎn)來講述：CSS魔法和圖像魔法。
1、CSS魔法CSS，就是大家知道的層疊樣式單，它可以定義頁面元素的外觀，包括字體樣式、背景顏色和圖像樣式、邊框樣式、補(bǔ)白樣式、邊界樣式等等，下面就從這幾個(gè)方面出發(fā)，討論怎樣將CSS應(yīng)用到表單中，徹底美化它！
1.1 字體樣式的應(yīng)用 字體樣式包括：字體族科(font-family)、字體風(fēng)格(font-style)、字體變形(font-variant)、字體加粗(font-weight)、字體大小(font-size)、字體(font)，具體的定義方法，在這里不詳細(xì)講述，可以參考它的資料。
也許你已經(jīng)注意到，按鈕上的文字不漂亮，其實(shí)可以通過CSS字體樣式來解決，同樣地，其它的幾個(gè)涉及到文字的表單項(xiàng)，例如，文本框、多行文本框、口令框、下拉選擇框都可以應(yīng)用字體樣式。
為了充分展示這些應(yīng)用，下例特別設(shè)計(jì)了幾種樣式，在實(shí)際應(yīng)用中，不必這么凌亂，靈活運(yùn)用：
樣例1：表單元素的字體樣式展示
小結(jié)：只要我們對(duì)字體的樣式熟悉了，就可以靈活多變，不一定要在標(biāo)簽里面使用style來定義，完全可以在＜head＞里定義，或者外部引用CSS文件，用到的時(shí)候引用一下就能達(dá)到預(yù)期的效果。
1.2 背景顏色和圖像樣式的應(yīng)用 有很多時(shí)候，網(wǎng)頁由于顏色的搭配，不得不對(duì)表單的背景顏色和圖像樣式進(jìn)行設(shè)計(jì)，背景顏色利用background-color屬性，背景圖像利用background-image屬性，顏色和圖像同樣能夠得到意想不到的效果。
樣例2： 表單元素的背景展示
小結(jié)：用好background-color屬性和background-image屬性，就可以設(shè)計(jì)很出“色”表單了。
1.3 邊框樣式的應(yīng)用 也許你覺得表單的邊框過于死板，我們能否設(shè)計(jì)單線條，或者其它的邊框樣式呢？當(dāng)然可以！
和邊框有關(guān)的屬性有：邊框式樣border-style、上邊框border-top、右邊框border-right、下邊框border-bottom、左邊框border-left、邊框顏色border-colr、邊框?qū)挾?border-width、上邊框?qū)挾萣order-top-width、右邊框?qū)挾萣order-right-width、下邊框?qū)挾萣order-bottom-width、左邊框?qū)挾萣order-left-width、邊框 border，這里不作詳細(xì)的講述，請(qǐng)參考有關(guān)資料。
樣例3： 8種邊框形式的展示
文本框有8種類型邊框樣式，即border-style，分別展示在本例中，邊框?qū)挾鹊脑O(shè)置有一個(gè)規(guī)律：
border-width: [ thin | medium | thick | ＜長度＞ ]{1,4}
邊框?qū)挾扔靡坏剿膫€(gè)值來設(shè)置元素的邊框?qū)挾?，它們分別被應(yīng)用于上、右、下和左邊框?qū)挾?。如果只給出一個(gè)值，它被應(yīng)用于所有邊框?qū)挾?。如果兩個(gè)或三個(gè)值給出了，省略了的值與對(duì)邊相等
例如：
<input type="text" name="RedF" style="border-color: #006600; border-style: dotted; border-width: 1px">
邊框顏色的設(shè)置有一個(gè)規(guī)律：border-colr: ＜顏色＞{1,4}
邊框顏色用一到四個(gè)值來設(shè)置元素的邊框顏色。如果四個(gè)值都給出了，它們分別被應(yīng)用于上、右、下和左邊框顏色。如果只給出一個(gè)值，它被應(yīng)用于所有邊框顏色。如果兩個(gè)或三個(gè)值給出了，省略了的值與對(duì)邊相等。
對(duì)于多行文本框以及按鈕，設(shè)置邊框的方法和文本框一樣，不再陳述；
由于下拉選擇框select不支持邊框的設(shè)置，所以對(duì)它設(shè)置是徒勞的；
單選按鈕和復(fù)選按鈕的邊框，設(shè)置的效果不十分協(xié)調(diào)，所以建議不要對(duì)它們?cè)O(shè)置，不然有“畫蛇添足”之感。
樣例4：邊框的特殊設(shè)計(jì)展示 聰明的讀者一定會(huì)想到，如果設(shè)計(jì)單邊框，一定更加漂亮，對(duì)！下面我們來嘗試以下部分邊框的設(shè)置效果，本例僅僅以Solid和dotted兩種類型的邊框作演示，其它類型的邊框原理相同：
注意--邊框類型的外觀如下： none ：無邊框。與任何指定的border-width值無關(guān)；
dotted ：點(diǎn)線；
dashed ：虛線；
solid ：實(shí)線邊框；
double ：雙線邊框。兩條單線與其間隔的和等于指定的border-width值；
groove ：3D凹槽；
ridge ：邊框突起；
inset ：3D凹邊；
outset ：3D凸邊
2、圖像魔法 圖像，是網(wǎng)頁的重要元素，能否應(yīng)用到表單中呢？接下來，我們用圖像來改造死板的表單，分兩個(gè)部分來探討：用圖像代替按鈕、用背景圖美化表單元素。
2.1 用圖像代替按鈕 由于默認(rèn)的表單按鈕太丑陋，絕大多數(shù)的網(wǎng)站采用了圖像按鈕，那么，我們通過兩個(gè)實(shí)例來看看怎樣實(shí)現(xiàn)的：
樣例5：用圖像代替提交按鈕： 當(dāng)只有一個(gè)提交按鈕的時(shí)候，可以簡單地實(shí)現(xiàn)，不用加事件函數(shù)，代碼是：
<input type="image" name="..." src="url" width="" height="..." border="..."> 除了標(biāo)簽改為input type="image"以外，其它的屬性和 <img> 標(biāo)簽的屬性是一樣的，例如：
是不是只要用圖片就可以代替所有的按鈕呢？是的，不過，不是上面這么簡單了，必須加上事件函數(shù)，不然的話，圖片都是提交按鈕，不能完成復(fù)位等功能，看看下面的例子就知道了：
注意： 代替submit按鈕的圖片代碼格式是
<input type="image" name="..." src="..." onClick="
document.formName.submit()">
代替reset按鈕的代碼圖片格式是
<input type="image" name="..." src="..." onClick="
document.formName.reset()">
注：這里的formName是表單的name屬性值。
2.2 用背景圖美化表單元素 其實(shí)，前面已經(jīng)提到過，用background-image:url()屬性來定義表單元素的背景圖，這里僅舉一例，可以看到，除了select沒有效果以外，其它的都可以配合網(wǎng)頁的背景來設(shè)置它們。
樣例6：背景圖的設(shè)置