網(wǎng)頁(yè)中表單常見(jiàn)問(wèn)題解決辦法_Div+CSS教程

　　最先起草本文時(shí)，命的名字叫：“談?wù)劸W(wǎng)頁(yè)布局中表單元素的幾宗罪”接下來(lái)的內(nèi)容如下：
　　當(dāng)您看到這個(gè)標(biāo)題時(shí)，可能會(huì)覺(jué)得有點(diǎn)夸大其詞了吧！表單為我們和服務(wù)器交互提供了很好的接口，怎么說(shuō)是有罪呢？
　　當(dāng)然，表單的強(qiáng)大功能我們不可否認(rèn)，但它在布局上的棘手問(wèn)題也是讓許多人頭疼的，尤其是新手。看看論壇上的提問(wèn)，與表單相關(guān)的舉不勝舉。后來(lái)覺(jué)得這個(gè)名字不太太明了，所以就改為“網(wǎng)頁(yè)布局中表單常見(jiàn)問(wèn)題及解決辦法”。下面我就網(wǎng)頁(yè)布局中常用表單及常見(jiàn)問(wèn)題總結(jié)一下：

1、form　如果您需要提交數(shù)據(jù)，那個(gè)form標(biāo)簽是必不可少的。它標(biāo)記了數(shù)據(jù)提交的方式及處理頁(yè)面。但form默認(rèn)外補(bǔ)丁的問(wèn)題也使許多人找不著北了。如下圖，在IE6和IE7下，默認(rèn)form是有上下外補(bǔ)丁的。這樣就造成了本來(lái)想和上下內(nèi)容貼近顯示的，結(jié)果卻離的很遠(yuǎn)，有可能造成頁(yè)面錯(cuò)亂。而在火狐下卻沒(méi)有外補(bǔ)丁的。解決的辦法是在樣式表中加入form {margin:0px;}，這樣在IE和火狐下顯示都一致了。

2、寬度　當(dāng)用css定義文本框和下拉列表框的寬度相同時(shí)，文本框的寬度更大一些。

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

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

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

　　層級(jí)問(wèn)題是select是讓人更頭疼的一個(gè)地方。指的是當(dāng)有div設(shè)置居于其上時(shí)，在IE6下不能將其遮擋，select還顯示在最上層，這個(gè)問(wèn)題的解決辦法其一就是采用此例div css模擬美化的Select樣式,超經(jīng)典美化后即可（它采用隱藏真實(shí)select，用div模擬成的）。還有就是采用iframe方法。在IE6看來(lái)，如果只有div和select，無(wú)論你的z-index怎么設(shè)置,div的層永遠(yuǎn)被會(huì)被select標(biāo)簽踩在腳底，而iframe則可以爬到select頭上，所以，下面的方法之所以能解決問(wèn)題，是因?yàn)閕frame在select上方，而div搭著iframe的順風(fēng)車也爬到了select的頭上。這個(gè)問(wèn)題可以詳細(xì)參考如何讓層蓋住下拉列表框？ 問(wèn)題解決方案

4、表單和文字間的換行　此問(wèn)題出現(xiàn)在源代碼方面，當(dāng)表單后來(lái)跟的文字和表單的源代碼不在一行時(shí)，預(yù)覽時(shí)表單和文字中間會(huì)有個(gè)空格，不換行時(shí)沒(méi)有空格。但用dreamweaver默認(rèn)的代碼格式是分行顯示的，這也是出現(xiàn)表單和文字挨不著的原因。

5、文件域按鈕沒(méi)法美化　文件域在前臺(tái)制作時(shí)比較少用，在后臺(tái)制作時(shí)較長(zhǎng)用。它的美化也是難點(diǎn)，因?yàn)樗�是一個(gè)文本框和按鈕的組合。在設(shè)置背景時(shí)能同時(shí)應(yīng)用到文本框和按鈕上，邊框也是同時(shí)應(yīng)用。其它的倒沒(méi)法設(shè)置，本人暫時(shí)沒(méi)有其它設(shè)置的辦法，期待高人解決提供方法。

本站更多和表單相關(guān)的文章

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

div css表單布局的五個(gè)小技巧

JS表單提交驗(yàn)證類

有圖片預(yù)覽功能的上傳表單

怎么把表單內(nèi)輸入的中文逗號(hào)自動(dòng)轉(zhuǎn)換為英文逗號(hào)？

超強(qiáng)大的JS表單驗(yàn)證及使用方法教程(我是佛山人)

讓文本框textarea自動(dòng)適應(yīng)內(nèi)容的高度

文本框提示樣式，鼠標(biāo)點(diǎn)擊獲得焦點(diǎn)時(shí)提示內(nèi)容消失

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

如何垂直居中對(duì)齊文本與文本輸入框

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

一個(gè)不錯(cuò)的帶下拉菜單的DIV搜索條

 本人用css制作的一組立體感很強(qiáng)的按鈕樣式

按鈕onClick事件新窗口打開(kāi)和在本窗口打開(kāi)的方法

表格復(fù)選和復(fù)選變色效果