表單指令碼

表單的基礎知識

在HTML中，表單是由<form>元素來表示的。而在JavaScript中，表單對應的則是HTMLFormElement型別。HTMLFormElement繼承了HTMLElement，因而與其他HTML元素具有相同的預設屬性。

通過document.forms可以取得頁面中的所有表單。在這個集合中，可以通過數值索引或name值來取得特定的表單：

var firstForm=document.forms[0];

var myForm=document.forms["form2"];

²  提交表單

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

通用提交按鈕：

<input type="submit"value="Submit Form">

自定義提交按鈕：

<button type="submit">SubmitForm</button>

影象按鈕：

<input type="image"src="graphic.gif">

只要表單中存在上面列出的任何一種按鈕，那麼在相應表單控制元件擁有焦點的情況下，按回車鍵就可以提交該表單。

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

在JavaScript中以程式設計方式呼叫submit()方法也可以提交表單。而且這種方式無需表單包含提交按鈕，任何時候都可以正常提交表單：

varform=document.getElementById("myForm");

form.submit();

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

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

²  重置表單

在使用者單擊重置按鈕時，表單會被重置。使用type特性值為“reset”的<input>或<button>都可以建立重置按鈕：

通用重置按鈕：

<input type="reset"value="Reset Form">

自定義重置按鈕：

<button type="reset">ResetForm</button>

在重置表單時，所有表單欄位都會恢復到頁面剛載入完畢時的初始值。如果某個欄位的初始值為空，就會恢復為空；而帶有預設值的欄位，也會恢復為預設值。

使用者單擊重置按鈕重置表單時，會觸發reset事件。利用這個機會，我們可以在必要時取消重置操作。

與提交表單一樣，也可以通過JavaScript來重置表單：

varform=document.getElementById("myForm");

form.reset();

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

表單欄位

每個表單都有elements屬性，該屬性是表單中所有元素的集合。這個elements集合是一個有序列表，其中包含著表單中的所有欄位，例如<input>、<button>、<textarea>和<fieldset>。每個表單欄位在elements集合中的順序，與它們出現在標記中的順序相同，可以按照位置和name特性來訪問它們：

varform=document.getElementById("form1");

取得表單中的第一個欄位：

var field1=form.elements[0];

取得名為“textbox1”的欄位：

varfield2=form.elements["textbox1"];

取得表單中包含的欄位的數量：

var fieldCount=form.elements.length;

如果有多個表單控制元件都在使用一個name（如單選按鈕），那麼就會返回以該name命名的一個NodeList（假設在id為myForm的HTML表單中有3個單選按鈕，它們的name都是color）：

varform=document.getElementById("myForm");

varcolorFields=form.elements["color"];

alert(colorFields.length);//3

通過form.elements[0]，訪問到的第一個表單欄位，與包含在form.elements["color"]中的第一個元素相同：

var firstColorField=colorFields[0];

var firstFormField=form.elements[0];

alert(firstColorField===firstFormField);//true

共有的表單欄位屬性：

除了form屬性之外，可以通過JavaScript動態修改其他任何屬性。

除了<fieldset>之外，所有表單欄位都有type屬性：（對於input元素，這個值等於HTML特性type的值。）

<input>和<button>元素的type屬性是可以動態修改的，而<select>元素的type屬性則是隻讀的。

共有的表單欄位方法：

每個表單欄位都有兩個方法：focus()和blur()。其中focus()方法用於將瀏覽器的焦點設定到表單欄位，即啟用表單欄位，使其可以響應鍵盤事件；blur()方法的作用是從元素中移走焦點，在呼叫blur()方法時，並不會把焦點轉移到某個特定的元素上，僅僅是將焦點從呼叫這個方法的元素上面移走而已。

HTML5為表單欄位新增了autofocus屬性。在支援這個屬性的瀏覽器中，只要設定這個屬性，不用JavaScript就能自動把焦點移動到相應欄位：

<input type="text"autofocus>

共有的表單欄位事件：

除了支援滑鼠、鍵盤、更改和HTML事件之外，所有表單欄位都支援下面三個事件：

文字框指令碼

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

要表現文字框，必須將<input>元素的type特性設定為“text”。而通過設定size特性，可以指定文字框中能夠顯示的字元數。通過value特性，可以設定文字框的初始值。而maxlength特性則用於指定文字框可以接受的最大字元數。

<textarea>元素則始終會呈現為一個多行文字框。要指定文字框的大小，可以使用rows和cols特性：其中rows特性指定的是文字框的字元行數，而cols特性指定的是文字框的字元列數。與<input>元素不同，<textarea>的初始值必須要放在<textarea>和</textarea>之間，且不能在HTML中給<textarea>指定最大字元數。

這兩種文字框都會將使用者輸入的內容儲存在value屬性中，可以通過這個屬性讀取和設定文字框的值。

選擇文字

這兩種文字框都支援select()方法，這個方法用於選擇文字框中的所有文字。在呼叫select()方法時，大多數瀏覽器都會將焦點設定到文字框中。這個方法不接受引數，可以在任何時候被呼叫。

選擇事件：

在選擇了文字框中的文字時，就會觸發select事件。另外在呼叫select()方法時也會觸發select事件。

取得選擇的文字：

selectionStart和selectionEnd這兩個屬性中儲存的是基於0的數值，表示所選擇文字的範圍（即文字選取開頭和結尾的偏移量）。

要取得使用者在文字框中選擇的文字，可以使用：

vartextbox=document.forms[0].elements["textbox1"];

function getSelectedText(textbox){

         returntextbox.value.substring(textbox.selectionStart,textbox.selectionEnd);

}

選擇部分文字：

所有文字框都有一個setSelectionRange()方法，這個方法接收兩個引數：要選擇的第一個字元的索引和要選擇的最後一個字元之後的字元的索引：

textbox.value="Hello World!";

選擇所有文字：

textbox.setSelectionRange(0,textbox.value.length);//"HelloWorld!"

選擇前3個字元：

textbox.setSelectionRange(0,3);//"Hel"

選擇第4到6個字元：

textbox.setSelectionRange(4,7);//"oW"

要看到選擇的文字，必須在呼叫setSelectionRange()之前或之後立即將焦點設定到文字框。

選擇框指令碼

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

除了所有表單欄位共有的屬性和方法外，HTMLSelectElement型別還提供了下列屬性和方法：

選擇框的type屬性是“select-one”或者“select-multiple”，取決於HTML程式碼中有沒有multiple特性。

選擇框的value屬性由當前選中項決定，相應規則如下：

在DOM中，每個<option>元素都有一個HTMLOptionElement物件表示，HTMLOptionElement物件有下列屬性：

上面這些屬性主要是為了方便對選項資料的訪問，實現相同功能的常規的DOM方法效率比較低：

varselectbox=document.forms[0].elements["location"];

//推薦

var text=selectbox.options[0].text;//選項的文字

var value=selectbox.options[0].value;//選項的值

//不推薦

vartext=selectbox.options[0].firstChild.nodeValue;//選項的文字

varvalue=selectbox.options[0].getAttribute("value");//選項的值

（提醒一點：選擇框的change事件與其他表單欄位的change事件觸發的條件不一樣：其他表單欄位的change事件是在值被修改且焦點離開當前欄位時觸發，而選擇框的change事件只要選中了選項就會觸發。）

²  選擇選項

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

var selectedIndex=selectbox.selectedIndex;

varselectedOption=selectbox.options[selectedIndex];

alert("Selectedindex:"+selectedIndex+"\nSelectedtext:"+selectedOption.text+"\nSelected value:"+selectedOption.value);

對於可以選擇多項的選擇框，selectedIndex屬性就好像只允許選擇一項一樣。設定selectedIndex會導致取消以前的所有選項並選擇指定的那一項，而讀取selectedIndex則只會返回選中項中第一項的索引值。

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

selectbox.options[0].selected=true;

與selectedIndex不同，在允許多選的選擇框中設定選擇的selected屬性，不會取消對其他選中項的選擇，因而可以動態選中任意多個項。（但是，如果是在單選選擇框中，修改某個選項的selected屬性則會取消對其他選項的選擇。需要注意的是，將selected屬性設定為false對單選選擇框沒有影響。）

實際上，selected屬性的作用主要是確定使用者選擇了選擇框中的哪一項，要取得所有選中的項，可以迴圈遍歷選項集合，然後測試每個選項的selected屬性：

function getSelectedOptions(selectbox){

         varresult=new Array();

         varoption=null;

         for(vari=0,len=selectbox.options.length;i<len;i++){

                   option=selectbox.options[i];

                   if(option.selected){

                            result.push(option);

                   }

         }

         returnresult;

}

使用getSelectedOptions()函式取得選中項，使用for迴圈構建了一條包含所有選中項索引、文字和值的資訊：

var selectbox=document.getElementById("selLocation");

varselectedOptions=getSelectedOptions(selectbox);

var message="";

for(vari=0,len=selectedOptions.options.length;i<len;i++){

         message+="Selectedindex:"+selectedOptions[i].index+"\nSelected text:"+selectedOptions[i].text+"\nSelectedvalue:"+selectedOptions[i].value);

}

alert(message);

²  新增選項

可以使用JavaScript動態建立選項，並將它們新增到選擇框中。

第一種是使用DOM方法：

varnewOption=document.createElement("option");

newOption.appendChild(document.createTextNode("OptionText"));

newOption.setAttribute("value","OptionValue");

selectbox.appendChild(newOption);

第二種方式是使用Option建構函式來建立新選項，Option建構函式接受兩個引數：文字（text）和值（value），第二個引數可選（這種方式在除IE外的瀏覽器中都可以使用）：

var newOption=new Option("OptionText","Option Value");

selectbox.appendChild(newOption);

第三種新增新選項的方式是使用選擇框的add()方法。DOM規定這個方法接受兩個引數：要新增的新選項和將位於新選項之後的選項。如果想在列表的最後新增一個選項，應該將第二個引數設定為undefined以相容所有瀏覽器：

var newOption=new Option("OptionText","Option Value");

selectbox.add(newOption,undefined);

²  移除選項

移除選項的方式也有很多種。

可以使用DOM的removeChild()方法，為其傳入要移除的選項：

selectbox.removeChild(selectbox.options[0]);

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

selectbox.remove(0);

將相應選項設定為null：

selectbox.options[0]=null;

²  移動和重排選項

使用DOM的appendChild()方法，就可以將一個選擇框中的選項直接移動到另一個選擇框中：（為appendChild()方法傳入一個文件中已有的元素，那麼就會先從該元素的父節點中移除它，再把它新增到指定的位置。）

varselectbox1=document.getElementById("selLocations1");

varselectbox2=document.getElementById("selLocations2");

selectbox2.appendChild(selectbox1.options[0]);

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

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

var optionToMove=selectbox.options[i];

selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index-1]);

（第二行程式碼對除第一個選項之外的其他選項都成立。）

類似的可以使用下列程式碼將選擇框中的選項向後移動一個位置：

var optionToMove=selectbox.options[i];

selectbox.insertBefore(optionToMove,selectbox.options[optionToMove.index+2]);

（第二行程式碼適用於選擇框中的所有選項，包括最後一個選項。）

在表單提交期間，瀏覽器是怎樣將資料傳送給伺服器的：