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

元素來表示的，而在 JavaScript 中，表單對(duì)應(yīng)的則是 HTMLForm- Element 類型。HTMLFormElement 繼承了 HTMLElement，因而與其他HTML元素具有相同的默認(rèn)屬性。不過，HTMLFormElement 也有它自己下列獨(dú)有的屬性和方法。?
? ? ? ?acceptCharset：服務(wù)器能夠處理的字符集；等價(jià)于 HTML中的 accept-charset 特性。?
? ? ? ?action：接受請(qǐng)求的 URL；等價(jià)于 HTML中的 action 特性。?
? ? ? ?elements：表單中所有控件的集合（HTMLCollection）。?
? ? ? ?enctype：請(qǐng)求的編碼類型；等價(jià)于 HTML中的 enctype 特性。?
? ? ? ?length：表單中控件的數(shù)量。?
? ? ? ?method：要發(fā)送的 HTTP請(qǐng)求類型，通常是"get"或"post"；等價(jià)于 HTML的 method 特性。?
? ? ? ?name：表單的名稱；等價(jià)于 HTML的 name 特性。
? ? ? ?reset()：將所有表單域重置為默認(rèn)值。?
? ? ? ?submit()：提交表單。?
? ? ? ?target：用于發(fā)送請(qǐng)求和接收響應(yīng)的窗口名稱；等價(jià)于 HTML的 target 特性。取得元素引用的方式有好幾種。其中常見的方式就是將它看成與其他元素一樣，并為其添加 id 特性，然后再像下面這樣使用 getElementById()方法找到它。?
? ? ? ? var form = document.getElementById("form1");?
? ? ? ?其次，通過 document.forms 可以取得頁面中所有的表單。在這個(gè)集合中，可以通過數(shù)值索引或 name值來取得特定的表單，如下面的例子所示。
? ? ? ?var firstForm = document.forms[0];
? ? ? ?//取得頁面中的第一個(gè)表單
? ? ? ?var myForm = document.forms["form2"];
? ? ? ?//取得頁面中名稱為"form2"的表單?
? ? ? ?另外，在較早的瀏覽器或者那些支持向后兼容的瀏覽器中，也會(huì)把每個(gè)設(shè)置了 name 特性的表單作為屬性保存在 document 對(duì)象中。例如，通過 document.form2 可以訪問到名為"form2"的表單。不過，我們不推薦使用這種方式：一是容易出錯(cuò)，二是將來的瀏覽器可能會(huì)不支持。注意，可以同時(shí)為表單指定 id 和 name 屬性，但它們的值不一定相同。?
? ? ? ?1. 提交表單
? ? ? ?用戶單擊提交按鈕或圖像按鈕時(shí)，就會(huì)提交表單。使用或
? ? ? ? ?
? ? ? ?
? ? ? ?只要表單中存在上面列出的任何一種按鈕，那么在相應(yīng)表單控件擁有焦點(diǎn)的情況下，按回車鍵就可以提交該表單。（textarea 是一個(gè)例外，在文本區(qū)中回車會(huì)換行。）如果表單里沒有提交按鈕，按回車鍵不會(huì)提交表單。?
? ? ? ?以這種方式提交表單時(shí)，瀏覽器會(huì)在將請(qǐng)求發(fā)送給服務(wù)器之前觸發(fā) submit 事件。這樣，我們就有機(jī)會(huì)驗(yàn)證表單數(shù)據(jù)，并據(jù)以決定是否允許表單提交。阻止這個(gè)事件的默認(rèn)行為就可以取消表單提交。例如，下列代碼會(huì)阻止表單提交。?
? ? ? ? var form = document.getElementById("myForm");?
? ? ? ?EventUtil.addHandler(form, "submit", function(event){?
? ? ? ? //取得事件對(duì)象
? ? ? ? event = EventUtil.getEvent(event);?
? ? ? ? //阻止默認(rèn)事件
? ? ? ? EventUtil.preventDefault(event); });?
這里使用了前面定主的 EventUtil 對(duì)象，以便跨瀏覽器處理事件。調(diào)用 prevetnDefault() 方法阻止了表單提交。一般來說，在表單數(shù)據(jù)無效而不能發(fā)送給服務(wù)器時(shí)，可以使用這一技術(shù)。在 JavaScript 中，以編程方式調(diào)用 submit()方法也可以提交表單。而且，這種方式無需表單包含提交按鈕，任何時(shí)候都可以正常提交表單。來看一個(gè)例子。?
? ? ? ? var form = document.getElementById("myForm");?
? ? ? ? //提交表單
? ? ? ?form.submit();?
? ? ? ?在以調(diào)用 submit()方法的形式提交表單時(shí)，不會(huì)觸發(fā) submit 事件，因此要記得在調(diào)用此方法之前先驗(yàn)證表單數(shù)據(jù)。 ? ? ? ?
? ? ? ?提交表單時(shí)可能出現(xiàn)的大問題，就是重復(fù)提交表單。在第一次提交表單后，如果長(zhǎng)時(shí)間沒有反應(yīng)，用戶可能會(huì)變得不耐煩。這時(shí)候，他們也許會(huì)反復(fù)單擊提交按鈕。結(jié)果往往很麻煩（因?yàn)榉?wù)器要處理重復(fù)的請(qǐng)求），或者會(huì)造成錯(cuò)誤（如果用戶是下訂單，那么可能會(huì)多訂好幾份）。解決這一問題的辦法有兩個(gè)：在第一次提交表單后就禁用提交按鈕，或者利用 onsubmit 事件處理程序取消后續(xù)的表單提交操作。?
? ? ? ?2. 重置表單
在用戶單擊重置按鈕時(shí)，表單會(huì)被重置。使用 type 特性值為"reset"的或?
? ? ? ?這兩個(gè)按鈕都可以用來重置表單。在重置表單時(shí)，所有表單字段都會(huì)恢復(fù)到頁面剛加載完畢時(shí)的初始值。如果某個(gè)字段的初始值為空，就會(huì)恢復(fù)為空；而帶有默認(rèn)值的字段，也會(huì)恢復(fù)為默認(rèn)值。用戶單擊重置按鈕重置表單時(shí)，會(huì)觸發(fā) reset 事件。利用這個(gè)機(jī)會(huì)，我們可以在必要時(shí)取消重置操作。例如，下面展示了阻止重置表單的代碼。?
? ? ? ? var form = document.getElementById("myForm");?
? ? ? ?EventUtil.addHandler(form, "reset", function(event){?
? ? ? ? //取得事件對(duì)象
? ? ? ? event = EventUtil.getEvent(event);?
? ? ? ? //阻止表單重置
? ? ? ? EventUtil.preventDefault(event); });?
? ? ? ? 與提交表單一樣，也可以通過 JavaScript來重置表單，如下面的例子所示。?
? ? ? ? var form = document.getElementById("myForm");?
? ? ? ? //重置表單
? ? ? ? form.reset();?
? ? ? ? 與調(diào)用 submit()方法不同，調(diào)用 reset()方法會(huì)像單擊重置按鈕一樣觸發(fā) reset 事件。?
? ? ? ?南昌網(wǎng)站建設(shè)公司百恒網(wǎng)絡(luò)前端開發(fā)工程師提醒大家在 Web 表單設(shè)計(jì)中，重置表單通常意味著對(duì)已經(jīng)填寫的數(shù)據(jù)不滿意。重置表單經(jīng)常會(huì)導(dǎo)致用戶摸不著頭腦，如果意外地觸發(fā)了表單重置事件，那么用戶甚至?xí)軔?火。事實(shí)上，重置表單的需求是很少見的。更常見的做法是提供一個(gè)取消按鈕，讓用戶能夠回到前一個(gè)頁面，而不是不分青紅皂白地重置表單中的所有值
? ?本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.希望此文對(duì)廣大技人員有所幫助。原創(chuàng)文章出自:南昌APP開發(fā)公司-百恒網(wǎng)絡(luò) http://m.myforexfactory.net/app/index.html 如轉(zhuǎn)載請(qǐng)注明出處!

js中表單的基礎(chǔ)知識(shí)及提交表單和重置表單的操作方法

歡迎您的光顧，我們將竭誠(chéng)為您服務(wù)×

js中表單的基礎(chǔ)知識(shí)及提交表單和重置表單的操作方法

歡迎您的光顧，我們將竭誠(chéng)為您服務(wù)×

歡迎您的光顧，我們將竭誠(chéng)為您服務(wù)×