1、css魔法
css，就是大家知道的層疊樣式單，它可以定義頁面元素的外觀，包括字型樣式、背景顏色和影象樣式、邊框樣式、補白樣式、邊界樣式等等，下面就從這幾個方面出發，討論怎樣將css應用到表單中，徹底美化它！
1.1 字型樣式的應用
字型樣式包括：字型族科(font-family)、字型風格(font-style)、字型變形(font-variant)、字型加粗(font-weight)、字型大小(font-size)、字型(font)，具體的定義方法，在這裡不詳細講述，可以參考它的資料。
也許你已經注意到，按鈕上的文字不漂亮，其實可以通過css字型樣式來解決，同樣地，其它的幾個涉及到文字的表單項，例如，文字框、多行文字框、口令框、下拉選擇框都可以應用字型樣式。
為了充分展示這些應用，下例特別設計了幾種樣式，在實際應用中，不必這麼凌亂，靈活運用：
樣例1：表單元素的字型樣式展示
html**
文字框裡的文字是加粗的，大小是9pt，字型是宋體
口令框文字是紅色的
下拉框文字顏色是紅色的，字型是verdana，大小是9pt
yesky.com
redidea.net
多行文字框了的字型是verdana，有下劃線，大小是9pt
傳送1和傳送2按鈕的文字不同，是因為傳送1按鈕使用了9pt的宋體文字，所以比較美觀
underline css style
小結：只要我們對字型的樣式熟悉了，就可以靈活多變，不一定要在標籤裡面使用style來定義，完全可以在＜head＞裡定義，或者外部引用css檔案，用到的時候引用一下就能達到預期的效果。
1.2 背景顏色和影象樣式的應用
有很多時候，網頁由於顏色的搭配，不得不對表單的背景顏色和影象樣式進行設計，背景顏色利用background-color屬性，背景影象利用background-image屬性，顏色和影象同樣能夠得到意想不到的效果。
樣例2：表單元素的背景展示
html**
文字框背景是黑色的，字型是白色的
口令框背景是灰色的
單選和複選按鈕的背景是紅色的
下拉選擇框的選項是豐富多彩的背景
yesky.com
redidea.com
chinabyte.com
sina.com
sohu.com
多行文字框的背景是乙個影象
submit1按鈕的背景是黃色的
submit2按鈕的背景是乙個影象
小結：用好background-color屬性和background-image屬性，就可以設計很出「色」表單了。
1.3 邊框樣式的應用
也許你覺得表單的邊框過於死板，我們能否設計單線條，或者其它的邊框樣式呢？當然可以！
和邊框有關的屬性有：邊框式樣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，這裡不作詳細的講述，請參考有關資料。
樣例3： 8種邊框形式的展示
html**
複選 單選
文字框有8種型別邊框樣式，即border-style，分別展示在本例中，邊框寬度的設定有乙個規律：
border-width: [ thin | medium | thick | ＜長度＞ ]
邊框寬度用一到四個值來設定元素的邊框寬度，它們分別被應用於上、右、下和左邊框寬度。如果只給出乙個值，它被應用於所有邊框寬度。如果兩個或三個值給出了，省略了的值與對邊相等
例如：程式**
邊框顏色的設定有乙個規律：border-colr: ＜顏色＞
邊框顏色用一到四個值來設定元素的邊框顏色。如果四個值都給出了，它們分別被應用於上、右、下和左邊框顏色。如果只給出乙個值，它被應用於所有邊框顏色。如果兩個或三個值給出了，省略了的值與對邊相等。
對於多行文字框以及按鈕，設定邊框的方法和文字框一樣，不再陳述；
由於下拉選擇框select不支援邊框的設定，所以對它設定是徒勞的；
單選按鈕和複選按鈕的邊框，設定的效果不十分協調，所以建議不要對它們設定，不然有「畫蛇添足」之感。
樣例4：邊框的特殊設計展示
聰明的讀者一定會想到，如果設計單邊框，一定更加漂亮，對！下面我們來嘗試以下部分邊框的設定效果，本例僅僅以solid和dotted兩種型別的邊框作演示，其它型別的邊框原理相同：
html**
注意--邊框型別的外觀如下：
none ：無邊框。與任何指定的border-width值無關；
dotted ：點線；
dashed ：虛線；
solid ：實線邊框；
double ：雙線邊框。兩條單線與其間隔的和等於指定的border-width值；
groove ：3d凹槽；
ridge ：邊框突起；
inset ：3d凹邊；
outset ：3d凸邊
2、影象魔法
影象，是網頁的重要元素，能否應用到表單中呢？接下來，我們用影象來改造死板的表單，分兩個部分來**：用影象代替按鈕、用背景圖美化表單元素。
2.1 用影象代替按鈕
當只有乙個提交按鈕的時候，可以簡單地實現，不用加事件函式，**是：
除了標籤改為input type="image"以外，其它的屬性和
html**
是不是只要用就可以代替所有的按鈕呢？是的，不過，不是上面這麼簡單了，必須加上事件函式，不然的話，都是提交按鈕，不能完成復位等功能，看看下面的例子就知道了：
html**
注意：
代替submit按鈕的**格式是
代替reset按鈕的**格式是
注：這裡的formname是表單的name屬性值。
2.2 用背景圖美化表單元素
其實，前面已經提到過，用background-image:url()屬性來定義表單元素的背景圖，這裡僅舉一例，可以看到，除了select沒有效果以外，其它的都可以配合網頁的背景來設定它們。
樣例6：背景圖的設定
html**
www.yesky.com
redidea.com
www.chinabyte.com
HTML表單樣式大全
1 css魔法 css，就是大家知道的層疊樣式單，它可以定義頁面元素的外觀，包括字型樣式 背景顏色和影象樣式 邊框樣式 補白樣式 邊界樣式等等，下面就從這幾個方面出發，討論怎樣將css應用到表單中，徹底美化它！1.1 字型樣式的應用 字型樣式包括 字型族科 font family 字型風格 font...
JavaScript 好看的表單樣式大全
1 只有下劃線的文字框 2 軟體序列號式的輸入框 3 軟體序列號式的輸入框 完整版 4 輸入框景背景透明 5 滑鼠劃過輸入框，輸入框背景色變色 6 輸入字時輸入框邊框閃爍 邊框為小方型 7 輸入字時輸入框邊框閃爍 邊框為虛線 8 自動橫向廷伸的輸入框 9 自動向下廷伸的文字框 一 按鈕樣式 butt...
HTML文字框樣式大全
貼上自christian.cao 位址 輸入框景背景透明 滑鼠劃過輸入框，輸入框背景色變色 輸入字時輸入框邊框閃爍 邊框為小方型 輸入字時輸入框邊框閃爍 邊框為虛線 自動橫向廷伸的輸入框 自動向下廷伸的文字框 只有下劃線的文字框 軟體序列號式的輸入框 軟體序列號式的輸入框 完整版 輸入框景背景透明 ...