前面的話

　　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重新置成1return false; } form.onsubmit = function(){form.test.value = "3"; } </script>

style="width: 100%; height: 50px;" src="https://demo.xiaohuochai.site/html/formobj/f1.html" frameborder="0" width="320" height="240">

表單方法

submit()方法

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

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

reset()方法

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

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

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

style="width: 100%; height: 40px;" src="https://demo.xiaohuochai.site/html/formobj/f2.html" frameborder="0" width="320" height="240">

　　與調用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>

style="width: 100%; height: 80px;" src="https://demo.xiaohuochai.site/html/formobj/f3.html" frameborder="0" width="320" height="240">

更多專業前端知識，請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的深入理解表单脚本系列第一篇——表单对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。