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

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

caoporm97国产在线视频|欧美性XXXXX精品|一本一道久久a久久精品综合开|精品久久久久久久久久久AⅤ|

js中表單的基礎知識及提交表單和重置表單的操作方法

歡迎您的光顧，我們將竭誠為您服務×