表單腳本 ( 14 章 )

在HTML中，表單是由<form>元素來表示的。

取得表單的方法

var form = document.getElementById(“id1”);

var firstForm = document.forms[0];　　// 取得頁面中的第一個表單

var myForm = document.forms[“form2”];        //取得名為”Form2的表單”

送出表單的方法

<input type=”submit” value=”Bubmit Form”>　　// 通用送出按鈕

<button type=”submit”>Submit Form</button>　　// 自定義送出按鈕

<input type=”submit” src=”graphic.gif”>　　// 圖像按鈕

在 JavaScript中，以變成方式調用 submit() 方法也可以送出表單，而且，這種方式無需表單包含送出按鈕，任何時候都可以正常送出表單。

var form = document.getElementById(“myForm”);

form.submit() ;   // 送出 , 不會觸發 submit 事件。

重置表單

在重置表單時, 所有表單字段都會恢複到頁面剛剛加載完畢時的初始值.

<input type="reset" value="Reset Form">　　// 通用重置按鈕

<button type="reset">Reset Form</button> // 自定義重置按鈕

重置表單經常會導緻使用者摸不着頭腦, 事實上, 重置表單需求很少見.

當使用者單擊重置按鈕時，表單會被重置。 <input type=”reset”value=”reset Form”>

<button type=”reset”>Reset Form</button>

帶有預設值的也會被初始化為預設值

form.reset() ;

表單字段

表單中可能包含很多字段, 當你送出表單時, 可能送出了多個内容, 例如<input><textarea><button><fieldset> 每個表單字段在 elements集合中的順序, 與它們出現在标記中的順序相同, 可以按照位置和name特性來通路它們. 例如:

var form = document.getElementById("form1"); // 通過ID, 找到 form

var field1 = form.elements[0] // 取得表單中第一個字段

var field2 = form.elements["textbox1"]; // 取得表單中 名為 textbox1 的字段

var fieldCount = form.elements.length; // 取得表單中包含字段的數量

如果多個表單控件都使用一個name(如單選按鈕), 可以傳回一個name 的 NodeList, 例如:

1 <form method="post" id="myForm">
2     <ul>
3         <li><input type="radio" name="color" value="red">Red</li>
4         <li><input type="radio" name="color" value="green">green</li>
5         <li><input type="radio" name="color" value="blue">blue</li>
6     </ul>
7 </form>      

1 var form = document.getElementById("myForm");
2 
3 var colorFields = form.elements["color"];  // 得到的是一個數組 NodeList
4 alert(colorFields.length);   // 3
5 var firstColorField = colorFields[0];
6 var firstFormField = form.elements[0];
7 alert(fistColorField === firstFormField);  // true