深刻理解表單腳本系列第一篇——表單對象

前面的話

　　javascript最初的一個應用就是分擔服務器處理表單的責任，打破到處依賴服務器的局面。儘管目前的web和javascript已經有了長足的發展，但web表單的變化並不明顯。因爲web表單沒有爲許多常見任務提供現成的解決方法，不少開發人員不只會在驗證表單時使用javascript，並且還加強了一些標準表單控件的默認行爲。本文是表單腳本系列第一篇——表單對象

 

表單屬性

　　在HTML中，表單是由form元素來表示的，而在javascript中，表單對應的則是HTMLFormElement類型，HTMLFormElement繼承了HTMLElement，但也有本身獨有的屬性和方法

　　acceptCharset 　　服務器可以處理的字符集；等價於HTML中的accept-charset特性

　　關於accept-charset屬性的詳細狀況移步至此

　　action 　　接受請求的URL；等價於HTML中的action特性

　　關於action屬性的詳細狀況移步至此

　　enctype　　 請求的編碼類型；等價於HTML中的enctype特性

　　關於enctype屬性的詳細狀況移步至此

<form name="form" action="#"></form>
<script>
var form = document.form;
console.log(form.acceptCharset);//''
console.log(form.action);//"file:///C:/Users/Administrator/Desktop/iframe.html#"
console.log(form.enctype);//application/x-www-form-urlencoded
</script>

　　elements 　　表單中全部控件的集合(HTMLCollection)

　　length 　　表單中控件的數量

<form name="form" action="#">
    <input type="text">
    <textarea></textarea>
</form>    
<script>
var form = document.form;
console.log(form.elements)//[input,textarea]
console.log(form.length)//2
</script>

　　method 　　要發送的HTTP請求類型，一般是"get"或"post"；等價於HTML的method特性

　　關於method屬性的詳細狀況移步至此

　　name 　　表單的名稱；等價於HTML的name特性

　　關於name屬性的詳細狀況移步至此

　　target 　　用於發送請求和接收響應的窗口名稱；等價於HTML的target特性

　　關於target屬性的詳細狀況移步至此

<form name="form" action="#"></form>
<script>
var form = document.form;
console.log(form.method);//get
console.log(form.name);//form
console.log(form.target);//''
</script>

 

表單事件

　　reset事件　　　　將全部表單域重置爲默認值

　　submit事件 　　  提交表單

<form name="form" action="#">
    <input name="test" value="1">
    <input type="reset">
    <input type="submit">
</form>
<script>
var form = document.form;
form.onreset = function(){
    form.test.value = "2";
    //若不使用return false阻止默認事件，那麼reset將會把form.test的value從新置成1
    return false;
}
form.onsubmit = function(){
    form.test.value = "3";
}
</script>

表單方法

submit()方法

　　在javascript中，以編程方式調用submit()方法也能夠提交表單。並且，這種方式無需表單包含提交按鈕，任什麼時候候均可以正常提交表單　　

　　以調用submit()方法提交表單時，不會觸發submit事件

reset()方法

　　在用戶單擊重置按鈕時，表單會被重置。使用type特性值爲"reset"的<input>或<button>均可以建立重置按鈕

　　[注意]元素重置時，再也不觸發元素上的change和input事件

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

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

　　點擊外部提交按鈕後，瀏覽器URL變成file:///C:/inetpub/wwwroot/test.html?test=1#，且沒有觸發onreset事件，input的value值沒有變化

　　點擊外部重置按鈕後，觸發reset事件，input的value值變成2

<form name="form" action="#">
    <input name="test" value="1">
</form>
<button id="btn1">外部提交</button>
<button id="btn2">外部重置</button>
<script>
var form = document.form;
form.onreset = function(){
    form.test.value = "2";
    return false;
}
form.onsubmit = function(){form.test.value = "3";}
btn1.onclick = function(){form.submit();}
btn2.onclick = function(){form.reset();}
</script>