7-1 峔搣妡P宒

我們在之前的章節已經簡單地介紹過表單,由於表單是使用者與伺服器之間互動的主要機制,所以我們會在這個章節仔細地介紹表單,尤其是表單內的各種控制項(Controls),以及其屬性與對應的性質。

表單(Forms)是使用者經由網頁與伺服器進行互動的最常見方式。一般來說,使用者必須經由表單的填寫,才能將客戶端的資料送回伺服器端。一個簡單表單的原始碼如下:

<form name=formName id=formId method=post action=example/formact.asp target=_blank> 貴姓大名:<input type=text name=UserName value="Test Input"> <input type=submit> <input type=reset> </form> 在網頁呈現的效果如下:
在上例中,一旦使用者按下「送出查詢」的按鈕,瀏覽器就將表單元素的值(例如上述範例中的「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(表單元素的個數)等,以下我們列出一個表單物件的所有性質,讓大家參考:

Example(formProp01.htm):

其原始碼為:

原始檔(formProp01.htm):(灰色區域按兩下即可拷貝)
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>表單的性質列表</h2>
<hr>
<form name=formName id=formId method=post action=formact.asp target=_blank>
	貴姓大名:<input type=text name=UserName value="Test Input">
	<input type=submit> <input type=reset>
</form>
<hr>

<script src="listProp.js"></script>
以下使用 listProp(formId, "formId") 來列出上述表單的所有性質。
你也可以使用 listProp(document.formName, "document.formName") 來達到同樣的功能喔。
<p><h3>"document.formName" 的性質列表:</h3>
<p><script>listProp(formId, "formId")</script>

<hr>
</body>
</html>

當然,隨著瀏覽器的更新,表單的性質也會越來越多,其中最重要的性質當然是 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 程式設計與應用:用於網頁用戶端