JavaScript之表單基礎知識（表單指令碼）
表單的基礎知識
在HTML中，表單用<form>元素來表示，在JavaScript中，表單用HTMLFormElement來表示，HTMLFormElement繼承了HTMLElement。
獲取表單的引用
取得表單的引用有多種方式，常見的就是通過ID來獲取元素引用。
也可以通過document.forms來獲取頁面中的所有表單。在這個集合中，通過陣列索引或name值來獲取引用。<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <form id="form1" name="form" action="" method="get"> <input id="input0" type="text"> <br> <input id="input1" type="submit" value="提交"> </form> <script> /* 在此處書寫javascript程式碼 */ //通過ID獲取form元素 var form1 = document.getElementById("from1"); /* 通過document.forms獲取所有表單，forms[0]為第一個表單 var firstForm = document.forms[0]; var myFrom = document.forms["form"]; //獲取頁面中名稱為“form”的表單 */ </script> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JavaScript</title> </head> <body> <form id="form1" name="form" action="" method="get"> <input id="input0" type="text"> <br> <input id="input1" type="submit" value="提交"> </form> <script> /* 在此處書寫javascript程式碼 */ //通過ID獲取form元素 //var form1 = document.getElementById("from1"); //通過document.forms獲取所有表單，forms[0]為第一個表單 var firstForm = document.forms[0]; // var myFrom = document.forms["form"]; //獲取頁面中名稱為“form”的表單 </script> </body> </html>
注：可以同時為表單指定ID和name。它們的值不一定相同。
提交表單
當用戶單擊提交按鈕或影象按鈕時，就會提交表單。使用<input>或<button>都可以定義按鈕。使用<input>時，其type屬性值為"submit"，使用影象按鈕提交表單時，<input>的type屬性值為"image"，src屬性值為影象的路徑。
當<input>的type屬性為"submit"時，
<input id="input1" type="submit" value="提交">當<input>的type屬性為"image"時，
<input id="imasub" type="image" src="smile.gif"><button id="butt">確定</button>在JavaScript中程式設計呼叫submit()也能提交表單，這種方法無需包含按鈕也能向伺服器提交表單資料。
<body>
<form id="myForm" action="php.php" method="get">
姓名：<input type="text" name="name" size="20"><br>
<input type="button" onclick="formSubmit()" value="提交">
</form>
<script>
function formSubmit() {
var myForm = document.querySelector("#myForm");
myForm.submit();
}
</script>
</body>
這種方法與使用者單擊submit按鈕一樣可以提交表單，但是使用這種方法，表單的onsubmit事件處理程式不會被呼叫。
阻止submit事件，取消表單提交
點選提交按鈕，瀏覽器會在將請求傳送給伺服器之前觸發submit事件，這樣就有機會驗證表單資料，阻止表單這個事件的方法（即點選按鈕提交表單），可以使用preventDefault方法。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<form id="form1" name="form" action="" method="get">
<input id="input0" type="text"> <br>
<input id="input1" type="submit" value="提交">
</form>
<script>
/* 在此處書寫javascript程式碼 */
//通過ID獲取input元素
var input1 = document.getElementById("input1");
//通過document.forms獲取所有表單，forms[0]為第一個表單
//var firstForm = document.forms[0];
// var myFrom = document.forms["form"]; //獲取頁面中名稱為“form”的表單
input1.onsubmit = function (event) {
event.preventDefault(); //阻止表單submit的預設行為
};
</script>
</body>
</html>提交表單有個重大問題，那就是重複提交表單，如果頁面長時間沒有反應，那麼使用者可能會不耐煩，就會反覆點選提交按鈕，這樣伺服器會重複處理多次請求，或者造成錯誤，如果是在訂單，那麼可能造成訂好幾份。
解決這個問題有兩個辦法：
1、在第一次提交表單後，就禁用提交按鈕。
2、用onsubmit事件處理程式取消後續的表單提交操作。
重置表單
在使用者點選重置按鈕時，表單資料會被重置，使用屬性type為reset的<input>或<button>可以建立重置按鈕。
<form id="myForm" action="php.php" method="get">
姓名：<input type="text" name="name" size="20" value="預設初始值"><br>
<input type="button" value="提交">
<!-- 重置按鈕 -->
<input type="reset">
<button type="reset">button重置</button>
</form>效果：
點選重置按鈕，表單中的資料就會被重置。重置表單時，所有字元段都會恢復到頁面剛載入完的初始狀態，也就是未動表單之前的狀態。如果字元段初始值為空，則重置後為空，如果字元段初始值有預設的值，則重置後為預設的值。
除了以上的方法重置表單外，還可以用rest()方法t來定義重置。
<body>
<form id="myForm" action="php.php" method="get">
姓名：<input type="text" name="name" size="20" value="預設初始值"><br>
<input type="button" onclick="formSubmit()" value="提交">
</form>
<script>
function formSubmit() {
var myForm = document.querySelector("#myForm");
//重置表單
myForm.reset();
}
</script>
</body>效果：
建議少用重置按鈕，建議設定一個取消按鈕，讓使用者返回前一個頁面。
當用戶點選重置按鈕時，會觸發reset事件。這時我們可以取消重置操作，也就是使用preventDefault()方法阻止重置操作。
表單欄位（表單元素）
可以像訪問頁面中其它元素一樣，使用DOM訪問表單中的元素。每個表單有個elements屬性，該屬性是表單所有元素的集合，也就是表單欄位的集合。它包含了表單的所有字元段，如：<input>、<textarea>、<button>、<fieldset>等。每個字元段（表單元素）在elements中的順序與它們在標記中的順序一致，通過elements返回的量NodeList。可以按照位置（索引）和name來訪問它們，length屬性可以得到欄位的個數。
<body>
<form id="myForm" action="php.php" method="get">
<fieldset>
<legend>邊框標題</legend>
<input type="text" name="name1" size="20" value="預設初始值">
<input id="text" type="text" name="name1" value="">
<button name="name1">提交按鈕</button>
</fieldset>
</form>
<script>
var myForm = document.querySelector("#myForm");
//取得表單中的第一個欄位
var field = myForm.elements[0]
console.log(field); //<fieldset></fieldset>
//取得name值為"name"的欄位集合
var field2 = myForm.elements["name1"];
console.log(field2.length); //3 name值為"name"的欄位個數。
//返回name值為"name"的第一個欄位
console.log(field2[0]); //<input type="text">
console.log(field2[1]); //<input type="text">
console.log(field2[2]); //<button></button>
</script>
</body>
共有的表單欄位屬性
除了<fieldset>元素之外，所有表單欄位都擁有相同的一組屬性。由於<input>型別可以表示多種表單欄位，因為有些屬性只用於某些欄位，一些欄位是所有欄位共有的。共有屬性如下：
- disabled：布林值，表示當前欄位是否禁用。
- form：指向當前欄位所屬表單的指標，只讀。
- name：當前欄位的名稱。
- readOnly：布林值，表示當前欄位是否可讀。
- tabIndex：表示當前欄位的切換（TAB）的序號。次序。
- type：當前欄位的型別。
- value：當前欄位的值，也就是將被提交到伺服器的值。
<body>
<form id="myForm" action="php.php" method="get">
<fieldset>
<legend>邊框標題</legend>
<input id="text" type="text" name="name1" value="預設值">
<button name="name1">提交按鈕</button>
</fieldset>
</form>
<script>
var myForm = document.querySelector("#myForm");
//取得表單中的第二個欄位
var field = myForm.elements[1]
//修改value屬性的值
field.value="修改後的值";
//檢查form屬性
console.log(field.form);
//設定焦點
field.focus();
</script>
</body>
效果：
能夠動態的修改表單欄位屬性，意味著我們可以隨時以任何方式操作表單。例如，使用者重複單擊提交按鈕，當涉及訂單或銀行卡消費時，重複點選按鈕會將費用翻番。解決的辦法就是：在第一次點選提交按鈕後就禁用這個提交按鈕。思路：偵聽submit事件，並在該事件發生時禁用提交按鈕即可。這樣就只發生一次的提交操作，後續的提交操作被禁止了。
<body>
<form id="myForm" action="" method="get">
<fieldset>
<legend>邊框標題</legend>
<input id="text" type="text" name="name1" value="預設值">
<button name="submit-btn">提交按鈕</button>
</fieldset>
</form>
<script>
var myForm = document.querySelector("#myForm");
myForm.addEventListener("submit", function (e) {
var event = e.target;
//取得提交按鈕
var btn = event.elements["submit-btn"];
//禁用提交按鈕
btn.disabled = true;
});
</script>
</body>
以上程式碼為submit事件添加了一個事件處理程式。事件觸發後，程式碼取得了提交按鈕並將其disable設定為true，意味著之後禁用提交按鈕。
注意，只能通過submit事件來禁用提交按鈕。不能使用onclick事件處理程式來實現禁用，原因是不同瀏覽器的onclick程式存在時差，有的瀏覽器會先觸發onclick事件程式，這樣的話，意味著提交之前就禁用了提交按鈕，結果永遠都不會提交。因為最好通過submit事件處理程式來禁用提交按鈕。
共有的表單欄位方法
每個表單有有兩個方法：focus()和blur()。
focus()方法表示將焦點設定到表單欄位上，以啟用表單欄位，使其響應鍵盤事件。
例如，當頁面載入完成後，將焦點轉移到表單中的第一個欄位。為此，可以偵聽頁面的load事件，並在該事件發生時在表單的第一個欄位上呼叫focus()方法：
<body>
<form id="myForm" action="" method="get">
<input id="text" type="text" name="name1" value="預設值">
<button name="submit-btn">提交按鈕</button>
</form>
<script>
window.onload = function (e) {
//當頁面載入完成後，表單的第一個欄位呼叫focus()方法
document.forms[0].elements[0].focus();
};
</script>
</body>
效果：
這裡表單的第一個欄位為<input>元素，因此當頁面載入完成後，這個文字框獲得了焦點。
注：如果表單的第一個欄位是<input>元素，且其type的屬性值為"hidden"，那麼以上程式碼會出錯，意味著找不到這個欄位。同樣的，如果對這個欄位使用CSS的display和visibility屬性隱藏了該欄位，以上程式碼也會出錯。因為隱藏了這個欄位，那麼以上程式碼就找不到了。
HTML5為表單欄位新增了autofocus屬性，意味著欄位將自動獲取焦點。autofocus屬性的值是個布林值，true表示獲取焦點，false表示不獲取焦點。
<input type="text" autofocus>為了保證以上程式碼在設定了autofocus屬性的欄位中也能執行，首先需對欄位進行檢測，確定這個欄位是否設定了autofocus屬性，如果設定了就無需呼叫focus()方法，如果沒有設定這個屬性，就需要呼叫focus()方法來獲取焦點。
<body>
<form id="myForm" action="" method="get">
<input id="text" type="text" name="name1" value="預設值">
<button name="submit-btn">提交按鈕</button>
</form>
<script>
window.onload = function (e) {
//獲取表單的第一個欄位
var element = document.forms[0].elements[0];
//判斷該欄位是否設定了autofocus屬性
if (element.autofocus !== true) {
element.focus(); //如果沒有設定，則呼叫focus()方法
console.log("JavaScript focus");
}
};
</script>
</body>
這段程式碼會返回"JavaScript focus"，意思就是說表單的第一個欄位沒有設定autofocus屬性，那麼該欄位就呼叫focus()方法 獲取焦點。如果這個欄位設定了autofocus屬性，那麼當頁面載入完成後，該欄位就獲取了焦點。
與focus()方法相對的就是blur()方法，這個方法表示欄位失去焦點即把焦點從這個欄位上移出。這個方法在欄位獲取了焦點的情況下使用才有效。
<body>
<form id="myForm" action="" method="get">
<input id="text" type="text" name="name1" value="預設值">
<button name="submit-btn">提交按鈕</button>
</form>
<script>
window.onload = function (e) {
//獲取表單的第一個欄位
var element = document.forms[0].elements[0];
//判斷該欄位是否設定了autofocus屬性
if (element.autofocus !== true) {
element.focus(); //設定焦點
element.blur(); //移出焦點
}
};
</script>
在以上程式碼中增加一行程式碼"element.blur()"，也就是移出焦點，那麼表單中的第一個欄位結果還是沒有獲取到焦點。因為即使通過focus()方法獲取了焦點，同樣也通過blur()方法移出了焦點，最後結果就是沒有獲取焦點。
共有的表單欄位事件
除了了支援鍵盤、滑鼠、HTML和更改事件外，表單欄位不支援以下3類事件：
- blur：當前欄位失去焦點時觸發這個事件。
- focus：當前欄位獲取焦點時觸發這個事件。
- change：對於<input>和<textarea>元素，在它們失去焦點且value值改變時觸發（有焦點時，意味著文字正在輸入）。對於<select>元素，只要選項改變就會觸發，也就是說，不失去焦點也會觸發。
通常focus和blur屬性用於改變使用者介面，要麼給使用者於視覺的提示，要麼就向頁面中新增功能。change屬性通常用於驗證使用者輸入的值是否符合某種規範（例如只能輸入數字）。
我們假定一個文字框<texteara>，當文字框獲取了焦點時背景顏色變成藍色，當文字框失去焦點時恢復文字框的背景顏色，當用戶向文字框輸入純數字時，恢復文字框顏色，當用戶輸入的值為非純數字時，文字框背景顏色變成紅色。
<body>
<form id="myForm" action="" method="get">
<textarea id="textbox" rows="10" cols="20"></textarea>
</form>
<script>
//獲取表單中的文字框欄位
var textbox = document.forms[0].elements[0];
//確定文字框是否獲取了焦點,並設定相應顏色
textbox.addEventListener("focus", function (e) {
var element = e.target; //獲取這個文字框這個目標
if (element.style.background != "orange") {
element.style.background = "blue";
}
});
//當失去焦點時，改變相應顏色
textbox.addEventListener("blur", function (e) {
var element = e.target;
if (/[^\d]/.test(element.value)) {
element.style.background = "red";
} else {
element.style.background = "";
}
});
textbox.addEventListener("change", function (e) {
var element = e.target;
if (/[^\d]/.test(element.value)) {
element.style.background = "red";
} else {
element.style.background = "";
}
});
</script>
</body>
效果：
這裡為也檢測使用者所輸入的內容是否為純數字，運用了正則表示式，"[^\d].test()"表示輸入的為非數字。