文本框里的文字是加粗的，大小是9pt，字體是宋體，代碼：

＜input type= text name= formExam size= 10 maxlength= 10 >
口令框文字是紅色的，代碼：
＜input type= password name= formExam3 >
下拉框文字顏色是紅色的，字體是Verdana，大小是9pt，代碼：
＜select name= select size= 1 >
多行文本框了的字體是Verdana，有下劃線，大小是9pt，代碼：
＜TEXTAREA name= formExam2 cols= 30 rows= 3 >
發送1和發送2按鈕的文字不同，是因為發送1按鈕使用了9pt的宋體文字，所以比較美觀，發送1按鈕的代碼：
＜input type= submit name= Submit html' target='_blank'>value= 發送1 >

 小結：只要我們對字體的樣式熟悉了，就可以靈活多變，不一定要在標簽里面使用style來定義，完全可以在＜head＞里定義，或者外部引用CSS文件，用到的時候引用一下就能達到預期的效果。 

1.2 背景顏色和圖像樣式的應用

 有很多時候，網頁由于顏色的搭配，不得不對表單的背景顏色和圖像樣式進行設計，背景顏色利用background-color屬性，背景圖像利用background-image屬性，顏色和圖像同樣能夠得到意想不到的效果。

 樣例13： 表單元素的背景展示 

 分析： 
文本框背景是黑色的，字體是白色的，代碼：
＜input type= text name= RedFld size= 10 maxlength= 10 >
口令框背景是灰色的，代碼：
＜input type= password name= RedFld3 size= 10 maxlength= 10 >
單選和復選按鈕的背景是紅色的，代碼：
＜input type= checkbox name= checkbox value= checkbox >
下拉選擇框的選項是豐富多彩的背景，代碼：
＜select name= select2 size= 1 ＞＜option selected >
多行文本框的背景是一個圖像，代碼：
＜TEXTAREA name= RedFld2 cols= 25 rows= 3 wrap= VIRTUAL >
submit1按鈕的背景是黃色的，代碼：
＜input type= submit name= Submit3 value= Submit1 >
submit2按鈕的背景是一個圖像，代碼：
＜input type= submit name= Submit22 value= 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，這里不作詳細的講述，請參考有關資料。

 樣例14： 8種邊框形式的展示 
 分析：
文本框有8種類型邊框樣式，即border-style，分別展示在本例中，
邊框寬度的設置有一個規律：
border-width: [ thin | medium | thick | ＜長度＞ ]{1,4}
邊框寬度用一到四個值來設置元素的邊框寬度，它們分別被應用于上、右、下和左邊框寬度。如果只給出一個值，它被應用于所有邊框寬度。如果兩個或三個值給出了，省略了的值與對邊相等
例如：
＜input type= text name= RedF >
邊框顏色的設置有一個規律：
border-colr: ＜顏色＞{1,4}
邊框顏色用一到四個值來設置元素的邊框顏色。如果四個值都給出了，它們分別被應用于上、右、下和左邊框顏色。如果只給出一個值，它被應用于所有邊框顏色。如果兩個或三個值給出了，省略了的值與對邊相等。
對于多行文本框以及按鈕，設置邊框的方法和文本框一樣，不再陳述；
由于下拉選擇框Select不支持邊框的設置，所以對它設置是徒勞的；
單選按鈕和復選按鈕的邊框，設置的效果不十分協調，所以建議不要對它們設置，不然有“畫蛇添足”之感；

 樣例15：邊框的特殊設計展示

 聰明的讀者一定會想到，如果設計單邊框，一定更加漂亮，對！下面我們來嘗試以下部分邊框的設置效果，本例僅僅以Solid和dotted兩種類型的邊框作演示，其它類型的邊框原理相同： 注意：邊框類型的外觀如下：
none ：無邊框。與任何指定的border-width值無關；
dotted ：點線；
dashed ：虛線；
solid ：實線邊框；
double ：雙線邊框。兩條單線與其間隔的和等于指定的border-width值；
groove ：3D凹槽；
ridge ：邊框突起；
inset ：3D凹邊；
outset ：3D凸邊；

 2、圖像魔法

 圖像，是網頁的重要元素，能否應用到表單中呢？接下來，我們用圖像來改造死板的表單，分兩個部分來探討：用圖像代替按鈕、用背景圖美化表單元素。

 2.1 用圖像代替按鈕

由于默認的表單按鈕太丑陋，絕大多數的網站采用了圖像按鈕，那么，我們通過兩個實例來看看怎樣實現的：

樣例16：用圖像代替提交按鈕：

 當只有一個提交按鈕的時候，可以簡單地實現，不用加事件函數，代碼是：
＜input type= image name= ... src= url width= height= ... border= ... ＞

 除了標簽改為input type= image 以外，其它的屬性和＜img＞標簽的屬性是一樣的，例如： 
 是不是只要用圖片就可以代替所有的按鈕呢？是的，不過，不是上面這么簡單了，必須加上事件函數，不然的話，圖片都是提交按鈕，不能完成復位等功能，看看下面的例子就知道了：
樣例17：用圖片代替所有的表單按鈕： 注意：
代替submit按鈕的圖片代碼格式是
＜input type= image name= ... src= ... quot;document.formName.submit() ＞
代替reset按鈕的代碼圖片格式是

注：這里的formName是表單的name屬性值。
 a href= javascript:document.formName.reset(); ＜img border=0 src= ... ＞ /a 
 2.2 用背景圖美化表單元素

 其實，前面已經提到過，用background-image:url()屬性來定義表單元素的背景圖，這里僅舉一例，可以看到，除了select沒有效果以外，其它的都可以配合網頁的背景來設置它們。
以上就是html中關于Form表單各種樣式介紹的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。