本專題從最基礎(chǔ)的表單知識，到表單的高級應(yīng)用，讓你有一個比較全面地認識，相信你在讀完本專題以后，一定會對表單非常熟悉。
一、表單概述
表單，在網(wǎng)頁中的作用不可小視，主要負責(zé)數(shù)據(jù)采集的功能，比如你可以采集訪問者的名字和e－mail地址、調(diào)查表、留言簿等等。
表單的組成
一個表單有三個基本組成部分：
表單標簽：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。
表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。
表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。
為了顧及不同的網(wǎng)頁設(shè)計工具，本文只講述代碼的設(shè)計，不具體講述操作方法，下面就是表單的HTML代碼設(shè)計要點：
1.1 表單標簽＜form＞＜/form＞
功能：用于申明表單，定義采集數(shù)據(jù)的范圍，也就是＜form＞和＜/form＞里面包含的數(shù)據(jù)將被提交到服務(wù)器或者電子郵件里。
語法：＜FORM ACTION="URL" METHOD="GET|POST" ENCTYPE="MIME" TARGET="..."＞. . .＜/FORM＞
屬性解釋見下表：
action=url 指定一來處理提交表單的格式.它可以是一個URL地址(提交給程式)或一個電子郵件地址。
method=get或post 指明提交表單的HTTP方法.可能的值為：
post：POST方法在表單的主干包含名稱/值對并且無需包含于action特性的URL中.
get：不贊成。GET方法把名稱/值對加在action的URL后面并且把新的URL送至服務(wù)器.這是往前兼容的缺省值.這個值由于國際化的原因不贊成使用.
enctype=cdata 指定提交的結(jié)果文檔顯示的位置：
_blank ：在一個新的、無名瀏覽器窗口調(diào)入指定的文檔；
_self ：在指向這個目標的無素的相同的框架中調(diào)入文檔；
_parent ：把文檔調(diào)入當前框的直接的父FRAMESET框中；這個值在當前框沒有父框時等價于_self；
_top ：把文檔調(diào)入原來的最頂部的瀏覽器窗口中(因此取消所有其它框架)；這個值等價于當前框沒有你框時的_self.
例如：＜form action="http://www.yesky.com/test.asp" method="post" target="_blank"＞...＜/form＞
表示表單將向http://www.yesky.com/test.asp以post的方式提交，提交的結(jié)果在新的頁面顯示，數(shù)據(jù)提交的媒體方式是默認的application/x-www-form-urlencoded方式；
1.2 表單域
表單域包含了文本框、多行文本框、密碼框、隱藏域、復(fù)選框、單選框和下拉選擇框等，用于采集用戶的輸入或選擇的數(shù)據(jù)，下面分別講述這些表單域的代碼格式：
1.2.1 文本框
文本框是一種讓訪問者自己輸入內(nèi)容的表單對象，通常被用來填寫單個字或者簡短的回答，如姓名、地址等。
代碼格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞
屬性解釋：
type="text"定義單行文本輸入框；
name屬性定義文本框的名稱，要保證數(shù)據(jù)的準確采集，必須定義一個獨一無二的名稱；
size屬性定義文本框的寬度，單位是單個字符寬度；
maxlength屬性定義最多輸入的字符數(shù)。
value屬性定義文本框的初始值
（觀看效果頁樣例1）
樣例1代碼：＜input type="text" name="example1" size="20" maxlength="15"＞
1.2.2 多行文本框
也是一種讓訪問者自己輸入內(nèi)容的表單對象，只不過能讓訪問者填寫較長的內(nèi)容。
代碼格式：＜TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"＞＜/TEXTAREA＞
屬性解釋：
name屬性定義多行文本框的名稱，要保證數(shù)據(jù)的準確采集，必須定義一個獨一無二的名稱；
cols屬性定義多行文本框的寬度，單位是單個字符寬度；
rows屬性定義多行文本框的高度，單位是單個字符寬度；
wrap屬性定義輸入內(nèi)容大于文本域時顯示的方式，可選值如下：
默認值是文本自動換行；當輸入內(nèi)容超過文本域的右邊界時會自動轉(zhuǎn)到下一行，而數(shù)據(jù)在被提交處理時自動換行的地方不會有換行符出現(xiàn)；
Off，用來避免文本換行，當輸入的內(nèi)容超過文本域右邊界時，文本將向左滾動，必須用Return才能將插入點移到下一行；
Virtual，允許文本自動換行。當輸入內(nèi)容超過文本域的右邊界時會自動轉(zhuǎn)到下一行，而數(shù)據(jù)在被提交處理時自動換行的地方不會有換行符出現(xiàn)；
Physical，讓文本換行，當數(shù)據(jù)被提交處理時換行符也將被一起提交處理。
（觀看效果頁樣例2）
樣例2代碼：＜TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"＞＜/TEXTAREA＞
1.2.3 密碼框
是一種特殊的文本域，用于輸入密碼。當訪問者輸入文字時，文字會被星號或其它符號代替，而輸入的文字會被隱藏。
代碼格式：＜input type="password" name="..." size="..." maxlength="..."＞
屬性解釋：
type="password"定義密碼框；
name屬性定義密碼框的名稱，要保證數(shù)據(jù)的準確采集，必須定義一個獨一無二的名稱；
size屬性定義密碼框的寬度，單位是單個字符寬度；
maxlength屬性定義最多輸入的字符數(shù)。
（觀看效果頁樣例3）
樣例3代碼：＜input type="password" name="example3" size="20" maxlength="15"＞
1.2.4 隱藏域
隱藏域是用來收集或發(fā)送信息的不可見元素，對于網(wǎng)頁的訪問者來說，隱藏域是看不見的。當表單被提交時，隱藏域就會將信息用你設(shè)置時定義的名稱和值發(fā)送到服務(wù)器上。
代碼格式：＜input type="hidden" name="..." value="..."＞
屬性解釋：
type="hidden"定義隱藏域；
name屬性定義隱藏域的名稱，要保證數(shù)據(jù)的準確采集，必須定義一個獨一無二的名稱；
value屬性定義隱藏域的值
例如：＜input type="hidden" name="ExPws" value="dd"＞
1.2.5 復(fù)選框
復(fù)選框允許在待選項中選中一項以上的選項。每個復(fù)選框都是一個獨立的元素，都必須有一個唯一的名稱。
代碼格式：＜INPUT type="checkbox" name="..." value="..."＞
屬性解釋：
type="checkbox"定義復(fù)選框；
name屬性定義復(fù)選框的名稱，要保證數(shù)據(jù)的準確采集，必須定義一個獨一無二的名稱；
value屬性定義復(fù)選框的值
（觀看效果頁樣例4）
樣例4代碼：
＜input type="checkbox" name="yesky" value="09"＞yesky.com
＜input type="checkbox" name="Chinabyte" value="08"＞Chinabyte.com
1.2.7 文件上傳框
有時候，需要用戶上傳自己的文件，文件上傳框看上去和其它文本域差不多，只是它還包含了一個瀏覽按鈕。訪問者可以通過輸入需要上傳的文件的路徑或者點擊瀏覽按鈕選擇需要上傳的文件。
注意：在使用文件域以前，請先確定你的服務(wù)器是否允許匿名上傳文件。表單標簽中必須設(shè)置ENCTYPE="multipart/form-data"來確保文件被正確編碼；另外，表單的傳送方式必須設(shè)置成POST。
代碼格式：＜input type="file" name="..." size="15" maxlength="100"＞
屬性解釋：
type="file"定義文件上傳框；
name屬性定義文件上傳框的名稱，要保證數(shù)據(jù)的準確采集，必須定義一個獨一無二的名稱；
size屬性定義文件上傳框的寬度，單位是單個字符寬度；
maxlength屬性定義最多輸入的字符數(shù)。
（觀看效果頁樣例5）
樣例5代碼：＜input type="file" name="myfile" size="15" maxlength="100"＞
1.2.8 下拉選擇框
下拉選擇框允許你在一個有限的空間設(shè)置多種選項。
代碼格式：
＜select name="..." size="..." multiple＞
＜option value="..." selected＞...＜/option＞
...
＜/select＞
屬性解釋：
size屬性定義下拉選擇框的行數(shù)；
name屬性定義下拉選擇框的名稱；
multiple屬性表示可以多選，如果不設(shè)置本屬性，那么只能單選；
value屬性定義選擇項的值；
selected屬性表示默認已經(jīng)選擇本選項。
（觀看效果頁樣例6）
樣例6代碼：
＜select name="mySel" size="1"＞
＜option value="1" selected＞yesky.com＜/option＞
＜option value="d2"＞chinabyte.com＜/option＞
＜/select＞
（觀看效果頁樣例7）
按Ctrl可以多選
樣例7代碼：
＜select name="mySelt" size="3" multiple＞
＜option value="1" selected＞yesky.com＜/option＞
＜option value="d2"＞chinabyte.com＜/option＞
＜option value="3"＞internet.com＜/option＞
＜/select＞
1.3 表單按鈕
表單按鈕控制表單的運作。
1.3.1 提交按鈕
提交按鈕用來將輸入的信息提交到服務(wù)器。
代碼格式：＜input type="submit" name="..." value="..."＞
屬性解釋：
type="submit"定義提交按鈕；
name屬性定義提交按鈕的名稱；
value屬性定義按鈕的顯示文字；
（觀看效果頁樣例8）
樣例8代碼：＜input type="submit" name="mySent" value="發(fā)送"＞
1.3.2 復(fù)位按鈕
復(fù)位按鈕用來重置表單。
代碼格式：＜input type="reset" name="..." value="..."＞
屬性解釋：
type="reset"定義復(fù)位按鈕；
name屬性定義復(fù)位按鈕的名稱；
value屬性定義按鈕的顯示文字；
（觀看效果頁樣例9）
樣例9代碼：＜input type="reset" name="myCancle" value="取消"＞
1.3.3 一般按鈕
一般按鈕用來控制其他定義了處理腳本的處理工作。
代碼格式：＜input type="button" name="..." value="..." onClick="..."＞
屬性解釋：
type="button"定義一般按鈕；
name屬性定義一般按鈕的名稱；
value屬性定義按鈕的顯示文字；
onClick屬性，也可以是其它的事件，通過指定腳本函數(shù)來定義按鈕的行為；
（觀看效果頁樣例10）
樣例10代碼：＜input type="button" name="myB" value="保存" onClick="javascript:alert('it is a example button!')"＞
二、表單外觀的美化
很多時候，我們僅僅為了實現(xiàn)數(shù)據(jù)采集這個功能來使用表單，常看到的表單都是“千人一面”、毫無生氣，本專題嘗試著來改變這一現(xiàn)象，試圖賦予表單一個豐富多彩的面貌。
表單的外觀，也是最為直接的花樣，可以通過改變它來實現(xiàn)特效，本文分兩個出發(fā)點來講述：CSS魔法和圖像魔法。
1、CSS魔法
CSS，就是大家知道的層疊樣式單，它可以定義頁面元素的外觀，包括字體樣式、背景顏色和圖像樣式、邊框樣式、補白樣式、邊界樣式等等，下面就從這幾個方面出發(fā)，討論怎樣將CSS應(yīng)用到表單中，徹底美化它！
1.1 字體樣式的應(yīng)用
字體樣式包括：字體族科(font-family)、字體風(fēng)格(font-style)、字體變形(font-variant)、字體加粗(font-weight)、字體大小(font-size)、字體(font)，具體的定義方法，在這里不詳細講述，可以參考它的資料。
也許你已經(jīng)注意到，按鈕上的文字不漂亮，其實可以通過CSS字體樣式來解決，同樣地，其它的幾個涉及到文字的表單項，例如，文本框、多行文本框、口令框、下拉選擇框都可以應(yīng)用字體樣式。
為了充分展示這些應(yīng)用，下例特別設(shè)計了幾種樣式，在實際應(yīng)用中，不必這么凌亂，靈活運用：
（觀看效果頁樣例11）
分析：
文本框里的文字是加粗的，大小是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，有下劃線，大小是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的宋體文字，所以比較美觀，發(fā)送1按鈕的代碼：
＜input type="submit" name="Submit" value="發(fā)送1" style="font-family:宋體; font-size: 9pt;"＞
小結(jié)：只要我們對字體的樣式熟悉了，就可以靈活多變，不一定要在標簽里面使用style來定義，完全可以在＜head＞里定義，或者外部引用CSS文件，用到的時候引用一下就能達到預(yù)期的效果。
1.2 背景顏色和圖像樣式的應(yīng)用
有很多時候，網(wǎng)頁由于顏色的搭配，不得不對表單的背景顏色和圖像樣式進行設(shè)計，背景顏色利用background-color屬性，背景圖像利用background-image屬性，顏色和圖像同樣能夠得到意想不到的效果。
（觀看效果頁樣例12）
分析：
文本框背景是黑色的，字體是白色的，代碼：
＜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"＞
單選和復(fù)選按鈕的背景是紅色的，代碼：
＜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＞
多行文本框的背景是一個圖像，代碼：
＜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按鈕的背景是一個圖像，代碼：
＜input type="submit" name="Submit22" value="Submit2" style="background-image: url(back.gif)"＞
小結(jié)：用好background-color屬性和background-image屬性，就可以設(shè)計很出“色”表單了。
1.3 邊框樣式的應(yīng)用
也許你覺得表單的邊框過于死板，我們能否設(shè)計單線條，或者其它的邊框樣式呢？當然可以！
和邊框有關(guān)的屬性有：邊框式樣border-style、上邊框border-top、右邊框border-right、下邊框border-bottom、左邊框border-left、邊框顏色border-colr、邊框?qū)挾?border-width、上邊框?qū)挾萣order-top-width、右邊框?qū)挾萣order-right-width、下邊框?qū)挾萣order-bottom-width、左邊框?qū)挾萣order-left-width、邊框 border，這里不作詳細的講述，請參考有關(guān)資料。
（觀看效果頁樣例13）
分析：
文本框有8種類型邊框樣式，即border-style，分別展示在本例中，邊框?qū)挾鹊脑O(shè)置有一個規(guī)律：
border-width: [ thin | medium | thick | ＜長度＞ ]{1,4}
邊框?qū)挾扔靡坏剿膫€值來設(shè)置元素的邊框?qū)挾龋鼈兎謩e被應(yīng)用于上、右、下和左邊框?qū)挾取Ｈ绻唤o出一個值，它被應(yīng)用于所有邊框?qū)挾取Ｈ绻麅蓚€或三個值給出了，省略了的值與對邊相等
例如：＜input type="text" name="RedF" style="border-color: #006600; border-style: dotted; border-width: 1px"＞
邊框顏色的設(shè)置有一個規(guī)律：border-color: ＜顏色＞{1,4}
邊框顏色用一到四個值來設(shè)置元素的邊框顏色。如果四個值都給出了，它們分別被應(yīng)用于上、右、下和左邊框顏色。如果只給出一個值，它被應(yīng)用于所有邊框顏色。如果兩個或三個值給出了，省略了的值與對邊相等。
對于多行文本框以及按鈕，設(shè)置邊框的方法和文本框一樣，不再陳述；
由于下拉選擇框Select不支持邊框的設(shè)置，所以對它設(shè)置是徒勞的；
單選按鈕和復(fù)選按鈕的邊框，設(shè)置的效果不十分協(xié)調(diào)，所以建議不要對它們設(shè)置，不然有“畫蛇添足”之感；
邊框的特殊設(shè)計展示
聰明的讀者一定會想到，如果設(shè)計單邊框，一定更加漂亮，對！下面我們來嘗試以下部分邊框的設(shè)置效果，本例僅僅以Solid和dotted兩種類型的邊框作演示，其它類型的邊框原理相同：
（觀看效果頁樣例14）
代碼：style="background-color: #FFFFFF; border-color: #000099; border-style: solid; border-width: 0px 0px 1px"
（觀看效果頁樣例15）
代碼：style="background-color: #FFFFFF; border-color: #CCCCCC black #FF0000; border-style: solid; border-width: 1px 0px"
（觀看效果頁樣例16）
代碼：style="background-color: #FFFFFF;border-left: 1px dotted #ff0000; border-right: 1px dotted #ff0000; border-top: 1px dotted #ff0000; border-bottom:1px solid #000000"
注意：邊框類型的外觀如下：
none ：無邊框。與任何指定的border-width值無關(guān)；
dotted ：點線；
dashed ：虛線；
solid ：實線邊框；
double ：雙線邊框。兩條單線與其間隔的和等于指定的border-width值；
groove ：3D凹槽；
ridge ：邊框突起；
inset ：3D凹邊；
outset ：3D凸邊；
2、圖像魔法
圖像，是網(wǎng)頁的重要元素，能否應(yīng)用到表單中呢？接下來，我們用圖像來改造死板的表單，分兩個部分來探討：用圖像代替按鈕、用背景圖美化表單元素。
2.1 用圖像代替按鈕
由于默認的表單按鈕太丑陋，絕大多數(shù)的網(wǎng)站采用了圖像按鈕，那么，我們通過兩個實例來看看怎樣實現(xiàn)的：
用圖像代替提交按鈕：
當只有一個提交按鈕的時候，可以簡單地實現(xiàn)，不用加事件函數(shù)，代碼是：
＜input type="image" name="..." src="url" width="" height="..." border="..."＞
除了標簽改為input type="image"以外，其它的屬性和＜img＞標簽的屬性是一樣的。
（觀看效果頁樣例17）
是不是只要用圖片就可以代替所有的按鈕呢？是的，不過，不是上面這么簡單了，必須加上事件函數(shù)，不然的話，圖片都是提交按鈕，不能完成復(fù)位等功能，看看下面的例子就知道了：
用圖片代替所有的表單按鈕：
（觀看效果頁樣例18）
注意：
代替submit按鈕的圖片代碼格式是
＜input type="image" name="..." src="..." onClick="document.formName.submit()"＞
代替reset按鈕的代碼圖片格式是
＜input type="image" name="..." src="..." onClick="document.formName.reset()"＞
注：這里的formName是表單的name屬性值。
2.2 用背景圖美化表單元素
其實，前面已經(jīng)提到過，用background-image:url()屬性來定義表單元素的背景圖，這里僅舉一例，可以看到，除了select沒有效果以外，其它的都可以配合網(wǎng)頁的背景來設(shè)置它們。
背景圖的設(shè)置
（觀看效果頁樣例19）
三、表單的提交
既然表單是用來采集用戶輸入的數(shù)據(jù)，那么，就應(yīng)該保證用戶的數(shù)據(jù)被準確地提交到預(yù)定的地點，也就是說，我們在表單提交的時候，應(yīng)該對用戶的數(shù)據(jù)進行檢驗，一來可以避免用戶誤輸數(shù)據(jù)，二來可以避免用戶輸入非法的，或者說不合格的數(shù)據(jù)；檢驗合格以后，還要保證用戶的數(shù)據(jù)提交到特定的程序。
1．數(shù)據(jù)的檢驗
數(shù)據(jù)的檢驗，通常有兩種程序：客戶端檢驗和服務(wù)器端檢驗。客戶端檢驗，比較快，服務(wù)器端檢驗，相對來說比較慢，為了確保安全，通常同時采用，這樣就可以避免用戶刻意破壞。
不管采用什么方式，數(shù)據(jù)檢驗的原理都是一樣的，一旦用戶輸入的數(shù)據(jù)不符合規(guī)定，就報錯，要求用戶重新輸入，客戶端檢驗常使用Javascrip腳本，服務(wù)器端的視系統(tǒng)而定，本文不對數(shù)據(jù)檢驗的具體程序設(shè)計進行探討，僅僅列舉幾個例子來說明。
必填項，以及簡單的數(shù)據(jù)類型檢驗
（觀看效果頁樣例20）
分析：
本例給表單添加了onSubmit事件，通過onSubmit="return CheckDate()"指定提交前，必須通過函數(shù)CheckDate()來檢驗，如果不合格，返回輸入數(shù)據(jù)；
數(shù)據(jù)檢驗的函數(shù)如下：
＜script＞
function CheckDate(){
//取得輸入的數(shù)據(jù)
userName = document.RedForm.userName.value;
userEmail = document.RedForm.userEmail.value;
//如果沒有輸入姓名
if (userName=="") {
alert("請輸入姓名");
document.RedForm.userName.focus();
return false;
}else{
//如果沒有輸入Email，或者Email地址錯誤(不含@)
if ((userEmail=="")||(userEmail.indexOf("@")==-1)) {
alert("請重新輸入Email地址");
document.RedForm.userEmail.focus();
return false;
}else return true;
}
}
＜/script＞
2．表單的分支提交
有的時候，表單需要根據(jù)用戶的選擇，提交到不同的程序，怎么做呢？
通過腳本來檢測用戶的選擇分支，從而向不同的程序提交表單，看看樣例：
分支提交
（觀看效果頁樣例21）
分析：這里首先用到的是form的onSubmit="TwoSubmit(this)"，然后根據(jù)選擇的分支，來分別遞交到不同的程序，TwoSubmit()函數(shù)如下：
＜script＞
function TwoSubmit(form){
if (form.Ref[0].checked){
form.action = "cop.asp";//這里是分支一
}else{
form.action = "ind.asp";//這里是分支二
}
form.submit();
}
＜/script＞
3．用任何元素提交表單
是不是只有按鈕或者圖片按鈕才能提交表單呢？當然不是，實際上，任何頁面元素都可以提交表單，不過嘛，都是通過腳本來完成的，下面我們就使用鏈接來代替Submit按鈕：
用鏈接來提交表單
（觀看效果頁樣例22）
分析：
通過onClick="document.form.submit()"來提交表單；用onClick="document.form.reset()"來復(fù)位表單，這樣一來，任何一個元素都可以實現(xiàn)提交表單了。
四、表單的常用技巧
這些常用技巧，往往是和事件以及腳本聯(lián)系在一起，本文注重功能，至于腳本，就不一一詳細分析。常見的技巧有：下拉跳轉(zhuǎn)菜單，表單內(nèi)容的聚焦。
1．下拉跳轉(zhuǎn)菜單
在Dreamweaver中，可以很方便地建立基于表單的下拉菜單，為了兼顧非Dreamweaver用戶，這里講述一下這種技巧。
基于表單的下拉跳轉(zhuǎn)菜單
（觀看效果頁樣例23）
分析：實際上，這里用到了一個函數(shù)，用于向選擇的地址跳轉(zhuǎn)，
＜script language="JavaScript"＞
function FormMenu(targ,selObj,restore){
eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
if (restore) selObj.selectedIndex=0;
}
＜/script＞
然后，給下拉選擇框賦予一個事件onChange="FormMenu('parent',this,0)"，就可以了。
2．表單內(nèi)容的聚焦
內(nèi)容聚焦，常用在Copy&Paste類網(wǎng)站上，用的好的話，可以方便用戶。
內(nèi)容自動聚焦
（觀看效果頁樣例24）
分析：上面分別使用了兩個事件，Email的是onFocus="this.value=''"，自動選擇的是onMouseOver="this.select()"
3．去掉表格和表單間的空隙
表格和表單的空隙處理
（觀看效果頁樣例25）
表格，我們常用來構(gòu)架頁面，可是，表格里的表單總是和表格的內(nèi)容有一個空隙。
分析：為什么沒有空隙呢，看看右邊的代碼就知道了。
＜table width="100%" border="1" cellspacing="1" cellpadding="1"＞
＜tr＞
＜form name="form3" method="post" action=""＞
＜td＞ ＜input type="text" name="textfield2"＞＜br＞
＜input type="submit" name="Submit22" value="Submit"＞
這里沒有空隙 ＜/td＞
＜/form＞
＜/tr＞
＜/table＞
也就是說，把＜form＞標簽放到＜tr＞和＜td＞中間，對應(yīng)的＜/form＞放在＜/td＞和＜/tr＞中間！
4．用Email提交表單(只適合Outlook用戶，不適合Foxmail用戶)
Email提交表單
（觀看效果頁樣例26）
分析：看看我們的表單＜form＞標簽就知道了，格式如下：
＜form name="..." action="mailto:xxxxx@xxx.xxx?Subject=表單反饋" enctype="text/plain" method="post"＞...＜/form＞
這里的mailto:后面加上要接受信息的地址，?Subject是設(shè)置默認的Email標題，enctype="text/plain"是必要的，表示信息以文本方式提交，沒有任何加密，所以這種方法常用于沒有Asp/Php/cgi支持的空間，也只是一個代用的方法，用戶必須安裝Outlook，并且是默認的郵件程序，才能順利執(zhí)行提交，據(jù)說TheBat!也可以，大家可以試驗一下。