HTMLFormElement繼承了HTMLElement，它自己獨有的屬性和方法有：
取得form元素的引用可以是getElementById、也可以是document.forms中數值索引或name值；
一、提交表單
提交表單的按鈕有三種：
<input type="submit" value="Submit Form"><button type="submint">Submit Form</button><input type="image" src="">
以上面這種方法提交表單會在瀏覽器請求發送給服務器之前觸發submit事件，這樣就可以驗證表單數據和決定是否允許提交表單，如下面的代碼就可以阻止表單的提交：
var form = document.getElementById("myForm");form.addEventListener("submit", function () { event.preventDefault();});另外也可以通過js腳本調用submit()方法提交表單，在調用submit()提交表單不會觸發submit事件。
var form = document.getElementById("myForm");form.submit();第一次提交表單后如果長時間沒有回應，用戶會變得不耐煩，往往多次點擊提交按鈕，導致重復提交表單，因此應該在第一次提交表單后就禁用提交按鈕或利用onsubmit事件阻止后續操作。
var submitBtn = document.getElementById("submitBtn");submitBtn.onclick = function () { //處理表格和提交等等 submitBtn.disabled = true;};二、重置表單
重置表單應該使用input或button：
<input type="reset" value = "Reset Form"><button type="reset">Reset Form</button>
當用戶單擊重置按鈕重置表單時，會觸發reset事件，可以在必要的時候取消重置操作：
var resetBtn = document.getElementById("resetBtn");resetBtn.addEventListener("reset", function () { event.preventDefault();});另外也可以通過js腳本調用reset()方法重置表單，在調用reset()方法重置表單時會觸發reset事件。
var form = document.getElementById("myForm");form.reset();三、表單字段
每個表單都有一個elements屬性，該屬性是表單中所有表單（字段）的集合：
var form = document.forms["myForm"];var list = [];//取得表單中第一個字段var firstName = form.elements[0];list.push(firstName.name);//取得表單中名為lastName的字段var lastName = form.elements["lastName"];list.push(lastName.name);// 取得表單中包含的字段的數量var fieldCount = form.elements.length;list.push(fieldCount);console.log(list.toString()); //firstName,lastName,4
多個表單控件使用一個name（單選按鈕），那么會返回以該name命名的NodeList：
<form id="myForm" name="myForm"> <ul> <li><input type="radio" name="color" value="red">red</li> <li><input type="radio" name="color" value="yellow">yellow</li> <li><input type="radio" name="color" value="blue">blue</li> </ul> <button type="submint">Submit Form</button> <button type="reset">Reset Form</button></form>
name都是color，在訪問elements["color"]時，返回NodeList：
var list = [];var form = document.forms["myForm"];var radios = form.elements["color"];console.log(radios.length) //3
共有的表單字段屬性
可通過submit事件在提交表單后禁用提交按鈕，但不可以用onclick事件，因為onclick在不同瀏覽器中有“時差”；
共有表單字段方法
可以在偵聽頁面的load事件上添加該focus()方法：
window.addEventListener("load", function () { document.forms["myForm"].elements["lastName"].focus();});需要注意，第一個表單字段是input，如果其type特性為“hidden”，或者css屬性的display和visibility屬性隱藏了該字段，就會導致錯誤。
在HTML5中，表單中新增加了autofocus屬性，自動把焦點移動到相應字段。
autofocus
如：
<input type="text" name="lastName" autofocus>
或者檢測是否設置了該屬性，沒有的話再調用focus()方法：
window.addEventListener("load", function () { var form = document.forms["myForm"]; if (form["lastName"].autofocus !== true) { form["lastName"].focus(); };});共有的表單字段事件
除了支持鼠標鍵盤更改和HTML事件之外，所有的表單字段都支持下列3個事件：
blur： 當前字段失去焦點時觸發；
change：input元素和textarea元素，在它們失去焦點且value值改變時觸發；select元素在其選項改變時觸發（不失去焦點也會觸發）；
focus：當前字段獲得焦點時觸發；
如：
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; }}以上就是本文的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
