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

目錄

前面的話

　　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>都可以創建重置按鈕

<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>