一，基礎知識

1，取得<form>元素引用的方式，常用的是通過id，其次可以通過document.forms可以取得頁面中所有的表單，在這個集合中，可以通過數值索引或name值來取得特定的表單。

2，以下代碼生成的按鈕都可用來提交表單，點擊就提交

<!-- 通用提交按鈕 -->
<input type="submit" value="Submit form" />

<!-- 自定義提交按鈕 -->
<button type="submit">Submit Form</button>

<!-- 圖像按鈕 -->
 

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

阻止submit提交就用preventDefault()方法，還是用之前的EventUtil對象，在js中，除了按鈕點擊可以提交，還可以使用submit()方法，調用這個方法的時候，不會觸發submit事件

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

3，重置表單

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

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

也可以用js的reset()方法，form.reset()，和提交不同的是，這個方法會觸發reset事件。

4，表單字段

form.elements集合是一個有序列表，包含著所有字段，可以通過位置索引或name來訪問

5，共有的表單字段屬性

disabled，name，readOnly，type，value，可以直接修改它們的值：

var form = document.getElementById(‘myForm‘);
var field = form.elements[0];

field.value 
 
= ‘another value‘;

field.form === form;   // true
field.focus();
field.disabled = true;
field.type = ‘checkbox‘;  // 不推薦，如果是<input>是可行的

6，共有表單字段方法

focus()和blur()；HTML5為表單字段添加一個屬性，autofocus，為了保證設置了能正常運行，要先檢測，如果不能就用focus()

EventUtil.addHandler(window, ‘load‘, function(event){
     var element = document.forms[0].elements[0];
     if (element.autofocus !== true) {
         element.focus();
     }
})

autofocus是一個布爾值，所有支持它的瀏覽器中值是true，不支持的為空字符串（IE不支持）

7，共有表單字段事件

blur，change，foces，還是用EventUtil對象來處理

JavaScript學習日誌（七）：表單腳本