JavaScript表單對象Form介紹

原文地址：http://www.pczpg.com/a/2010/0312/3106_2.html

 

要實現動態互動，必須掌握有關表單對象(Form)和架構對象(Frames)更為複雜的知識。
1、 表單基礎知識
表單是最常見的與JavaScript一起使用的HTML元素之一。在網頁中用表單來收集從使用者那裡得到的資訊，並且

將這些資訊傳輸給伺服器來處理。表單主要有兩類應用：一是如訂單、設定檔、調查資訊等；二是搜尋引擎

功能，即從使用者那裡得到查詢標準，由Web瀏覽器送給伺服器的資料庫，在資料庫中產生查詢，再將查詢結果返

回Web瀏覽器。通常可以使用JavaScript代碼來保證表單中輸入的資料是符合標準的，也可以再資料被提交給服

務器前，使用JavaScript代碼來執行其他一些預先處理。如果不使用JavaScript，HTML只能將表單中的資料傳送

給伺服器。
   
CGI:通用閘道介面,一種簡單的協議，允許網頁與基於Web伺服器的程式互動，處理從Web瀏覽器提交給伺服器的

資料。
１、什麼是表單對象
表單（Form）:它構成了Web頁面的基本元素。通常一個Web頁面有一個表單或幾個表單，使用Forms[]數組來實

現不同表單的訪問。
<form Name=Form1>
<INPUT type=text...>
<Input type=text...>
<Inpup byne=text...>
</form>
<form Name=Form2>
<INPUT type=text...>
<Input type=text...>
</form>
在Forms[0]中共有三個基本元素，而Forms[1]中只有兩個元素。
　　表單對象可以使設計人員能用表單中不同的元素與客戶機使用者相互動，而用不著在之前首先進行資料輸入

，就可以實現動態改變Web文檔的行為。 表單對象最主要的功能就是能夠直接存取HTML文檔中的表單，它封裝

了相關的HTML代碼：
<Form
Name ="表單的名稱"
Target ="指定從伺服器返回的資料在那裡顯示"
action ="指定一個URL，表單資料將被提交給該URL"
Method =“資訊資料傳送方式(get/post)”
enctype ="被提交資料的格式"
[onsubmit ="JavaScript代碼"]>
</Form>
　 書179圖6－7。
例：”form1.html”
２、表單對象的方法
　　表單對象的方法只有一個--submit()方法，該方法主要功用就是實現表單資訊的提交。如提交Mytest表單,

則使用下列格式：
document.mytest.submit()
　
３、表單對象的屬性
　　表單對象中的屬性主要包括以下：elements name action target encoding method.
　　除Elements外，其它幾個均反映了表單中標識中相應屬性的狀態，這通常是單個表單標識；而elements常

常是多個表單元素值的數組，例：
document.forms[0].elements[1]
document.myform.textField
　
４、訪問表單對象
在JavaScript中訪問表單對象可由兩種方法實現：
（１）通過訪問表單
　　在表單對象的屬性中首先必須指定其表單名，而後就可以通過下列標識訪問表單如：document.myform。
（２）通過數組來訪問表單
　　除了使用表單名來訪問表單外，還可以使用表單對象數組來訪問表單對象。但需要注意一點，因表單對象

是由瀏覽器環境的提供的，而瀏覽器環境所提供的數組下標是由0到n。所以可通過下列格式實現表單對象的訪

問：
document.forms[0]
document.forms[1]
document.forms[2]...
　
５、參考資料表單的先決條件
　　在JavaScript中要對錶單引用的條件是：必須先在頁面中用標識建立表單，並將定義表單部分放在引用之

前。

二、表單中的基本元素
    表單中有三類基本元素：輸入欄位,挑選清單，多行文本域。分別用<input>/<select> /<textarea>標記來創

 

建。
    <input>/<select>/<textarea>標記都可以包括name和value屬性。Name屬性為一個表單定義名稱，value屬

性給表單定義一個預設值。當表單被提交給CGI指令碼時，表單資料被提交的格式就是name=value標記對。如：

<input type=”text” name=”地址” value=”銅陵市長江西路274號”>,則name=value標記對“地址=銅陵市

長江西路274號”將傳送給CGI指令碼。要想將表單資料提交給CGI指令碼，在標記中必須包含name屬性，但並不要求

必須包含value屬性，也不要求在表單資料被提交前域中必須輸入資料，因為空白值市合法的。但是，在資料被提

交前，最好能使用JavaScript代碼驗證資料的合法性。
在JavaScript中要訪問這些基本元素，必須通過對應特定的表單元素的數組下標或表單元素名來實現。每一個

元素主要是通過該元素的屬性或方法來引用。其引用的基本格式見下:
formName.elements[].methadName (表單名.元素名或數組.方法)
formName.elements[].propertyName(表單名.元素名或數組.屬性)
　
（一）輸入欄位<input>
<input>標記用來建立各種不同類型的介面元素來收集資訊的輸入欄位。包括以下屬性：
type:指定建立何種類型的元素。其有效值包括text/password/radio/checkbox/
reset/button/submit/image/hidden。
Name:表單元素名稱。
Value:設定初始值。
Src:指定一個映像的URL。
Size:設定文本域的字元寬度。
Maxlength:設定可以輸入欄位中的最大字元數。
Checked:決定一個選項按鈕或一個複選框是否被選擇
Align：指定Type屬性建立的映像的對齊屬性。

１、text文字框
　功能：建立一個簡單的文字框，接受輸入單行文本
　基本屬性：
Name：設定提交資訊時的資訊名稱。對應於HTML文檔中的Name。
Value：用以設定出現在視窗中對應HTML文檔中Value的資訊。
　基本方法：
blur()：將當前焦點移到後台。
select()：加亮文字。
focus():獲得text輸入焦點。
主要事件：
onFocus：當Text獲得焦點時，產生該事件。
OnBlur：元素失去焦點時，產生該事件。
Onselect：當文字被加亮顯示後，產生該檔案。
onchange：當Text元素值改變時，產生該檔案。
例:”text.htm”
<Form name="test">
<input type="text" name="test" value="this is a javascript" >
</form>
...
<script language ="Javascirpt">
document.mytest.value="that is a Javascript";
document.mytest.select();
document.mytest.blur();
</script>