我們在之前的章節已經簡單地介紹過表單,由於表單是使用者與伺服器之間互動的主要機制,所以我們會在這個章節仔細地介紹表單,尤其是表單內的各種控制項(Controls),以及其屬性與對應的性質。
表單(Forms)是使用者經由網頁與伺服器進行互動的最常見方式。一般來說,使用者必須經由表單的填寫,才能將客戶端的資料送回伺服器端。一個簡單表單的原始碼如下:
在網頁呈現的效果如下: 在上例中,一旦使用者按下「送出查詢」的按鈕,瀏覽器就將表單元素的值(例如上述範例中的「Test Input」)送回伺服器,並在伺服器以「example/formact.asp」的程式碼來處理收到的資訊,最後將處理結果回傳給瀏覽器。有關於伺服器處理表單資料的細節,我們會在本書第二篇與伺服器相關章節裡有更詳細的說明。表單標籤在 HTML 原始碼內可以有許多屬性(Attributes),例如 name 代表表單的名稱,method 代表瀏覽器將表單資料送至伺服器的方式,action 代表在伺服器端、負責處理表單資料的程式檔,target 則代表伺服器回傳資料後,用戶端用於呈現此資料的視窗名稱。但在使用 JavaScript 或 VBScript 時,表單被視為一個物件,此物件即有各種性質(Properties)和方法(Methods)。表單標籤的屬性和表單物件的性質,幾乎有著一對一的對應關係,但必須注意的是,屬性是用於 HTML,而性質則是用在 JavaScript 或 VBScript 之中。以下將針對常用的「表單標籤的屬性」和「表單物件的性質」進行列表說明。
表單標籤的屬性及說明 表單標籤的屬性 說明 對應的表單物件性質及說明 name 表單的名稱,可被 JavaScript 或 VBScript 用以存取表單及其相關物件。 例如,我們可用 document.formName 或是 document.forms["formName"] 來取得此表單物件。 id 表單的名稱,可被 JavaScript 或 VBScript 用以存取表單及其相關物件。 使用 id 時,我們可以不必經由 DOM 的階層式架構來取得表單物件,例如,我們可以直接使用 document.getElementById(formId) 或是 document.all["formId"] 來取得此表單物件。id 的值在整個網頁必須是唯一的,以避免和其他物件產生衝突。 target 伺服器回傳資訊必須出現的位置,可以是一個視窗 (Window)、框架 (Frame),或是 _top、_parent、_self、_blank。若無此屬性,,則回傳結果將出現於原視窗。 對應的性質是 target,例如: action 指定伺服器端的處理程式。此處理程式可以位於網路上的任一台伺服器,也可以使用 mailto:xxx@xxx.xxx 的方式來將表單資訊經由電子郵件寄出。 對應的性質是 action,例如: method 指定資料傳送的方式,可有兩種方式:
- get: 表單資料經由 QUERY_STRING 的環境變數送至伺服器,這是預設的方式,但傳送資料量有限,通常只限於 1 KB 左右。
- post: 表單資料經由 standard input 傳送,資料長度儲存於 CONTENT_LENGTH 的環境變數,傳送資料可大於 1 MB。
對應的性質是 method,例如: enctype 指定 MIME 的編碼方式來傳送資料,可以有兩種值:"application/x-www-form-urlencoded" (預設值) 或 "multipart/form-data"。 對應的性質是 encoding,例如: onSubmit JavaScript 或 VBScript 的事件處理器,若回傳值為 false,則表單將不會被送出。此屬性通常用來檢查使用者所填入的表單資料是否正確,若不正確,就不將表單資料送到伺服器。 對應的性質是 onSubmit。 此外,表單物件也有一些性質,是無法和表單標籤對應的,例如 elements(由表單元素所形成的陣列)和 Length(表單元素的個數)等,以下我們列出一個表單物件的所有性質,讓大家參考:
其原始碼為:
當然,隨著瀏覽器的更新,表單的性質也會越來越多,其中最重要的性質當然是 elements,這就是表單元素(或稱控制項)所形成的陣列,將會在下一節詳述。
一頁 HTML 中可以包含數個表單,但最好取用不同的名稱,以使 JavaScript 或 VBScript 能根據名稱來存取不同表單。但有時候為了程式碼簡潔,也可以不設定表單的 name 或 id 屬性,此時可以使用 document.forms[0], document.forms[1], document.forms[2] 等等來取得第0、1、2個表單,依此類推。
此外,在使用表單物件時,考慮到表單可能至於框架(Frames)之中,因此取用一個性質的完整方法為:
window.parent.frames[0].document.forms[0].property 但是框架的使用也是越來越少,所以就可以不必這麼麻煩。
JavaScript 程式設計與應用:用於網頁用戶端