第63節 Form表單-Web前端開發之JavaScript-王唯

本内容是用于Web前端開發的Javascript視訊的課件，請通過Master Brother JavaScript視訊課程學習。

在 HTML 中，表單由<表單>元素表示，它們在使用各種其他表單輸入元素（如<輸入><select>和<按鈕>）的用戶端程式設計中起着重要作用。

表單的作用是通過表單元素收集使用者的輸入，然後将輸入資料送出給伺服器，伺服器處理接收到的資料并生成新的HTML頁面以顯示在用戶端;

Javascript的第一個應用程式之一是共享伺服器處理表單的任務，分解所有位置依賴于伺服器的情況;

表單及其控件都是HTML元素，可以使用标準的DOM技術來操作它們，除了表單已經編寫腳本之外，還有專用的API，是以在表單程式設計中，最好使用表單API;

擷取表單對象：

擷取<形式>元素引用的方法：最常見的方法是将其視為使用标準DOM技術，如getElement ById（）或getElementsByTagName（）像其他元素一樣;

頁面上的所有表單集合都可以通過 document.forms 集合擷取，其中可以通過數字索引或 name 或 id 值擷取特定表單：

早期的浏覽器或支援向後相容的浏覽器将具有 name 功能的每個表單儲存為文檔對象中的屬性，例如：

注意：不建議使用此方法。

注意：您可以為表單指定id和name屬性，但它們可以設定不同的值;

表單屬性和方法：

Form <表單>在HTML中具有諸如操作，編碼，方法和目标之類的屬性，在Javascript中，它是繼承HTMLElement的HTMLFormElement類型，是以具有與其他HTML元素相同的預設屬性，但也具有自己獨特的屬性和方法，其中大多數對應于其在HTML中的屬性。這些屬性控制表單的送出和顯示方式，例如：

acceptCharset：伺服器可以處理的字元集，等效于HTML中的excel字元集功能;

action：接受請求的URL，相當于HTML的動作功能;

元素：表單中所有控件的集合（HTMLCollection）;

enctype：請求的編碼類型（模式），相當于HTML中的enctype功能;

編碼：編碼，相當于HTML的編碼功能，不需要;

length：隻讀，表單中的控件數量;

方法：請求類型（method），等效于HTML方法屬性;

name：形式的名稱，相當于HTML的名稱特征;

目标：用于發送請求和接收響應的視窗的名稱，等效于 HTML 的目标

reset（）：将所有表單域重置為預設值的方法;

送出（）：方法，送出表格;

上述大多數屬性都是可寫的;

您還可以使用 DOM 方法動态建立表單，例如：

送出送出表單：

您可以使用<輸入>的類型功能作為"送出"或"圖像"送出表單，也可以<按鈕>送出表單;

上面的按鈕，隻要任何表單元素都有焦點，按Enter鍵送出表單，如果表單沒有送出按鈕，按Enter鍵不會送出表單，但有特殊情況，如果隻有一個文本框，即使沒有送出按鈕，Enter也會被送出;

注意：文本區域是一個例外，如果文本區域中的傳回換行而不是送出表單;

以這種方式送出表單時，浏覽器在将請求發送到伺服器之前觸發onSubmit事件，這允許在決定是否允許送出表單時驗證表單資料;

對于 DOM0 級事件處理程式，它也可以傳回 false;

如果它是 HTML 事件處理程式，則可以傳回 false;

送出（）方法：

在Javascript中，您還可以通過調用submit（）方法來送出表單;

調用 submit（） 方法送出表單時，不會觸發 onSubmit 事件，是以在調用方法之前會驗證表單資料;

此外，調用此方法不會觸發限制驗證，例如：

< p> 輸入 1-10 之間的整數：<輸入類型""數字"最小""1" 最大"""10" 需要 /></p >

是以，在調用 submit（） 方法之前，您還需要驗證限制，例如：

有一種誤解認為，如果将 onSubmit 事件添加到送出按鈕，則該事件是無效的，并且會直接送出，例如：

如果将 onClick 事件添加到送出按鈕，則可以執行表單送出驗證，還可以觸發表單的 onSubmit 事件，例如，将上一示例的 onClick 事件處理程式添加到送出送出按鈕中，可以看到 onClick 事件是在表單的 onSubmit 事件之前觸發的;

另外，不要設定要送出的表單元素的名稱或id的值，因為它會覆寫表單的送出方法，是以在運作時，将提示不存在的 submit（） 函數;

此外，不僅送出按鈕或普通按鈕調用 submit（） 方法可以送出表單，甚至超連結調用 submit（） 方法也可以送出，但請注意，超連結的預設行為需要删除：

例：

另一種重要的送出方式是Ajax commit，它使用XMLHttpRequest對象進行異步資料送出，其最大特點是整個頁面不送出，隻有本地送出。

自動送出和防止自動送出：

傳回，調用送出按鈕的 click（） 方法，調用表單的 submit（） 方法（可以在 onLoad 事件中定期送出，即使使用 setTimeout 也是如此）;

如果表單中有送出按鈕，您可以在表單中添加onsubmit"return false";

如果表單中沒有送出按鈕，則不會自動送出;

如果表單中隻有一個文本框，但沒有送出按鈕，則自動送出回車符，您可以在表單中添加onsubmit""return false"，并且不會自動送出，也可以添加隐藏的文本框，例如：

它不會自動送出，請注意域未隐藏;

或者收聽文本框的 onKeydown 事件，如果是傳回，請不要這樣做，例如：

如果表單中有送出按鈕，如果表單的任一控件處于焦點中，則可以通過傳回直接送出表單，如果沒有控件處于焦點中，則可以偵聽 docum 的按鍵關閉事件，以确定是否按 Enter 鍵，然後送出它，例如：

防止重複送出：

送出表單時可能發生的最大問題是重複送出表單;

禁用送出按鈕：

注意：由于浏覽器之間的"時間差"，onclick事件處理程式無法做到這一點：有些浏覽器在觸發表單的onSubmit事件之前觸發onClick事件，有些則相反;

在表單中未包含送出按鈕的情況下，此方法不合适;

重置表單：

有兩個按鈕可以使用<輸入>或<按鈕>重置類型功能來重置表單：

單擊重置按鈕時，将觸發 onReset 事件，該事件允許您在必要時取消重置，以及阻止重置的預設行為，例如：

在 HTML 事件處理程式或 DOM0 級别的 onReset 事件中傳回 false 也可以取消預設行為;

您也可以使用Javascript調用reset（）方法重置，但與調用sitden（）方法不同，它會觸發onReset事件;

從使用者體驗的角度來看，重置表單并不常見，是以可能是意外觸發了表單重置事件，是以此要求很少見，更常見的是提供允許使用者傳回上一頁的取消按鈕;

表單元素（控件）：

可以使用本機 DOM 方法通路窗體控件，就像頁面上的其他元素一樣。

表單具有 legth 屬性，該屬性傳回表單元素的數量，但不包含作為"圖像"元素的<輸入>元素類型;

它屬于HTMLFormControlsCollection集合類型，繼承自HTMLCollection;

請注意，元素集合不包括類型等于圖像的輸入元素;

所有元素都可以通過表單的 glements 集合索引或 name 屬性進行通路，例如：

此方法與直接使用表單的索引或 name 屬性通路表單元素一緻，建議這樣做，因為将來可能不支援前者，并且可能導緻一些歧義;

例如，所有表單元素的值都不能為空，例如：

如果多個窗體控件使用相同的名稱，則通過元素傳回以該名稱命名的 NodeList（"name"），并且僅通過元素傳回第一個元素（索引）;

是以，使用索引和名稱屬性時，結果可能會有所不同。通常，id屬性是首選，但名稱屬性在HTML表單送出中具有特殊用途，通常應用于相關的檢查按鈕組和互相排斥的單選按鈕組中，強制共享name屬性值;

常見的窗體控件屬性：

除<字段集>元素外，所有表單控件都具有相同的屬性集，并且由于輸入>類型可以表示多個表單元素，< 是以某些屬性僅适用于某些表單元素，但某些屬性是所有表單元素所共有的：

disabled：布爾值，訓示目前控件是否被禁用;

form：隻讀，指向目前控件所屬窗體的指針，如果窗體元素未包含在<窗體>中，則為 null;

名稱：隻讀，目前控件的名稱;

隻讀：布爾值，訓示目前控件是否為隻讀;

tabIndex：表示目前控件的切換（tab）序列号;

類型：目前控件的類型，如複選框、收音機等;

value：讀/寫，表單元素的值，即将送出給伺服器的值，對于檔案是隻讀的，包含檔案中檔案的路徑;

除了表單屬性之外，還可以通過Javascript動态修改上述内容，例如：

類型屬性：

除字段集>外 <，所有表單元素都具有 type 屬性，該屬性等于< >元素（如文本、密碼、單選按鈕、複選框、按鈕、檔案、隐藏、重置、送出和其他元素）的 HTML 屬性類型值：

檔案域：<文本區域>值為文本域

無線電清單：<選擇>...</選擇>值為：選擇一

多項選擇清單：<選擇多個>：</選擇>值為：選擇多個

自定義按鈕：<按鈕>...</按鈕>值為：送出

自定義非送出按鈕：<按鈕類型"按鈕">：</按鈕>值為按鈕

自定義複位按鈕：<按鈕式"複位">：設定</按鈕>值

自定義送出按鈕：<按鈕類型""送出">：>值</按鈕送出

此外，< >和<按鈕>類型屬性可以動态修改，而<選擇>元素的類型屬性是隻讀的;

示例：在彈出視窗中送出表單

常見的表單控制方法：

每個表單元素都有兩種方法：focus（） 和 blur（），其中 focus（） 方法用于擷取焦點，這會激活表單元素，以便它可以響應鍵盤事件，例如：

預設情況下，隻有表單元素才能獲得焦點。

HTML5 将 autofocus 屬性添加到窗體控件中，在支援此屬性的浏覽器中，可以通過設定以下屬性自動将焦點轉移到适當的控件，而無需 Javascript：

如果已為 HTML 中的元素設定了此屬性，則不必在 Javascript 中調用 focus（），是以在調用 focus（） 之前檢測是否設定了該屬性非常重要，例如：

Blur（）方法：從元素中删除焦點;

與 focus（） 方法相反，blur（） 方法充當從元素中删除焦點的一種方式，當調用 blur（） 時，焦點不會轉移到特定元素，它隻是從調用該方法的元素中删除焦點，例如：

常見的表單元素事件：

除了使用者與表單元素互動時經常觸發的正常事件（如滑鼠、鍵盤或其他 HTML）之外，表單元素還支援以下三個事件：

模糊：失焦時觸發;

焦點：獲得焦點時觸發;

更改：對于<輸入>和<文本>元素，當它們失去焦點并且價值>發生變化時觸發<;

ost

應該強調的是，當<輸入>和<文本區域>元素失去焦點和值更改時，會觸發更改事件;對于<，當它們的選項更改時，會觸發>元素，例如：

更改選項時會觸發更改事件，但在此時，<選擇>仍在焦點中，并且在失去焦點時觸發模糊事件，這與輸入><有很大不同;

這在事件處理程式中：

事件處理程式中的第一個是對觸發事件的元素的引用;