如何理解JavaScript表單的基礎(chǔ)知識(shí)

　　HTMLFormElement繼承了HTMLElement，它自己獨(dú)有的屬性和方法有：

　　acceptCharset:服務(wù)器能夠處理的字符集，等價(jià)于HTML的accept-charset特性 action：接收請(qǐng)求的URL，等價(jià)于HTML中的action特性。 elements：表單中所有控件的集合（HTMLCollection） enctype：請(qǐng)求的編碼類(lèi)型 length：表單中控件的數(shù)量 method:要發(fā)送的HTTP請(qǐng)求類(lèi)型，通常是get或post name：表單的名稱 reset():將所有表單域重置為默認(rèn)值 submit():提交表單 target:用于發(fā)送請(qǐng)求和接收響應(yīng)的窗口名稱；

　　取得form元素的引用可以是getElementById、也可以是document.forms中數(shù)值索引或name值；

　　一、提交表單

　　提交表單的按鈕有三種：

　　Submit Form

　　以上面這種方法提交表單會(huì)在瀏覽器請(qǐng)求發(fā)送給服務(wù)器之前觸發(fā)submit事件，這樣就可以驗(yàn)證表單數(shù)據(jù)和決定是否允許提交表單，如下面的代碼就可以阻止表單的提交：

　　var form = document.getElementById("myForm");form.addEventListener("submit", function () { event.preventDefault();});

　　另外也可以通過(guò)js腳本調(diào)用submit()方法提交表單，在調(diào)用submit()提交表單不會(huì)觸發(fā)submit事件。

　　var form = document.getElementById("myForm");form.submit();

　　第一次提交表單后如果長(zhǎng)時(shí)間沒(méi)有回應(yīng)，用戶會(huì)變得不耐煩，往往多次點(diǎn)擊提交按鈕，導(dǎo)致重復(fù)提交表單，因此應(yīng)該在第一次提交表單后就禁用提交按鈕或利用onsubmit事件阻止后續(xù)操作。

　　var submitBtn = document.getElementById("submitBtn");submitBtn.onclick = function () { //處理表格和提交等等 submitBtn.disabled = true;};

　　二、重置表單

　　重置表單應(yīng)該使用input或button：

　　Reset Form

　　當(dāng)用戶單擊重置按鈕重置表單時(shí)，會(huì)觸發(fā)reset事件，可以在必要的時(shí)候取消重置操作：

　　var resetBtn = document.getElementById("resetBtn");resetBtn.addEventListener("reset", function () { event.preventDefault();});

　　另外也可以通過(guò)js腳本調(diào)用reset()方法重置表單，在調(diào)用reset()方法重置表單時(shí)會(huì)觸發(fā)reset事件。

　　var form = document.getElementById("myForm");form.reset();

　　三、表單字段

　　每個(gè)表單都有一個(gè)elements屬性，該屬性是表單中所有表單（字段）的集合：

　　var form = document.forms["myForm"];var list = [];//取得表單中第一個(gè)字段var firstName = form.elements[0];list.push(firstName.name);//取得表單中名為lastName的字段var lastName = form.elements["lastName"];list.push(lastName.name);// 取得表單中包含的字段的數(shù)量var fieldCount = form.elements.length;list.push(fieldCount);console.log(list.toString()); //firstName,lastName,4

　　多個(gè)表單控件使用一個(gè)name（單選按鈕），那么會(huì)返回以該name命名的NodeList：

　　name都是color，在訪問(wèn)elements["color"]時(shí)，返回NodeList：

　　var list = [];var form = document.forms["myForm"];var radios = form.elements["color"];console.log(radios.length) //3

　　共有的表單字段屬性

　　disabled: 布爾值，表示當(dāng)前字段是否被禁用； form: 指向當(dāng)前字段所屬表單的指針：只讀； name: 當(dāng)前字段的名稱； readOnly: 布爾值，表示當(dāng)前字段是否只讀； tabIndex: 表示當(dāng)前字段的切換（tab）序號(hào)； type: 當(dāng)前字段的類(lèi)型； value: 當(dāng)前字段被提交給服務(wù)器的值。對(duì)文件字段來(lái)說(shuō)，這個(gè)屬性是只讀的，包含著文件在計(jì)算機(jī)中的路徑；

　　可通過(guò)submit事件在提交表單后禁用提交按鈕，但不可以用onclick事件，因?yàn)閛nclick在不同瀏覽器中有“時(shí)差”；

　　共有表單字段方法

　　focus(): 激活字段，使其可以響應(yīng)鍵盤(pán)事件； blur(): 失去焦點(diǎn)，觸發(fā)；使用的場(chǎng)合不多；

　　可以在偵聽(tīng)頁(yè)面的load事件上添加該focus()方法：

　　window.addEventListener("load", function () { document.forms["myForm"].elements["lastName"].focus();});

　　需要注意，第一個(gè)表單字段是input，如果其type特性為“hidden”，或者css屬性的display和visibility屬性隱藏了該字段，就會(huì)導(dǎo)致錯(cuò)誤。

　　在HTML5中，表單中新增加了autofocus屬性，自動(dòng)把焦點(diǎn)移動(dòng)到相應(yīng)字段。

　　autofocus

　　如：

　　或者檢測(cè)是否設(shè)置了該屬性，沒(méi)有的話再調(diào)用focus()方法：

　　window.addEventListener("load", function () { var form = document.forms["myForm"]; if (form["lastName"].autofocus !== true) { form["lastName"].focus(); };});

　　共有的表單字段事件

　　除了支持鼠標(biāo)鍵盤(pán)更改和HTML事件之外，所有的表單字段都支持下列3個(gè)事件：

　　blur： 當(dāng)前字段失去焦點(diǎn)時(shí)觸發(fā)；

　　change：input元素和textarea元素，在它們失去焦點(diǎn)且value值改變時(shí)觸發(fā)；select元素在其選項(xiàng)改變時(shí)觸發(fā)（不失去焦點(diǎn)也會(huì)觸發(fā)）；

　　focus：當(dāng)前字段獲得焦點(diǎn)時(shí)觸發(fā)；

　　如：

　　var form = document.forms["myForm"];var firstName = form.elements["firstName"];firstName.addEventListener("focus", handler);firstName.addEventListener("blur", handler);firstName.addEventListener("change", handler);function handler() { switch (event.type) { case "focus": if (firstName.style.backgroundColor !== "red") { firstName.style.backgroundColor = "yellow"; }; break; case "blur": if (event.target.value.length < 1) { firstName.style.backgroundColor = "red"; } else { firstName.style.backgroundColor = ""; }; break; case "change": if (event.target.value.length < 1) { firstName.style.backgroundColor = "red"; } else { firstName.style.backgroundColor = ""; }; break; }}

【如何理解JavaScript表單的基礎(chǔ)知識(shí)】相關(guān)文章：

對(duì)javascript的理解08-08

關(guān)于javascript的基礎(chǔ)知識(shí)06-13

javascript基礎(chǔ)知識(shí)大全08-22

理解JavaScript原型鏈教程09-02

javascript的閉包概念怎么理解06-15

javascript面向?qū)ο笾械膶?duì)象怎么理解09-02

淺談javascript中的單線程理解08-16

如何實(shí)現(xiàn)html表單輸入監(jiān)聽(tīng)08-09

有關(guān)深入理解JavaScript中的并行處理的介紹10-14

如何理解經(jīng)營(yíng)租賃07-10