建立互動式表單

Form表單可讓您與瀏覽者互動或將來自瀏覽者的資訊收集到網站上。表單可收集來自使用者的資訊,並將此資訊送出給伺服器以便進行處理。表單能包含可讓使用者互動的各種物件。這些表單物件包含文字欄位、清單方塊、核取方塊和選項按鈕..

當瀏覽者在網站表單中輸入資訊並按送出按鈕時,資訊會被傳送到處理它的伺服器端 script 或應用程式所在的伺服器。伺服器的回應包括將要求的資訊傳回給使用者,或者根據表單內容來執行某個動作。一般而言,資訊是由通用閘道介面 (CGI) script、ColdFusion 頁面、Java Server Page (JSP) 或 Active Server Page (ASP) 來處理。

 


 

建立表單

Dreamweaver 的Inset面版的From選項,讓您建立表單,並在表單中加入物件,如文字欄位、按鈕、清單方塊和選項按鈕。如圖 1


圖 1

或是從選項列的Insert→Form來建立表單,如圖 2


圖 2

 



 

 

步驟 1

選擇然後按一下表單圖示或是Insert →Form。如圖 3


圖 3

 


Dreamweaver 就會插入一個表單。在「設計」檢視中的網頁,表單會以一個點狀線的紅色外框來表示。如圖 4


圖 4

如果您看不到此外框,請檢查View→Visual Aids→ Invisble Elements「檢視>視覺輔助>隱藏元素」是否已選取。

步驟 2

在視窗中,按一下表單外框來選取表單,或者在位於文件視窗左下角的標籤選取器中選取 <form> 標籤。

步驟 3

在Properties屬性面版的「表單名稱」欄位中,輸入一個唯一名稱來識別該表單。
命名表單讓它可能得以參考或控制使用 script 語言的表單,如 JavaScript 或 VBScript。如果您沒有命名表單,Dreamweaver 會使用 formn 的語法產生一個名稱,並對加入網頁的每個表單遞增 n 值。

在Properties屬性面版的「Action」欄位中,指定將處理表單的動態網頁或 Script 的路徑。您可以在「Action」欄位中輸入完整的路徑,或者按一下資料夾圖示來導覽到包含 Script 或應用程式網頁的適當資料夾。

因為目前我們還沒有學到動態網頁的部份,所以我們先以email的方式將資料送出,如圖 5


圖 5


在Method 選項中,選擇會將表單資料傳輸給伺服器的方法。這些表單「方法」包括:

  1. POST :在 HTTP 要求中內嵌表單資料。
  2. GET: 在要求網頁時將值附加至 URL。
  3. Default 預設值 :使用瀏覽器的預設值來將表單資料傳送給伺服器。一般預設值是 GET 方法。

請注意您選擇的方法可能會被正在使用的網路或應用程用伺服器記下來。如需詳細資訊,請連絡您學校或公司的伺服器管理員。

請勿使用 GET 方法來傳送長表單。URL 限制為 8,192 個字元。如果所傳送的資料量太大,資料將被截斷,導致未預期或失敗的處理結果。而且,在傳送機密性的使用者名稱和密碼、信用卡號碼或其他機密資訊時,請勿使用 GET 方法。GET 對傳遞資訊而言不是一個安全的方法。

Enctype「編碼類型」讓您將送給伺服器處理的資料類型指定為 MIME 編碼方式。

application/x-www-form-urlencode 的預設值通常會與 POST 方法一併使用。

如果您是在建立檔案上傳欄位,請指定 multipart/form-data MIME 類型。

 

Target彈出式選單會指定視窗,用以顯示由叫用的程式所傳回之資料。
如果沒有開啟命名視窗的話,會以該名稱開啟一個新視窗。目標值是:

新視窗在新的未命名視窗中開啟目標文件。

上一層在顯示目前文件的視窗之上一層視窗中開啟目標文件。

本身在送出表單所用的相同視窗中開啟目標文件。

頂層在目前視窗的本文中開啟目標文件。這個值可以用來確保目標文件會接受完整的視窗,即使原始文件是顯示在頁框中也一樣。

 

 

回課程目錄