輕鬆玩轉花樣表單

一、表單概述

　　表單，在網頁中的作用不可小視，主要負責數據採集的功能，比如你可以採集訪問者的名字和e－mail地址、調查表、留言簿等等。

1、表單的組成

　　一個表單有三個基本組成部分：

• 表單標籤：這裏麪包含了處理表單數據所用CGI程序的URL以及數據提交到服務器的方法。
• 表單域：包含了文本框、密碼框、隱藏域、多行文本框、複選框、單選框、下拉選擇框和文件上傳框等。
• 表單按鈕：包括提交按鈕、復位按鈕和一般按鈕；用於將數據傳送到服務器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

　　爲了顧及不同的網頁設計工具，本文只講述代碼的設計，不具體講述操作方法，下面就是表單的HTML代碼設計要點：

1.1 表單標籤＜form＞＜/form＞

　　功能：用於申明表單，定義採集數據的範圍，也就是＜form＞和＜/form＞裏面包含的數據將被提交到服務器或者電子郵件裏。

　　語法：＜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送至服務器.這是往前兼容的缺省值.這個值由於國際化的原因不贊成使用.
enctype=cdata	指明用來把表單提交給服務器時(當method值爲"post")的互聯網媒體形式.這個特性的缺省值是"application/x-www-form-urlencoded"
TARGET="..."	指定提交的結果文檔顯示的位置： _blank ：在一個新的、無名瀏覽器窗口調入指定的文檔； _self ：在指向這個目標的無素的相同的框架中調入文檔； _parent ：把文檔調入當前框的直接的父FRAMESET框中；這個值在當前框沒有父框時等價於_self； _top ：把文檔調入原來的最頂部的瀏覽器窗口中(因此取消所有其它框架)；這個值等價於當前框沒有你框時的_self.

　　例如：
　　＜form action="http://www.yesky.com/test.asp" method="post" target="_blank"＞...＜/form＞
　　表示表單將向http://www.yesky.com/test.asp以post的方式提交，提交的結果在新的頁面顯示，數據提交的媒體方式是默認的application/x-www-form-urlencoded方式；
1.2 表單域

　　表單域包含了文本框、多行文本框、密碼框、隱藏域、複選框、單選框和下拉選擇框等，用於採集用戶的輸入或選擇的數據，下面分別講述這些表單域的代碼格式：

1.2.1 文本框

　　文本框是一種讓訪問者自己輸入內容的表單對象，通常被用來填寫單個字或者簡短的回答，如姓名、地址等。
　　代碼格式：＜input type="text" name="..." size="..." maxlength="..." value="..."＞

　　屬性解釋：
　　type="text"定義單行文本輸入框；
　　name屬性定義文本框的名稱，要保證數據的準確採集，必須定義一個獨一無二的名稱；
　　size屬性定義文本框的寬度，單位是單個字符寬度；
　　maxlength屬性定義最多輸入的字符數。
　　value屬性定義文本框的初始值

樣例1：

樣例1代碼：

＜input type="text" name="example1" size="20" maxlength="15"＞

1.2.2 多行文本框

　　也是一種讓訪問者自己輸入內容的表單對象，只不過能讓訪問者填寫較長的內容。
　　代碼格式：＜TEXTAREA name="..." cols="..." rows="..." wrap="VIRTUAL"＞＜/TEXTAREA＞
　　屬性解釋：
　　name屬性定義多行文本框的名稱，要保證數據的準確採集，必須定義一個獨一無二的名稱；
　　cols屬性定義多行文本框的寬度，單位是單個字符寬度；
　　rows屬性定義多行文本框的高度，單位是單個字符寬度；
　　wrap屬性定義輸入內容大於文本域時顯示的方式，可選值如下：

• 默認值是文本自動換行；當輸入內容超過文本域的右邊界時會自動轉到下一行，而數據在被提交處理時自動換行的地方不會有換行符出現；
• Off，用來避免文本換行，當輸入的內容超過文本域右邊界時，文本將向左滾動，必須用Return才能將插入點移到下一行；
• Virtual，允許文本自動換行。當輸入內容超過文本域的右邊界時會自動轉到下一行，而數據在被提交處理時自動換行的地方不會有換行符出現；
• Physical，讓文本換行，當數據被提交處理時換行符也將被一起提交處理。

樣例2：

　　

樣例2代碼：

＜TEXTAREA name="example2" cols="20" rows="2" wrap="PHYSICAL"＞＜/TEXTAREA＞
　　

1.2.3 密碼框

　　是一種特殊的文本域，用於輸入密碼。當訪問者輸入文字時，文字會被星號或其它符號代替，而輸入的文字會被隱藏。

　　代碼格式：＜input type="password" name="..." size="..." maxlength="..."＞

　　屬性解釋：
　　type="password"定義密碼框；
　　name屬性定義密碼框的名稱，要保證數據的準確採集，必須定義一個獨一無二的名稱；
　　size屬性定義密碼框的寬度，單位是單個字符寬度；
　　maxlength屬性定義最多輸入的字符數。

樣例3：

樣例3代碼：

＜input type="password" name="example3" size="20" maxlength="15"＞


1.2.4 隱藏域

　　隱藏域是用來收集或發送信息的不可見元素，對於網頁的訪問者來說，隱藏域是看不見的。當表單被提交時，隱藏域就會將信息用你設置時定義的名稱和值發送到服務器上。

　　代碼格式：＜input type="hidden" name="..." value="..."＞

　　屬性解釋：
　　type="hidden"定義隱藏域；
　　name屬性定義隱藏域的名稱，要保證數據的準確採集，必須定義一個獨一無二的名稱；
　　value屬性定義隱藏域的值
　　例如：＜input type="hidden" name="ExPws" value="dd"＞


1.2.5 複選框

　　複選框允許在待選項中選中一項以上的選項。每個複選框都是一個獨立的元素，都必須有一個唯一的名稱。

　　代碼格式：＜INPUT type="checkbox" name="..." value="..."＞

　　屬性解釋：
　　type="checkbox"定義複選框；
　　name屬性定義複選框的名稱，要保證數據的準確採集，必須定義一個獨一無二的名稱；
　　value屬性定義複選框的值

樣例4： yesky.com Chinabyte.com

樣例4代碼：
　　＜input type="checkbox" name="yesky" value="09"＞yesky.com
　　＜input type="checkbox" name="Chinabyte" value="08"＞Chinabyte.com

1.2.6 單選框

　　當需要訪問者在待選項中選擇唯一的答案時，就需要用到單選框了。

　　代碼格式：＜input type="radio" name="..." value="..."＞

　　屬性解釋：
　　type="radio"定義單選框；
　　name屬性定義單選框的名稱，要保證數據的準確採集，單選框都是以組爲單位使用的，在同一組中的單選項都必須用同一個名稱；
　　value屬性定義單選框的值，在同一組中，它們的域值必須是不同的。

　樣例5： yesky.com Chinabyte.com

樣例5代碼：
　　＜input type="radio" name="myFavor" value="1"＞yesky.com
　　＜input type="radio" name="myFavor" value="2"＞Chinabyte.com


1.2.7 文件上傳框

　　有時候，需要用戶上傳自己的文件，文件上傳框看上去和其它文本域差不多，只是它還包含了一個瀏覽按鈕。訪問者可以通過輸入需要上傳的文件的路徑或者點擊瀏覽按鈕選擇需要上傳的文件。
　　注意：在使用文件域以前，請先確定你的服務器是否允許匿名上傳文件。表單標籤中必須設置ENCTYPE="multipart/form-data"來確保文件被正確編碼；另外，表單的傳送方式必須設置成POST。

　　代碼格式：＜input type="file" name="..." size="15" maxlength="100"＞

　　屬性解釋：
　　type="file"定義文件上傳框；
　　name屬性定義文件上傳框的名稱，要保證數據的準確採集，必須定義一個獨一無二的名稱；
　　size屬性定義文件上傳框的寬度，單位是單個字符寬度；
　　maxlength屬性定義最多輸入的字符數。

　樣例6：

樣例6代碼：

＜input type="file" name="myfile" size="15" maxlength="100"＞


1.2.8 下拉選擇框

　　下拉選擇框允許你在一個有限的空間設置多種選項。

　　代碼格式：
　　＜select name="..." size="..." multiple＞
　　＜option value="..." selected＞...＜/option＞
　　...
　　＜/select＞

　　屬性解釋：
　　size屬性定義下拉選擇框的行數；
　　name屬性定義下拉選擇框的名稱；
　　multiple屬性表示可以多選，如果不設置本屬性，那麼只能單選；
　　value屬性定義選擇項的值；
　　selected屬性表示默認已經選擇本選項。

　樣例7： yesky.comchinabyte.com

樣例7代碼：
　　＜select name="mySel" size="1"＞
　　＜option value="1" selected＞yesky.com＜/option＞
　　＜option value="d2"＞chinabyte.com＜/option＞
　　＜/select＞

　樣例8：
　　 yesky.comchinabyte.cominternet.com 按Ctrl可以多選

樣例8代碼：
　　＜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 提交按鈕

　　提交按鈕用來將輸入的信息提交到服務器。

　　代碼格式：＜input type="submit" name="..." value="..."＞

　　屬性解釋：
　　type="submit"定義提交按鈕；
　　name屬性定義提交按鈕的名稱；
　　value屬性定義按鈕的顯示文字；

　樣例9：

樣例9代碼：

＜input type="submit" name="mySent" value="發送"＞

1.3.2 復位按鈕

　　復位按鈕用來重置表單。

　　代碼格式：＜input type="reset" name="..." value="..."＞

　　屬性解釋：
　　type="reset"定義復位按鈕；
　　name屬性定義復位按鈕的名稱；
　　value屬性定義按鈕的顯示文字；

　樣例10：

樣例10代碼：

＜input type="reset" name="myCancle" value="取消"＞

1.3.3 一般按鈕

　　一般按鈕用來控制其他定義了處理腳本的處理工作。

　　代碼格式：＜input type="button" name="..." value="..." onClick="..."＞

　　屬性解釋：
　　type="button"定義一般按鈕；
　　name屬性定義一般按鈕的名稱；
　　value屬性定義按鈕的顯示文字；
　　onClick屬性，也可以是其它的事件，通過指定腳本函數來定義按鈕的行爲；

樣例11：

樣例11代碼：
　　＜input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')"＞

　　二、表單外觀的美化

　　很多時候，我們僅僅爲了實現數據採集這個功能來使用表單，常看到的表單都是“千人一面”、毫無生氣，本專題嘗試着來改變這一現象，試圖賦予表單一個豐富多彩的面貌。
表單的外觀，也是最爲直接的花樣，可以通過改變它來實現特效，本文分兩個出發點來講述：CSS魔法和圖像魔法。

　　1、CSS魔法

CSS，就是大家知道的層疊樣式單，它可以定義頁面元素的外觀，包括字體樣式、背景顏色和圖像樣式、邊框樣式、補白樣式、邊界樣式等等，下面就從這幾個方面出發，討論怎樣將CSS應用到表單中，徹底美化它！

　　1.1 字體樣式的應用

　　字體樣式包括：字體族科(font-family)、字體風格(font-style)、字體變形(font-variant)、字體加粗(font-weight)、字體大小(font-size)、字體(font)，具體的定義方法，在這裏不詳細講述，可以參考它的資料。
　　也許你已經注意到，按鈕上的文字不漂亮，其實可以通過CSS字體樣式來解決，同樣地，其它的幾個涉及到文字的表單項，例如，文本框、多行文本框、口令框、下拉選擇框都可以應用字體樣式。
　　爲了充分展示這些應用，下例特別設計了幾種樣式，在實際應用中，不必這麼凌亂，靈活運用：

　樣例12：表單元素的字體樣式展示

yesky.comredidea.net

underline css style


　　分析：

• 文本框裏的文字是加粗的，大小是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＞
• 發送1和發送2按鈕的文字不同，是因爲發送1按鈕使用了9pt的宋體文字，所以比較美觀，發送1按鈕的代碼：
  ＜input type="submit" name="Submit" value="發送1" style="font-family:宋體; font-size: 9pt;"＞

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

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

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

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

複選 單選 yesky.comredidea.comchinabyte.comsina.comsohu.com

　　分析：


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種邊框形式的展示

複選 單選

　　分析：
　　2、圖像魔法

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

　　2.1 用圖像代替按鈕

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

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

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

　　除了標籤改爲input type="image"以外，其它的屬性和＜img＞標籤的屬性是一樣的，例如：

　　是不是隻要用圖片就可以代替所有的按鈕呢？是的，不過，不是上面這麼簡單了，必須加上事件函數，不然的話，圖片都是提交按鈕，不能完成復位等功能，看看下面的例子就知道了：

樣例17：用圖片代替所有的表單按鈕：

注意：

• 文本框背景是黑色的，字體是白色的，代碼：
  ＜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"＞
• 單選和複選按鈕的背景是紅色的，代碼：
  ＜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)"＞

　　小結：用好background-color屬性和background-image屬性，就可以設計很出“色”表單了。

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

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

　　聰明的讀者一定會想到，如果設計單邊框，一定更加漂亮，對！下面我們來嘗試以下部分邊框的設置效果，本例僅僅以Solid和dotted兩種類型的邊框作演示，其它類型的邊框原理相同：

代碼：style="background-color: #FFFFFF; border-color: #000099; border-style: solid; border-width: 0px 0px 1px"


代碼：style="background-color: #FFFFFF; border-color: #CCCCCC black #FF0000; border-style: solid; border-width: 1px 0px"


代碼：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值無關；
• dotted ：點線；
• dashed ：虛線；
• solid ：實線邊框；
• double ：雙線邊框。兩條單線與其間隔的和等於指定的border-width值；
• groove ：3D凹槽；
• ridge ：邊框突起；
• inset ：3D凹邊；
• outset ：3D凸邊；

 

• 代替submit按鈕的圖片代碼格式是
  ＜input type="image" name="..." src="..." onClick="document.formName.submit()"＞
• 代替reset按鈕的代碼圖片格式是
  <a href="javascript:document.formName.reset();">＜img border=0 src="..."＞</a>
  注：這裏的formName是表單的name屬性值。

　　2.2 用背景圖美化表單元素

　　其實，前面已經提到過，用background-image:url()屬性來定義表單元素的背景圖，這裏僅舉一例，可以看到，除了select沒有效果以外，其它的都可以配合網頁的背景來設置它們。

樣例18：背景圖的設置

www.yesky.comredidea.comwww.chinabyte.com

三、表單的提交

　　既然表單是用來採集用戶輸入的數據，那麼，就應該保證用戶的數據被準確地提交到預定的地點，也就是說，我們在表單提交的時候，應該對用戶的數據進行檢驗，一來可以避免用戶誤輸數據，二來可以避免用戶輸入非法的，或者說不合格的數據；檢驗合格以後，還要保證用戶的數據提交到特定的程序。

　　1．數據的檢驗

　　數據的檢驗，通常有兩種程序：客戶端檢驗和服務器端檢驗。客戶端檢驗，比較快，服務器端檢驗，相對來說比較慢，爲了確保安全，通常同時採用，這樣就可以避免用戶刻意破壞。
　　不管採用什麼方式，數據檢驗的原理都是一樣的，一旦用戶輸入的數據不符合規定，就報錯，要求用戶重新輸入，客戶端檢驗常使用Javascrip腳本，服務器端的視系統而定，本文不對數據檢驗的具體程序設計進行探討，僅僅列舉幾個例子來說明。

　樣例19：必填項，以及簡單的數據類型檢驗

<script type="text/javascript">function CheckDate(){userName = document.RedForm.userName.value;userEmail = document.RedForm.userEmail.value;if (userName=="") { alert("請輸入姓名"); document.RedForm.userName.focus(); return false; }else{ if ((userEmail=="")||(userEmail.indexOf("@")==-1)) { alert("請重新輸入Email地址"); document.RedForm.userEmail.focus(); return false; }else return true; }}</script> 以下帶*的必須輸入：
姓名： *
Email： *

　　分析：

• 本例給表單添加了onSubmit事件，通過onSubmit="return CheckDate()"指定提交前，必須通過函數CheckDate()來檢驗，如果不合格，返回輸入數據；
• 數據檢驗的函數如下：
  ＜script＞
  function CheckDate(){
  //取得輸入的數據
  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．表單的分支提交

　　有的時候，表單需要根據用戶的選擇，提交到不同的程序，怎麼做呢？
　　通過腳本來檢測用戶的選擇分支，從而向不同的程序提交表單，看看樣例：

　樣例20：分支提交

<script type="text/javascript"> function TwoSubmit(form){ if (form.Ref[0].checked){ form.action = "cop.asp"; }else{ form.action = "ind.asp"; } form.submit();} </script> 用戶名： 密碼：
公司用戶 個人用戶

　　分析：

用戶名： 密碼： 登錄 清空

　　分析：

　　通過onClick="document.form.submit()"來提交表單；用onClick="document.form.reset()"來複位表單，這樣一來，任何一個元素都可以實現提交表單了。

         3．用任何元素提交表單

　　是不是隻有按鈕或者圖片按鈕才能提交表單呢？當然不是，實際上，任何頁面元素都可以提交表單，不過嘛，都是通過腳本來完成的，下面我們就使用鏈接來代替Submit按鈕：

　樣例21：用鏈接來提交表單

Trackback: http://tb.donews.net/TrackBack.aspx?PostId=930228

四、表單的常用技巧

　　這些常用技巧，往往是和事件以及腳本聯繫在一起，本文注重功能，至於腳本，就不一一詳細分析。常見的技巧有：下拉跳轉菜單，表單內容的聚焦。

　　1．下拉跳轉菜單

　　在Dreamweaver中，可以很方便地建立基於表單的下拉菜單，爲了兼顧非Dreamweaver用戶，這裏講述一下這種技巧。

　樣例22：基於表單的下拉跳轉菜單

ChinabyteSinanetease
　　分析：實際上，這裏用到了一個函數，用於向選擇的地址跳轉，

＜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．表單內容的聚焦

　　內容聚焦，常用在Copy&Paste類網站上，用的好的話，可以方便用戶。

　樣例23：內容自動聚焦

把你的鼠標移上來，看看 這裏的內容自動選擇了

　　分析： 上面分別使用了兩個事件，Email的是onFocus="this.value=''"，自動選擇的是onMouseOver="this.select()"

　　3．去掉表格和表單間的空隙

　樣例24：表格和表單的空隙處理

　　表格，我們常用來構架頁面，可是，表格裏的表單總是和表格的內容有一個空隙，對照一下：

這裏有空隙

這裏沒有空隙

　　分析：爲什麼右邊沒有空隙呢，看看右邊的代碼就知道了。

＜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＞中間，對應的＜/form＞放在＜/td＞和＜/tr＞中間！

　　4．用Email提交表單(只適合Outlook用戶，不適合Foxmail用戶)

　樣例25：Email提交表單

主題： 內容：  

　　分析：看看我們的表單＜form＞標籤就知道了，格式如下：
＜form name="..." action="mailto:[email protected]?Subject=表單反饋" enctype="text/plain" method="post"＞...＜/form＞
這裏的mailto:後面加上要接受信息的地址，?Subject是設置默認的Email標題，enctype="text/plain"是必要的，表示信息以文本方式提交，沒有任何加密，所以這種方法常用於沒有Asp/Php/cgi支持的空間，也只是一個代用的方法，用戶必須安裝Outlook，並且是默認的郵件程序，才能順利執行提交，據說TheBat!也可以，大家可以試驗一下。

 

這裏首先用到的是form的onSubmit="TwoSubmit(this)"
然後根據選擇的分支，來分別遞交到不同的程序，TwoSubmit()函數如下：

＜script＞
function TwoSubmit(form){
if (form.Ref[0].checked){
form.action = "cop.asp";//這裏是分之一
}else{
form.action = "ind.asp";//這裏是分之二
}
form.submit();
}
＜/script＞