在HTML中，表單是由<form>來表示的。取得<form>元素引用的方式有好幾種，最常見的就是為其新增id特性，然後使用getElementById()方法獲取它。其次，是通過document.forms可以取得頁面中所有的表單。在這個集合中，可以通過數值索引或name值來取得特定的表單。

提交表單

使用者單擊提交按鈕或影象按鈕時，就會提交表單。

<!-- 通用提交按鈕 -->
<input type="submit" value="Submit Form">
<!-- 自定義提交按鈕 -->
<button type="submit">Submit Form</button>
<!-- 影象按鈕 -->
<input type="image" src="graphic.gif">

　以這種方式提交表單時，瀏覽器會在將請求傳送給伺服器之前觸發submit事件。這樣，就有機會驗證表單資料，並決定是否允許表單提交。阻止這個事件的預設行為就可以取消表單提交。 （呼叫preventnDefault()方法可以阻止表單提交）

在JS中，呼叫submit()方法也可以提交表單。

var form = document.getElementById("myForm");
//提交表單
form.submit();

　在以呼叫submit()方法的形式提交表單時，不會觸發submit 事件，因此要記得在呼叫此方法之前先驗證表單資料。

提交表單時可能出現的最大問題，就是重複提交表單。解決這一問題的辦法有兩個：在第一次提交表單後就禁用提交按鈕，或者利用onsubmit 事件處理程式取消後續的表單提交操作。

重置表單

當用戶單擊重置按鈕時，表單會被重置。

<!-- 通用重置按鈕 -->
<input type="reset" value="Reset Form">
<!-- 自定義重置按鈕 -->
<button type="reset">Reset Form</button>

　在重置表單時，所有表單欄位都會恢復到頁面剛載入完畢時的初始值。使用者單擊重置按鈕重置表單時，會觸發reset 事件。

在JS中，呼叫reset()方法也可以重置表單。

var form = document.getElementById("myForm");
//重置表單
form.reset();

　與呼叫submit()方法不同，呼叫reset()方法會像單擊重置按鈕一樣觸發reset 事件。

表單欄位

共有的表單欄位屬性：

 disabled：布林值，表示當前欄位是否被禁用。
 form：指向當前欄位所屬表單的指標；只讀。
 name：當前欄位的名稱。
 readOnly：布林值，表示當前欄位是否只讀。
 tabIndex：表示當前欄位的切換（tab）序號。
 type：當前欄位的型別，如"checkbox"、"radio"，等等。
 value：當前欄位將被提交給伺服器的值。對檔案欄位來說，這個屬性是隻讀的，包含著檔案在計算機中的路徑。

共有的表單欄位方法：

每個表單欄位都有兩個方法：focus()和 blur()。

共有的表單欄位事件：

除了支援滑鼠、鍵盤、更改和HTML 事件之外，所有表單欄位都支援下列3 個事件：
 blur：當前欄位失去焦點時觸發。
 change：對於<input>和<textarea>元素，在它們失去焦點且value 值改變時觸發；對於<select>元素，在其選項改變時觸發。
 focus：當前欄位獲得焦點時觸發。

change 事件在不同表單控制元件中觸發的次數會有所不同。對於<input>和<textarea>元素，當它們從獲得焦點到失去焦點且value 值改變時，才會觸發change 事件。對於<select>元素，只要使用者選擇了不同的選項，就會觸發change 事件；換句話說，不失去焦點也會觸發change 事件。

注意：關於blur 和change 事件的關係，並沒有嚴格的規定。在某些瀏覽器中，blur事件會先於change 事件發生；而在其他瀏覽器中，則恰好相反。

文字框指令碼

在HTML 中，有兩種方式來表現文字框：一種是使用<input>元素的單行文字框，另一種是使用<textarea>的多行文字框。

選擇文字

上述兩種文字框都支援select()方法，這個方法用於選擇文字框中的所有文字。（在文字框獲得焦點時選擇其所有文字）

取得選擇的文字

HTML5添加了兩個屬性：selectionStart和seletionEnd。這兩個屬相中儲存的是基於0的數值，表示所選擇的的文字範圍。

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

IE8 及更早的版本中有一個document.selection 物件，其中儲存著使用者在整個文件範圍內選擇的文字資訊。要取得選擇的文字，首先必須建立一個範圍，然後再將文字從其中提取出來。

function getSelectedText(textbox){
if (typeof textbox.selectionStart == "number"){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
} else if (document.selection){
return document.selection.createRange().text;
}
}

選擇部分文字

HTML5添加了setSelectionRange()方法。這個方法接收兩個引數：要選擇的第一個字元的索引和要選擇的最後一個字元之後的字元的索引。

HTML5約束驗證API

為了在將表單提交到伺服器之前驗證資料，HTML5 新增了一些功能。

1.必填欄位

<input type="text" name="username" required>

2.其他輸入型別

HTML5 為<input>元素的type 屬性又增加了幾個值。這些新的型別不僅能反映資料型別的資訊，而且還能提供一些預設的驗證功能。其中，"email"和"url"是兩個得到支援最多的型別。

"email"型別要求輸入的文字必須符合電子郵件地址的模式，而"url"型別要求輸入的文字必須符合URL 的模式。

3.數值範圍

除了"email"和"url"，HTML5 還定義了另外幾個輸入元素。這幾個元素都要求填寫某種基於數字的值："number"、"range"、"datetime"、"datetime-local"、"date"、"month"、"week"，還有"time"。

對所有這些數值型別的輸入元素，可以指定min 屬性（最小的可能值）、max 屬性（最大的可能值）和step 屬性（從min 到max 的兩個刻度間的差值）。

4.輸入模式

HTML5 為文字欄位新增了pattern 屬性。這個屬性的值是一個正則表示式，用於匹配文字框中的值。

<input type="text" pattern="\d+" name="count">

　注意，模式的開頭和末尾不用加^和$符號。

5.檢測有效性

使用checkValidity()方法可以檢測表單中的某個欄位是否有效。所有表單欄位都有個方法，如果欄位的值有效，這個方法返回true，否則返回false。

if (document.forms[0].elements[0].checkValidity()){
//欄位有效，繼續
} else {
//欄位無效
}　

validity 屬性則會告訴你為什麼欄位有效或無效。這個物件中包含一系列屬性，每個屬性會返回一個布林值：

 customError ：如果設定了setCustomValidity()，則為true，否則返回false。
 patternMismatch：如果值與指定的pattern 屬性不匹配，返回true。
 rangeOverflow：如果值比max 值大，返回true。
 rangeUnderflow：如果值比min 值小，返回true。
 stepMisMatch：如果min 和max 之間的步長值不合理，返回true。
 tooLong：如果值的長度超過了maxlength 屬性指定的長度，返回true。有的瀏覽器（如Firefox 4）會自動約束字元數量，因此這個值可能永遠都返回false。
 typeMismatch：如果值不是"mail"或"url"要求的格式，返回true。
 valid：如果這裡的其他屬性都是false，返回true。checkValidity()也要求相同的值。
 valueMissing：如果標註為required 的欄位中沒有值，返回true。

6.禁用驗證

通過設定novalidate 屬性，可以告訴表單不進行驗證。

<form method="post" action="signup.php" novalidate>
<!--這裡插入表單元素-->
</form>

如果一個表單中有多個提交按鈕，為了指定點選某個提交按鈕不必驗證表單，可以在相應的按鈕上新增formnovalidate 屬性。

<form method="post" action="foo.php">
<!--這裡插入表單元素-->
<input type="submit" value="Regular Submit">
<input type="submit" formnovalidate name="btnNoValidate"
value="Non-validating Submit">
</form>

選擇框指令碼

選擇框是通過<select>和<option>元素建立的。

HTMLSelectElement 型別還提供了下列屬性和方法：

 add(newOption, relOption)：向控制元件中插入新<option>元素，其位置在相關項（relOption）之前。
 multiple：布林值，表示是否允許多項選擇；等價於HTML 中的multiple 特性。
 options：控制元件中所有<option>元素的HTMLCollection。
 remove(index)：移除給定位置的選項。
 selectedIndex：基於0 的選中項的索引，如果沒有選中項，則值為-1。對於支援多選的控制元件，只儲存選中項中第一項的索引。
 size：選擇框中可見的行數；等價於HTML 中的size 特性。

HTMLOptionElement 物件添加了下列屬性：

 index：當前選項在options 集合中的索引。
 label：當前選項的標籤；等價於HTML 中的label 特性。
 selected：布林值，表示當前選項是否被選中。將這個屬性設定為true 可以選中當前選項。
 text：選項的文字。
 value：選項的值（等價於HTML 中的value 特性）。

選擇選項

對於只允許選擇一項的選擇框，訪問選中項的最簡單方式，就是使用選擇框的selectedIndex 屬性。

var selectedOption = selectbox.options[selectbox.selectedIndex];

另一種選擇選項的方式，就是取得對某一項的引用，然後將其selected 屬性設定為true。

selectbox.options[0].selected = true;

新增選項

新增選項的方式有很多，第一種方式就是使用如下所示的DOM 方法。

var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);

第二種方式是使用Option 建構函式來建立新選項。

var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption); //在IE8 及之前版本中有問題

第三種新增新選項的方式是使用選擇框的add()方法。DOM 規定這個方法接受兩個引數：要新增的新選項和將位於新選項之後的選項。

var newOption = new Option("Option text", "Option value");
selectbox.add(newOption, undefined); //最佳方案

移除選項

與新增選項類似，移除選項的方式也有很多種。首先，可以使用DOM 的removeChild()方法，為其傳入要移除的選項。

selectbox.removeChild(selectbox.options[0]); //移除第一個選項

其次，可以使用選擇框的remove()方法。這個方法接受一個引數，即要移除選項的索引。

selectbox.remove(0); //移除第一個選項

最後一種方式，就是將相應選項設定為null。

selectbox.options[0] = null; //移除第一個選項　　

移動和重排選項

使用DOM 的appendChild()方法，就可以將第一個選擇框中的選項直接移動到第二個選擇框中。

var selectbox1 = document.getElementById("selLocations1");
var selectbox2 = document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);

移動選項與移除選項有一個共同之處，即會重置每一個選項的index 屬性。

要將選擇框中的某一項移動到特定位置，最合適的DOM 方法就是insertBefore()。

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]);  //在選擇框中向前移動一個選項的位置

表單序列化

將表單內容序列化成一個字串。這樣在ajax提交表單資料時，就不用依一列舉出每一個引數。