最先起草本文時，命的名字叫：“談談網頁布局中表單元素的幾宗罪”接下來的內容如下：
　　當您看到這個標題時，可能會覺得有點夸大其詞了吧！表單為我們和服務器交互提供了很好的接口，怎么說是有罪呢？
　　當然，表單的強大功能我們不可否認，但它在布局上的棘手問題也是讓許多人頭疼的，尤其是新手�？纯凑搲�上的提問，與表單相關的舉不勝舉。后來覺得這個名字不太太明了，所以就改為“網頁布局中表單常見問題及解決辦法”。下面我就網頁布局中常用表單及常見問題總結一下：

1、form　如果您需要提交數據，那個form標簽是必不可少的。它標記了數據提交的方式及處理頁面。但form默認外補丁的問題也使許多人找不著北了。如下圖，在IE6和IE7下，默認form是有上下外補丁的。這樣就造成了本來想和上下內容貼近顯示的，結果卻離的很遠，有可能造成頁面錯亂。而在火狐下卻沒有外補丁的。解決的辦法是在樣式表中加入form {margin:0px;}，這樣在IE和火狐下顯示都一致了。

2、寬度　當用css定義文本框和下拉列表框的寬度相同時，文本框的寬度更大一些。

　　目前，本人的解決辦法是把select的寬度定義大一樣，一點一點調整至一樣為止。如果您還有什么更好的辦法，歡迎貼出來。

　　另外一個問題就是按鈕的寬度在IE和火狐下顯示一樣，解決這個辦法就是用css定義按鈕的寬度。

3、美化和層級　這個主要針對常用的select。當用css對表單進行美化時，select對邊框和高度設置不起作用，這也是select讓人頭疼的一個地方。要想美化select，只能用其它辦法，高度可以采用把字體變大變小的方法來實現。不過可以參考本站的div css模擬美化的Select樣式,超經典這篇文章，可以把select美化成任何你想要的樣式。

　　層級問題是select是讓人更頭疼的一個地方。指的是當有div設置居于其上時，在IE6下不能將其遮擋，select還顯示在最上層，這個問題的解決辦法其一就是采用此例div css模擬美化的Select樣式,超經典美化后即可（它采用隱藏真實select，用div模擬成的）。還有就是采用iframe方法。在IE6看來，如果只有div和select，無論你的z-index怎么設置,div的層永遠被會被select標簽踩在腳底，而iframe則可以爬到select頭上，所以，下面的方法之所以能解決問題，是因為iframe在select上方，而div搭著iframe的順風車也爬到了select的頭上。這個問題可以詳細參考如何讓層蓋住下拉列表框？ 問題解決方案

4、表單和文字間的換行　此問題出現在源代碼方面，當表單后來跟的文字和表單的源代碼不在一行時，預覽時表單和文字中間會有個空格，不換行時沒有空格。但用dreamweaver默認的代碼格式是分行顯示的，這也是出現表單和文字挨不著的原因。

5、文件域按鈕沒法美化　文件域在前臺制作時比較少用，在后臺制作時較長用。它的美化也是難點，因為它是一個文本框和按鈕的組合。在設置背景時能同時應用到文本框和按鈕上，邊框也是同時應用。其它的倒沒法設置，本人暫時沒有其它設置的辦法，期待高人解決提供方法。

本站更多和表單相關的文章

DIV層被Flash或表單遮蓋的解決方法

div css表單布局的五個小技巧

JS表單提交驗證類

有圖片預覽功能的上傳表單

怎么把表單內輸入的中文逗號自動轉換為英文逗號？

超強大的JS表單驗證及使用方法教程(我是佛山人)

讓文本框textarea自動適應內容的高度

文本框提示樣式，鼠標點擊獲得焦點時提示內容消失

只有下邊框的文本輸入框樣式

如何垂直居中對齊文本與文本輸入框

綠色下載站用div模擬select下拉菜單美化效果實例

一個不錯的帶下拉菜單的DIV搜索條

 本人用css制作的一組立體感很強的按鈕樣式

按鈕onClick事件新窗口打開和在本窗口打開的方法

表格復選和復選變色效果