表單外觀(guān)的美化
很多時(shí)候，我們僅僅為了實(shí)現數據采集這個(gè)功能來(lái)使用表單，?？吹降谋韱味际恰扒艘幻妗?、毫無(wú)生氣，本專(zhuān)題嘗試著(zhù)來(lái)改變這一現象，試圖賦予表單一個(gè)豐富多彩的面貌。
表單的外觀(guān)，也是最為直接的花樣，可以通過(guò)改變它來(lái)實(shí)現特效，本文分兩個(gè)出發(fā)點(diǎn)來(lái)講述：CSS魔法和圖像魔法。
1、CSS魔法CSS，就是大家知道的層疊樣式單，它可以定義頁(yè)面元素的外觀(guān)，包括字體樣式、背景顏色和圖像樣式、邊框樣式、補白樣式、邊界樣式等等，下面就從這幾個(gè)方面出發(fā)，討論怎樣將CSS應用到表單中，徹底美化它！
1.1 字體樣式的應用 字體樣式包括：字體族科(font-family)、字體風(fēng)格(font-style)、字體變形(font-variant)、字體加粗(font-weight)、字體大小(font-size)、字體(font)，具體的定義方法，在這里不詳細講述，可以參考它的資料。
也許你已經(jīng)注意到，按鈕上的文字不漂亮，其實(shí)可以通過(guò)CSS字體樣式來(lái)解決，同樣地，其它的幾個(gè)涉及到文字的表單項，例如，文本框、多行文本框、口令框、下拉選擇框都可以應用字體樣式。
為了充分展示這些應用，下例特別設計了幾種樣式，在實(shí)際應用中，不必這么凌亂，靈活運用：
樣例12：表單元素的字體樣式展示
分析： - 文本框里的文字是加粗的，大小是9pt，字體是宋體，代碼：
＜input type="text" name="formExam" size="10" maxlength="10" style="font-family:宋體; font-size: 12px; font-weight: bold" value="加粗"＞ - 口令框文字是紅色的，代碼：
＜input type="password" name="formExam3" style="font-size: 9pt; color: #FF0000" size="8" maxlength="8"＞ - 下拉框文字顏色是紅色的，字體是Verdana，大小是9pt，代碼：
＜select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000"＞
＜option value="2" selected＞yesky.com＜/option＞
＜option value="1"＞redidea.net＜/option＞
＜/select＞ - 多行文本框了的字體是Verdana，有下劃線(xiàn)，大小是9pt，代碼：
＜TEXTAREA name="formExam2" cols="30" rows="3" style="font-family:Verdana, Arial; font-size: 9pt; color: #000099; text-decoration: underline" align=right＞underline css style＜/TEXTAREA＞ - 發(fā)送1和發(fā)送2按鈕的文字不同，是因為發(fā)送1按鈕使用了9pt的宋體文字，所以比較美觀(guān)，發(fā)送1按鈕的代碼：
＜input type="submit" name="Submit" value="發(fā)送1" style="font-family:宋體; font-size: 9pt;"＞
小結：只要我們對字體的樣式熟悉了，就可以靈活多變，不一定要在標簽里面使用style來(lái)定義，完全可以在＜head＞里定義，或者外部引用CSS文件，用到的時(shí)候引用一下就能達到預期的效果。
1.2 背景顏色和圖像樣式的應用
有很多時(shí)候，網(wǎng)頁(yè)由于顏色的搭配，不得不對表單的背景顏色和圖像樣式進(jìn)行設計，背景顏色利用background-color屬性，背景圖像利用background-image屬性，顏色和圖像同樣能夠得到意想不到的效果。
樣例13： 表單元素的背景展示
分析： - 文本框背景是黑色的，字體是白色的，代碼：
＜input type="text" name="RedFld" size="10" maxlength="10" style="color: #FFFFFF; background-color: #000000"＞ - 口令框背景是灰色的，代碼：
＜input type="password" name="RedFld3" size="10" maxlength="10" style="background-color: #999999"＞ - 單選和復選按鈕的背景是紅色的，代碼：
＜input type="checkbox" name="checkbox" value="checkbox" style="background-color: #FF0000"＞
＜input type="radio" name="radiobutton" value="radiobutton" style="background-color: #FF0000"＞ - 下拉選擇框的選項是豐富多彩的背景，代碼：
＜select name="select2" size="1"＞
＜option selected style="background-color: #FF0000"＞yesky.com＜/option＞
＜option style="background-color: #0000CC"＞redidea.com＜/option＞
＜option style="background-color: #009900"＞chinabyte.com＜/option＞
＜option style="background-color: #ff33cc"＞sina.com＜/option＞
＜option style="background-color: #999999"＞sohu.com＜/option＞
＜/select＞ - 多行文本框的背景是一個(gè)圖像，代碼：
＜TEXTAREA name="RedFld2" cols="25" rows="3" wrap="VIRTUAL" style="background-image: url(back.gif)"＞＜/TEXTAREA＞ - submit1按鈕的背景是黃色的，代碼：
＜input type="submit" name="Submit3" value="Submit1" style="background-color: #FF9900"＞ - submit2按鈕的背景是一個(gè)圖像，代碼：
＜input type="submit" name="Submit22" value="Submit2" style="background-image: url(back.gif)"＞
小結：用好background-color屬性和background-image屬性，就可以設計很出“色”表單了。
1.3 邊框樣式的應用
也許你覺(jué)得表單的邊框過(guò)于死板，我們能否設計單線(xiàn)條，或者其它的邊框樣式呢？當然可以！
和邊框有關(guān)的屬性有：邊框式樣border-style、上邊框border-top、右邊框border-right、下邊框border-bottom、左邊框border-left、邊框顏色border-colr、邊框寬度 border-width、上邊框寬度border-top-width、右邊框寬度border-right-width、下邊框寬度border-bottom-width、左邊框寬度border-left-width、邊框 border，這里不作詳細的講述，請參考有關(guān)資料。
樣例14： 8種邊框形式的展示
分析： - 文本框有8種類(lèi)型邊框樣式，即border-style，分別展示在本例中，
邊框寬度的設置有一個(gè)規律：
border-width: [ thin | medium | thick | ＜長(cháng)度＞ ]{1,4}
邊框寬度用一到四個(gè)值來(lái)設置元素的邊框寬度，它們分別被應用于上、右、下和左邊框寬度。如果只給出一個(gè)值，它被應用于所有邊框寬度。如果兩個(gè)或三個(gè)值給出了，省略了的值與對邊相等
例如：＜input type="text" name="RedF" style="border-color: #006600; border-style: dotted; border-width: 1px"＞
邊框顏色的設置有一個(gè)規律：
border-colr: ＜顏色＞{1,4}
邊框顏色用一到四個(gè)值來(lái)設置元素的邊框顏色。如果四個(gè)值都給出了，它們分別被應用于上、右、下和左邊框顏色。如果只給出一個(gè)值，它被應用于所有邊框顏色。如果兩個(gè)或三個(gè)值給出了，省略了的值與對邊相等。 - 對于多行文本框以及按鈕，設置邊框的方法和文本框一樣，不再陳述；
- 由于下拉選擇框Select不支持邊框的設置，所以對它設置是徒勞的；
- 單選按鈕和復選按鈕的邊框，設置的效果不十分協(xié)調，所以建議不要對它們設置，不然有“畫(huà)蛇添足”之感；
樣例15：邊框的特殊設計展示
聰明的讀者一定會(huì )想到，如果設計單邊框，一定更加漂亮，對！下面我們來(lái)嘗試以下部分邊框的設置效果，本例僅僅以Solid和dotted兩種類(lèi)型的邊框作演示，其它類(lèi)型的邊框原理相同：
注意：邊框類(lèi)型的外觀(guān)如下：
- none ：無(wú)邊框。與任何指定的border-width值無(wú)關(guān)；
- dotted ：點(diǎn)線(xiàn)；
- dashed ：虛線(xiàn)；
- solid ：實(shí)線(xiàn)邊框；
- double ：雙線(xiàn)邊框。兩條單線(xiàn)與其間隔的和等于指定的border-width值；
- groove ：3D凹槽；
- ridge ：邊框突起；
- inset ：3D凹邊；
- outset ：3D凸邊；
2、圖像魔法
圖像，是網(wǎng)頁(yè)的重要元素，能否應用到表單中呢？接下來(lái)，我們用圖像來(lái)改造死板的表單，分兩個(gè)部分來(lái)探討：用圖像代替按鈕、用背景圖美化表單元素。
2.1 用圖像代替按鈕
由于默認的表單按鈕太丑陋，絕大多數的網(wǎng)站采用了圖像按鈕，那么，我們通過(guò)兩個(gè)實(shí)例來(lái)看看怎樣實(shí)現的：
樣例16：用圖像代替提交按鈕：
當只有一個(gè)提交按鈕的時(shí)候，可以簡(jiǎn)單地實(shí)現，不用加事件函數，代碼是：
＜input type="image" name="..." src="url" width="" height="..." border="..."＞
除了標簽改為input type="image"以外，其它的屬性和＜img＞標簽的屬性是一樣的，例如：
是不是只要用圖片就可以代替所有的按鈕呢？是的，不過(guò)，不是上面這么簡(jiǎn)單了，必須加上事件函數，不然的話(huà)，圖片都是提交按鈕，不能完成復位等功能，看看下面的例子就知道了：
樣例17：用圖片代替所有的表單按鈕：
注意： - 代替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)提到過(guò)，用background-image:url()屬性來(lái)定義表單元素的背景圖，這里僅舉一例，可以看到，除了select沒(méi)有效果以外，其它的都可以配合網(wǎng)頁(yè)的背景來(lái)設置它們。
樣例18：背景圖的設置
本站僅提供存儲服務(wù)，所有內容均由用戶(hù)發(fā)布，如發(fā)現有害或侵權內容，請
點(diǎn)擊舉報。
