什么是表單？

一個表單有三個基本組成部分： 表單標(biāo)簽：這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。 表單域：包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。 表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕；用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了處理腳本的處理工作。

JavaScript與表單間的關(guān)系：JS最初的應(yīng)用就是用于分擔(dān)服務(wù)器處理表單的責(zé)任，打破依賴服務(wù)器的局面，盡管目前web和javascript都有了長足的發(fā)展，web表單依然沒有為許多常見的任務(wù)提供現(xiàn)成的解決方案，很多開發(fā)人員不僅會在驗(yàn)證表單的時候使用javascript，而且還會用來增強(qiáng)一些標(biāo)準(zhǔn)表單控件的默認(rèn)行為。

一 ,表單的基礎(chǔ)知識

在HTML中，表單由form標(biāo)簽，在javascript中，表單對應(yīng)HTMLFormElement類型，HTMLFormElement類型繼承HTMLElement類型，所有它和其他的Element元素有相同的默認(rèn)屬性，同時它也有自己的屬性和方法：

acceptCharset：服務(wù)器能夠處理的字符集；等價于 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()：將所有表單域重置為默認(rèn)值。

submit()：提交表單。

target：用于發(fā)送請求和接收響應(yīng)的窗口名稱；等價于 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">

以這種方式提交表單時，瀏覽器會在將請求發(fā)送給服務(wù)器之前觸發(fā) submit 事件。這樣，我們就有機(jī)會驗(yàn)證表單數(shù)據(jù)，并據(jù)以決定是否允許表單提交。阻止這個事件的默認(rèn)行為就可以取消表單提交

在JS中我們同樣可以以編程的方式調(diào)用submit（）方法來提交表單：

var form = document.getElementById("myForm");
//提交表單
　form.submit();

阻止表單提交（阻止默認(rèn)事件）：

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件對象
event = EventUtil.getEvent(event);
//阻止默認(rèn)事件
EventUtil.preventDefault(event);
});

在表單數(shù)據(jù)無效而不能發(fā)送給服務(wù)器時，可以使用這一技術(shù)

重置表單：

<!-- 通用重置按鈕 -->
<input type="reset" value="Reset Form">
<!-- 自定義重置按鈕 -->
<button type="reset">Reset Form</button>

在重置表單時，所有表單字段都會恢復(fù)到頁面剛加載完畢時的初始值

用JS方法來重置表單：

var form = document.getElementById("myForm");
//重置表單
form.reset();

阻止重置表單的默認(rèn)操作：

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件對象
event = EventUtil.getEvent(event);
//阻止表單重置
EventUtil.preventDefault(event);
});

表單字段：

每個表單都有Element屬性，該屬性是表單中所有表單元素（字段）的集合。這個集合是一個有序列表，每個表單字段在element集合中出現(xiàn)的順序，與在標(biāo)記中出現(xiàn)的先后順序相同，可以按位置和name值來訪問他們。常見的表單字段有input，select，fieldset，要取得表單中的表單字段：

var form = document.getElementById("form1");
//取得表單中的第一個字段
var field1 = form.elements[0];
//取得名為"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表單中包含的字段的數(shù)量
var fieldCount = form.elements.length;

共有的表單字段屬性：

disabled：布爾值，表示當(dāng)前字段是否被禁用。

form：指向當(dāng)前字段所屬表單的指針；只讀。

name：當(dāng)前字段的名稱。

readOnly：布爾值，表示當(dāng)前字段是否只讀。

tabIndex：表示當(dāng)前字段的切換（tab）序號。

type：當(dāng)前字段的類型，如"checkbox"、 "radio"，等等。

value：當(dāng)前字段將被提交給服務(wù)器的值。對文件字段來說，這個屬性是只讀的，包含著文件在計(jì)算機(jī)中的路徑

除了 form 屬性之外，可以通過 JavaScript 動態(tài)修改其他任何屬性。

能夠動態(tài)修改表單字段屬性，意味著我們可以在任何時候，以任何方式來動態(tài)操作表單。

用戶可能會重復(fù)單擊表單的提交按鈕。在涉及信用卡消費(fèi)時，這就是個問題：因?yàn)闀?dǎo)致費(fèi)用翻番。

為此，最常見的解決方案，就是在第一次單擊后就禁用提交按鈕。只要偵聽 submit 事件，并在該事件發(fā)生時禁用提交按鈕即可 ：

//避免多次提交表單
　EventUtil.addHandler(form, "submit", function(event){
　event = EventUtil.getEvent(event);
　var target = EventUtil.getTarget(event);
//取得提交按鈕
　var btn = target.elements["submit-btn"];
//禁用它
　btn.disabled = true;
　});

除了<fieldset>之外，所有表單字段都有 type 屬性。對于<input>元素，這個值等于 HTML 特性 type 的值。對于其他元素，這個 type 屬性的值如下表所列。

共有的表單字段方法 ：

每個表單字段都有兩個方法： focus()和 blur()。使用 focus()方法，可以將用戶的注意力吸引到頁面中的某個部位。例如，在頁面加載完畢后，將焦點(diǎn)轉(zhuǎn)移到表單中的第一個字段。

EventUtil.addHandler(window, "load", function(event){ /*給window綁定一個監(jiān)聽事件，放頁面加載完成，光標(biāo)自動對準(zhǔn)在指定的表單字段*/
document.forms[0].elements[0].focus();
});

HTML5 為表單字段新增了一個 autofocus 屬性。在支持這個屬性的瀏覽器中，只要設(shè)置這個屬性，不用 JavaScript 就能自動把焦點(diǎn)移動到相應(yīng)字段。

例如：

<input type="text" autofocus>

與 focus()方法相對的是 blur()方法，它的作用是從元素中移走焦點(diǎn):

document.forms[0].elements[0].blur();

change事件：對于<input>和<textarea>元素，在它們失去焦點(diǎn)且 value 值改變時觸發(fā)；對于

<select>元素，在其選項(xiàng)改變時觸發(fā)。

二，文本框腳本

在 HTML 中，有兩種方式來表現(xiàn)文本框：一種是使用<input>元素的單行文本框，另一種是使用<textarea>的多行文本框。

選擇文本：

在文本框獲得焦點(diǎn)時選擇其所有文本，這是一種非常常見的做法 ，實(shí)現(xiàn)代碼如下：

EventUtil.addHandler(textbox, "focus", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
target.select();
});

取得選擇的文本 ：

雖然通過 select 事件我們可以知道用戶什么時候選擇了文本，但仍然不知道用戶選擇了什么文本。HTML5 通過一些擴(kuò)展方案解決了這個問題，以便更順利地取得選擇的文本。該規(guī)范采取的辦法是添加兩個屬性： selectionStart 和 selectionEnd。

function getSelectedText(textbox){
return textbox.value.substring(textbox.selectionStart, textbox.selectionEnd);
}

IE9+、 Firefox、 Safari、 Chrome 和 Opera 都支持這兩個屬性。 IE8 及之前版本不支持這兩個屬性，而是提供了另一種方案。 IE8 及更早的版本中有一個 document.selection 對象，其中保存著用戶在整個文檔范圍內(nèi)選擇的文本信息

function getSelectedText(textbox){
if (typeof textbox.selectionStart == "number"){
return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
} else if (document.selection){
return document.selection.createRange().text;
}
}

過濾輸入：

我們經(jīng)常會要求用戶在文本框中輸入特定的數(shù)據(jù)，或者輸入特定格式的數(shù)據(jù)。

EventUtil.addHandler(textbox, "keypress", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);//取得輸入鍵的字符編碼
var charCode = EventUtil.getCharCode(event);
if (!/\d/.test(String.fromCharCode(charCode))){ //將字符編碼轉(zhuǎn)換到字符，并用正則表達(dá)式檢測是否符合匹配

EventUtil.preventDefault(event);

}
});

以上代碼實(shí)現(xiàn)對表單字段中輸入的數(shù)據(jù)的控制，只允許輸入數(shù)字

有時我們想要屏蔽哪些非數(shù)字的鍵，而不像屏蔽哪些基本鍵和按下ctrl鍵的操作。

自動切換焦點(diǎn)：

使用 JavaScript 可以從多個方面增強(qiáng)表單字段的易用性。其中，最常見的一種方式就是在用戶填寫完當(dāng)前字段時，自動將焦點(diǎn)切換到下一個字段。為增強(qiáng)易用性，同時加快數(shù)據(jù)輸入，可以在前一個文本框中的字符達(dá)到最大數(shù)量后，自動將焦點(diǎn)切換到下一個文本框。

比如對于下面的表單字段而言：

<input type="text" name="tel1" id="txtTel1" maxlength="3">

<input type="text" name="tel2" id="txtTel2" maxlength="3">
<input type="text" name="tel3" id="txtTel3" maxlength="4">

想要達(dá)到自動切換焦點(diǎn)的效果，可以這樣做：

(function(){
function tabForward(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event); //取得事件源
if (target.value.length == target.maxLength){ //檢測輸入的字符是否達(dá)到最大的字符要求
　var form = target.form;//取得該字段所在的表單
for (var i=0, len=form.elements.length; i < len; i++) { //遍歷表單的字段
if (form.elements[i] == target) {//當(dāng)遍歷到當(dāng)前所在的目標(biāo)字段時，將焦點(diǎn)對準(zhǔn)下一個表單字段
if (form.elements[i+1]){
form.elements[i+1].focus();
}
return;
}
}
}
}
var textbox1 = document.getElementById("txtTel1"); //取得目標(biāo)
var textbox2 = document.getElementById("txtTel2");　
var textbox3 = document.getElementById("txtTel3");
EventUtil.addHandler(textbox1, "keyup", tabForward);　//綁定事件
EventUtil.addHandler(textbox2, "keyup", tabForward);
EventUtil.addHandler(textbox3, "keyup", tabForward);
})();

HTML5約束驗(yàn)證API

為了在將表單提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)，HTML5 新增了一些功能。

必填字段：required，例子比如：<input type="text" name="username" required>

type屬性："email"類型要求輸入的文本必須符合電子郵件地址的模式，而"url"類型要求輸入的文本必須符合 URL 的模式。

pattern屬性：這個屬性的值是一個正則表達(dá)式，用于匹配文本框中的值。例子如：<input type="text" pattern="\d+" name="count">

禁用驗(yàn)證：通過設(shè)置 novalidate 屬性，可以告訴表單不進(jìn)行驗(yàn)證。 例子如：

<form method="post" action="signup.php" novalidate>
<!--這里插入表單元素-->
</form>

三，選擇框腳本

選擇框是通過<select>和<option>元素創(chuàng)建的。 該類型還提供下列屬性和方法：

add(newOption, relOption)：向控件中插入新<option>元素，其位置在相關(guān)項(xiàng)（relOption）之前。

multiple：布爾值，表示是否允許多項(xiàng)選擇；等價于 HTML 中的 multiple 特性。

options：控件中所有<option>元素的 HTMLCollection。

remove(index)：移除給定位置的選項(xiàng)。

selectedIndex：基于 0 的選中項(xiàng)的索引，如果沒有選中項(xiàng)，則值為-1。對于支持多選的控件，只保存選中項(xiàng)中第一項(xiàng)的索引。

size：選擇框中可見的行數(shù)；等價于 HTML 中的 size 特性。

選擇框的 type 屬性不是"select-one"，就是"select-multiple"，這取決于 HTML 代碼中有沒有 multiple 特性。選擇框的 value 屬性由當(dāng)前選中項(xiàng)決定，相應(yīng)規(guī)則如下。

如果沒有選中的項(xiàng)，則選擇框的 value 屬性保存空字符串。

如果有一個選中項(xiàng)，而且該項(xiàng)的 value 特性已經(jīng)在 HTML 中指定，則選擇框的 value 屬性等于選中項(xiàng)的 value 特性。即使 value 特性的值是空字符串，也同樣遵循此條規(guī)則。

如果有一個選中項(xiàng)，但該項(xiàng)的 value 特性在 HTML 中未指定，則選擇框的 value 屬性等于該項(xiàng)的文本。

如果有多個選中項(xiàng)，則選擇框的 value 屬性將依據(jù)前兩條規(guī)則取得第一個選中項(xiàng)的值。

選擇選項(xiàng)：

對于只允許選擇一項(xiàng)的選擇框，訪問選中項(xiàng)的最簡單方式，就是使用選擇框的 selectedIndex 屬性。例子如：

var selectedOption = selectbox.options[selectbox.selectedIndex];

添加選項(xiàng)：

可以使用 JavaScript 動態(tài)創(chuàng)建選項(xiàng)，并將它們添加到選擇框中。

第一種方式就是使用如下所示的 DOM 方法：

var newOption = document.createElement("option");
newOption.appendChild(document.createTextNode("Option text"));
newOption.setAttribute("value", "Option value");
selectbox.appendChild(newOption);

第二種方式是使用 Option 構(gòu)造函數(shù)來創(chuàng)建新選項(xiàng) :

var newOption = new Option("Option text", "Option value");
selectbox.appendChild(newOption);

第三種添加新選項(xiàng)的方式是使用選擇框的 add()方法，DOM 規(guī)定這個方法接受兩個參數(shù)，要添加的新選項(xiàng)和將位于新選項(xiàng)之后的選項(xiàng) ：

var newOption = new Option("Option text", "Option value"); //
selectbox.add(newOption, undefined); //最佳方案 ，將新選項(xiàng)添加到列表最后

移除選項(xiàng)：

DOM 的 removeChild()方法，為其傳入要移除的選項(xiàng)，如下面的例子所示：

selectbox.removeChild(selectbox.options[0]); //移除第一個選項(xiàng)

其次，可以使用選擇框的 remove()方法 ：

selectbox.remove(0); //移除第一個選項(xiàng)

最后一種方式，就是將相應(yīng)選項(xiàng)設(shè)置為 null：

selectbox.options[0] = null; //移除第一個選項(xiàng)

要清除選擇框中所有的項(xiàng)，需要迭代所有選項(xiàng)并逐個移除它們 ：

function clearSelectbox(selectbox){
for(var i=0, len=selectbox.options.length; i < len; i++){
selectbox.remove(0);
　}
}

這個函數(shù)每次只移除選擇框中的第一個選項(xiàng)。由于移除第一個選項(xiàng)后，所有后續(xù)選項(xiàng)都會自動向上移動一個位置，因此重復(fù)移除第一個選項(xiàng)就可以移除所有選項(xiàng)了。

移動和重排選項(xiàng)：

如果為 appendChild()方法傳入一個文檔中已有的元素，那么就會先從該元素的父節(jié)點(diǎn)中移除它，再把它添加到指定的位置 ：

var selectbox1 = document.getElementById("selLocations1"); //每個子節(jié)點(diǎn)只有一個父節(jié)點(diǎn)，所以會先刪除以前位置的節(jié)點(diǎn)
var selectbox2 = document.getElementById("selLocations2");
selectbox2.appendChild(selectbox1.options[0]);

重排選項(xiàng)次序的過程也十分類似，最好的方式仍然是使用 DOM 方法。要將選擇框中的某一項(xiàng)移動到特定位置，最合適的 DOM 方法就是 insertBefore()；

var optionToMove = selectbox.options[1];
selectbox.insertBefore(optionToMove, selectbox.options[optionToMove.index-1]); //要在選擇框中向前移動一個選項(xiàng)的位置

表單序列化：

表單序列化簡單說就是將，各表單字段按名值對的形式進(jìn)行url編碼。

表單序列化有以下規(guī)則：

　對表單字段的名稱和值進(jìn)行 URL 編碼，使用和號（&）分隔。

　不發(fā)送禁用的表單字段。

　只發(fā)送勾選的復(fù)選框和單選按鈕。

　不發(fā)送 type 為"reset"和"button"的按鈕。

　多選選擇框中的每個選中的值單獨(dú)一個條目。

　在單擊提交按鈕提交表單的情況下，也會發(fā)送提交按鈕；否則，不發(fā)送提交按鈕。也包括 type為"image"的<input>元素。

<select>元素的值，就是選中的<option>元素的 value 特性的值。如果<option>元素沒有value 特性，則是<option>元素的文本值。

四，富文本編輯

這一技術(shù)的本質(zhì)，就是在頁面中嵌入一個包含空 HTML 頁面的 iframe。通過設(shè)置 designMode 屬性，這個空白的 HTML 頁可以被編輯，而編輯對象則是該頁面<body>元素的 HTML 代碼。 designMode 屬性有兩個可能的值： "off"（默認(rèn)值）和"on"。在設(shè)置為"on"時，整個文檔都會變得可以編輯（顯示插入符號），然后就可以像使用字處理軟件一樣，通過鍵盤將文本內(nèi)容加粗、變成斜體，等等。另一種編輯富文本內(nèi)容的方式是使用名為 contenteditable 的特殊屬性，這個屬性也是由 IE 最早實(shí)現(xiàn)的?？梢园?contenteditable 屬性應(yīng)用給頁面中的任何元素，然后用戶立即就可以編輯該元素。

以上這篇基于JavaScript表單腳本(詳解)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。