下面小編就為大家帶來一篇基於JavaScript表單腳本(詳解)。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧
什麼是表單？
一個表單有三個基本組成部分： 表單標籤：這裡麵包含了處理表單資料所用CGI程式的URL以及資料提交到伺服器的方法。 表單域：包含了文字方塊、密碼方塊、隱藏網域、多行文字方塊、核取方塊、單一選取方塊、下拉選取方塊和檔案上傳方塊等。 表單按鈕：包括提交按鈕、重設按鈕和一般按鈕；用於將資料傳送到伺服器上的CGI腳本或取消輸入，也可以用表單按鈕來控制其他定義了處理腳本的處理工作。
JavaScript與表單間的關係：JS最初的應用就是用來分擔伺服器處理表單的責任，打破依賴伺服器的局面，儘管目前web和javascript都有了長足的發展，web表單依然沒有為許多常見的任務提供現成的解決方案，許多開發人員不僅會在驗證表單的時候使用javascript，還會用來增強一些標準表單控制項的預設行為。
一,表單的基礎知識
在HTML中，表單由form標籤，在javascript中，表單對應HTMLFormElement類型，HTMLFormElement類型繼承HTMLElement類型，所有它和其他的Element元素有相同的預設屬性，同時它也有自己的屬性和方法：
acceptCharset：伺服器能夠處理的字元集；等價於HTML 中的accept-charset特性。
action：接受請求的 URL；等價於 HTML 中的 action 特性 。
elements：表單中所有控制項的集合（HTMLCollection）。
enctype：請求的編碼類型；等價於 HTML 中的 enctype 特性。
length：表單中控制項的數量。
method：要傳送的 HTTP 請求類型，通常是"get"或"post"；等價於 HTML 的 method 特性。
name：表單的名稱；等價於 HTML 的 name 特性。
reset()：將所有表單域重設為預設值。
submit()：提交表單。
target：用於傳送請求和接收回應的視窗名稱；等價於 HTML 的 target 特性。
要取得form表單元素的方法有： var form=document.getElementById('form1'); //透過id來取得表單元素
var firstForm=document.forms[0] ; //透過document.forms來取得頁面中的所有表單元素，透過索引值'0'，取得第一個表單元素
var form2=document.forms['form2']; //透過document.forms來取得頁面中的所有表單元素，透過name值取得特定的表單元素
#提交表單：
##
<!-- 通用提交按钮 --> <input type="submit" value="Submit Form"> <!-- 自定义提交按钮 --> <button type="submit">Submit Form</button> <!-- 图像按钮 --> <input type="image" src="graphic.gif">
var form = document.getElementById("myForm");
//提交表单
form.submit();var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});<!-- 通用重置按钮 --> <input type="reset" value="Reset Form"> <!-- 自定义重置按钮 --> <button type="reset">Reset Form</button>
var form = document.getElementById("myForm");
//重置表单
form.reset();##
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
});每個表單都有Element屬性，該屬性是表單中所有表單元素（欄位）的集合。這個集合是一個有序列表，每個表單欄位在element集合中出現的順序，與在標記中出現的先後順序相同，可以按位置和name值來存取他們。常見的表單欄位有input，select，fieldset，要取得表單中的表單欄位：
var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;#disabled：布林值，表示目前欄位是否已停用。
form：指向目前欄位所屬表單的指標；唯讀。
name：目前欄位的名稱。
readOnly：布林值，表示目前欄位是否唯讀。
tabIndex：表示目前欄位的切換（tab）序號。
type：目前欄位的類型，如"checkbox"、 "radio"，等等。
value：目前欄位將提交給伺服器的值。對檔案欄位來說，這個屬性是唯讀的，包含著檔案在電腦中的路徑
除了 form 屬性之外，可以透過 JavaScript 動態修改其他任何屬性。
能夠動態修改表單欄位屬性，意味著我們可以在任何時候，以任何方式來動態操作表單。
用户可能会重复单击表单的提交按钮。在涉及信用卡消费时，这就是个问题：因为会导致费用翻番。
为此，最常见的解决方案，就是在第一次单击后就禁用提交按钮。只要侦听 submit 事件，并在该事件发生时禁用提交按钮即可 ：
//避免多次提交表单
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});除了