前面的話

　　javascript最初的一個(gè)應(yīng)用就是分擔(dān)服務(wù)器處理表單的責(zé)任，打破處處依賴服務(wù)器的局面。盡管目前的web和javascript已經(jīng)有了長足的發(fā)展，但web表單的變化并不明顯。由于web表單沒有為許多常見任務(wù)提供現(xiàn)成的解決方法，很多開發(fā)人員不僅會在驗(yàn)證表單時(shí)使用javascript，而且還增強(qiáng)了一些標(biāo)準(zhǔn)表單控件的默認(rèn)行為。本文是表單腳本系列第一篇——表單對象

?

表單屬性

　　在HTML中，表單是由form元素來表示的，而在javascript中，表單對應(yīng)的則是HTMLFormElement類型，HTMLFormElement繼承了HTMLElement，但也有自己獨(dú)有的屬性和方法

　　acceptCharset 　　服務(wù)器能夠處理的字符集；等價(jià)于HTML中的accept-charset特性

　　關(guān)于accept-charset屬性的詳細(xì)情況移步至此

　　action 　　接受請求的URL；等價(jià)于HTML中的action特性

　　關(guān)于action屬性的詳細(xì)情況移步至此

　　enctype　　 請求的編碼類型；等價(jià)于HTML中的enctype特性

　　關(guān)于enctype屬性的詳細(xì)情況移步至此

<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 　　表單中控件的數(shù)量

<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 　　要發(fā)送的HTTP請求類型，通常是"get"或"post"；等價(jià)于HTML的method特性

　　關(guān)于method屬性的詳細(xì)情況移步至此

　　name 　　表單的名稱；等價(jià)于HTML的name特性

　　關(guān)于name屬性的詳細(xì)情況移步至此

　　target 　　用于發(fā)送請求和接收響應(yīng)的窗口名稱；等價(jià)于HTML的target特性

　　關(guān)于target屬性的詳細(xì)情況移步至此

<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事件　　　　將所有表單域重置為默認(rèn)值

　　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阻止默認(rèn)事件，那么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中，以編程方式調(diào)用submit()方法也可以提交表單。而且，這種方式無需表單包含提交按鈕，任何時(shí)候都可以正常提交表單　　

　　以調(diào)用submit()方法提交表單時(shí)，不會觸發(fā)submit事件

reset()方法

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

　　[注意]元素重置時(shí)，不再觸發(fā)元素上的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">

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

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

　　點(diǎn)擊外部重置按鈕后，觸發(fā)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">

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。