DOM基礎教程之使用DOM控製表單_基礎知識

1.表單簡介

表單

是網頁中互動最多的形式之一，它透過各種形式接收使用者的數據，包括下拉列錶框，單選按鈕，複選框和文字框，本篇主要介紹表單中常用的屬性和方法
javascript中可以很方便的操作表單，例如取得表單資料進行有效驗證，自動給予表單域賦值，處理表單事件等。
此時每個form都解析為一個對象，即form對象，可以透過document.forms集合來引用這些對象，例如一個nama屬性為form1的表單可以使用

複製程式碼 程式碼如下:

document.forms["form1"]

document.forms["form1"]

不僅如此，還可以透過表單在文件中的索引來引用表單物件。例如

複製代碼

代碼如下:

document.forms[1]

表示引用文件中的第二個表單物件

以下為一個包含多種form元素，每個元素都有label標記，綁定在元素上，這樣透過點擊文字就能定為和選擇到表格，提高了使用者體驗。

複製程式碼

程式碼如下:

請輸入您的姓名:

請輸入您的密碼:

請選你喜歡的顏色:


    紅
    綠
    藍
    黃
    青
    紫

請選你的性別:

    男

    女

你喜歡做些什麼:

    看書
    上網
    睡覺

我要留言:

通常每個表單元素應該有name和id屬性，name用來交給伺服器，id用於綁定和功能篩選。

2.存取表單中的元素

表單中的元素，無論文字方塊、單選按鈕、下拉按鈕、下拉列錶框或其他的內容，都包含在form的elements集合中，可以利用元素在集合中的位置或元素的name屬性來獲得該元素的引用。

複製程式碼 程式碼如下:

var oForm = document.forms["form1"]//取得表單
        var otextForm = oForm.elements[0]; //取得第一個元素
        var otextPasswd = oForm.elements["passwd"] //取得name屬性為passwd的元素

使用效果最高，最直觀的方法引用：

複製程式碼 程式碼如下:

var otextcomments = oForm.elements.comments; comments的元素

3.公共屬性與方法

所有表單中的元素（除了隱藏元素）都有一些共同的屬性、方法。這裡將一些常用的羅列

複製程式碼 程式碼如下:

var oForm = document.forms["form1"]; //取得表單
            var otextcomments = oForm.elements.comments; //取得name屬性為comments的元素
            alert(oForm.type); //檢視元素類型
            var otextPasswd = oForm.elements["passwd"]; //取得name屬性為passwd的元素
            otextPasswd.focus(); //聚焦到特定的元素上

4.表單的投稿

form中的提交透過按鈕或具備按鈕功能的圖片來完成

複製程式碼 程式碼如下:

       

當使用者按下回車鍵或點選其中一個按鈕時，就可以完成表單的提交，而無需其他程式碼。可以透過form中的action屬性來偵測是否提交。

複製程式碼 程式碼如下:

使用者在提交表單的過程中可能因為網速過慢而反覆點擊提交按鈕，這對伺服器而言是很大的負擔，可以透過使用disabled屬性來禁止這種行為。例如：

複製程式碼 代碼如下: