如何理解JavaScript表單的基礎知識

學識都 人氣:6.46K

HTMLFormElement繼承了HTMLElement,它自己獨有的屬性和方法有:

如何理解JavaScript表單的基礎知識

acceptCharset:服務器能夠處理的字符集,等價於HTML的accept-charset特性 action:接收請求的URL,等價於HTML中的action特性。 elements:表單中所有控件的集合(HTMLCollection) enctype:請求的編碼類型 length:表單中控件的數量 method:要發送的HTTP請求類型,通常是get或post name:表單的名稱 reset():將所有表單域重置爲默認值 submit():提交表單 target:用於發送請求和接收響應的窗口名稱;

取得form元素的引用可以是getElementById、也可以是s中數值索引或name值;

 一、提交表單

提交表單的按鈕有三種:

以上面這種方法提交表單會在瀏覽器請求發送給服務器之前觸發submit事件,這樣就可以驗證表單數據和決定是否允許提交表單,如下面的'代碼就可以阻止表單的提交:

var form = lementById("myForm");ventListener("submit", function () { entDefault();});

另外也可以通過js腳本調用submit()方法提交表單,在調用submit()提交表單不會觸發submit事件。

var form = lementById("myForm");it();

第一次提交表單後如果長時間沒有迴應,用戶會變得不耐煩,往往多次點擊提交按鈕,導致重複提交表單,因此應該在第一次提交表單後就禁用提交按鈕或利用onsubmit事件阻止後續操作。

var submitBtn = lementById("submitBtn");ick = function () { //處理表格和提交等等 bled = true;};

 二、重置表單

重置表單應該使用input或button:

當用戶單擊重置按鈕重置表單時,會觸發reset事件,可以在必要的時候取消重置操作:

var resetBtn = lementById("resetBtn");ventListener("reset", function () { entDefault();});

另外也可以通過js腳本調用reset()方法重置表單,在調用reset()方法重置表單時會觸發reset事件。

var form = lementById("myForm");t();

 三、表單字段

每個表單都有一個elements屬性,該屬性是表單中所有表單(字段)的集合:

var form = s["myForm"];var list = [];//取得表單中第一個字段var firstName = ents[0];();//取得表單中名爲lastName的字段var lastName = ents["lastName"];();// 取得表單中包含的字段的數量var fieldCount = th;(fieldCount);(ring()); //firstName,lastName,4

多個表單控件使用一個name(單選按鈕),那麼會返回以該name命名的NodeList:

name都是color,在訪問elements["color"]時,返回NodeList:

var list = [];var form = s["myForm"];var radios = ents["color"];(th) //3

共有的表單字段屬性

disabled: 布爾值,表示當前字段是否被禁用; form: 指向當前字段所屬表單的指針:只讀; name: 當前字段的名稱; readOnly: 布爾值,表示當前字段是否只讀; tabIndex: 表示當前字段的切換(tab)序號; type: 當前字段的類型; value: 當前字段被提交給服務器的值。對文件字段來說,這個屬性是隻讀的,包含着文件在計算機中的路徑;

可通過submit事件在提交表單後禁用提交按鈕,但不可以用onclick事件,因爲onclick在不同瀏覽器中有“時差”;

共有表單字段方法

focus(): 激活字段,使其可以響應鍵盤事件; blur(): 失去焦點,觸發;使用的場合不多;

可以在偵聽頁面的load事件上添加該focus()方法:

ventListener("load", function () { s["myForm"]ents["lastName"]s();});

需要注意,第一個表單字段是input,如果其type特性爲“hidden”,或者css屬性的display和visibility屬性隱藏了該字段,就會導致錯誤。

在HTML5中,表單中新增加了autofocus屬性,自動把焦點移動到相應字段。

autofocus

如:

或者檢測是否設置了該屬性,沒有的話再調用focus()方法:

ventListener("load", function () { var form = s["myForm"]; if (form["lastName"]focus !== true) { form["lastName"]s(); };});

共有的表單字段事件

除了支持鼠標鍵盤更改和HTML事件之外,所有的表單字段都支持下列3個事件:

blur: 當前字段失去焦點時觸發;

change:input元素和textarea元素,在它們失去焦點且value值改變時觸發;select元素在其選項改變時觸發(不失去焦點也會觸發);

focus:當前字段獲得焦點時觸發;

如:

var form = s["myForm"];var firstName = ents["firstName"];ventListener("focus", handler);ventListener("blur", handler);ventListener("change", handler);function handler() { switch () { case "focus": if (groundColor !== "red") { groundColor = "yellow"; }; break; case "blur": if (th < 1) { groundColor = "red"; } else { groundColor = ""; }; break; case "change": if (th < 1) { groundColor = "red"; } else { groundColor = ""; }; break; }}

TAGS:表單