?JavaScript表單編程

表單是Web上與用戶進行交互的主要界面。則我們需要掌握如何訪問用戶輸入的表單數據，校驗用戶輸入的正確性顯得至關重要。

??對Form元素進行腳本編寫

??獲取表單的應用

??使用DOM樹中定位一個元素的方法——getElementById()方法，并將表單的ID作為方法的參數；

var objForm = document.getElementById("form");

??使用文檔的表單集合，并且通過表單在forms集合中的位置或者通過其name屬性；?

var objForm = document.forms[0]; //不用下標就是獲得表單集合
var objForm = document.forms["name"];//得到名為name的表單

??獲取表單的字段

每個表單字段都包含在表單的elements集合中，我們可以通過使用表單元素的name屬性或者它在集合的位置，訪問集合中的不同字段；

??通過它在集合的位置訪問集合中字段；

var temp=oform.elements[0]; //得到表單第一個字段。

??使用表單元素的name屬性訪問集合中字段；

對該方法傳入name屬性的字符串；

var temp=oform.elements["text"]; //得到名為text1的字段。

每個表單字段稱為表單本事的一個屬性，可以直接通過其名稱訪；

var temp=oform.textbox1; //得到名為textbox1的字段。

如果名稱中間有空格，可以用中括號代替；

var temp=oform["text box 1"]; //得到名為text box 1的字段。

??表單字段元素對象

??form表單字段元素對象的方法

方法	描述
blur()	讓表單字段元素失去焦點，當前焦點移到后臺
focus()	讓表單字段元素獲得焦點
click()	模仿用戶鼠標單擊該元素的過程
setCapture()	在某個表單字段元素對象上捕獲當前網頁文檔上的鼠標事件
releaseCapture()	取消某個表單字段元素對象對當前網頁文檔鼠標事件的捕獲設置
add()	為列表框（select）增加一個選擇項(option)

??form表單字段元素對象的屬性

屬性	描述
defaultValue	設置或返回表單字段元素的默認值（初始值）
disabled	設置或返回文本輸入框的disabled狀態；該屬性用于指示一個表單控件是否可用，一個disable控件不允許用戶輸入
form	返回表單字段元素所屬于form表單對象
readOnly	設置或返回文本輸入框的readonly狀態
title	設置或返回表單字段元素title屬性
value	設置或返回表單字段元素的當前取值
checked	設置或返回單選按鈕、復選按鈕的選中狀態

??form表單字段元素對象的事件

事件	描述
onChange	當焦點離開文本輸入框且文本輸入框中的值改變時，或者改變列表框的選擇結果后，產生該事件
onSelect	當單行或多行文本輸入框中的文字被選擇加亮后，產生該事件
onFocus	當表單字段獲得焦點時，產生該事件
onBlur	當表單字段元素失去焦點時，產生該事件

??表單的提交和重置

??使用一個提交按鈕或者模擬提交按鈕的圖形來提交/重置表單

<input type="submit" value="Submit"/>　　　　 //submit按鈕提交表單
<input type="image" value="submit.gif"/>　　 //image按鈕提交表單
<button type="submit">Submit</button>　　　  //submit按鈕提交表單
<input type="reset" value="Reset"/>　　　　　//reset按鈕重置表單
<button type="reset">Reset</button>　　　 　 //reset按鈕重置表單 

??使用submit()方法或者reset()方法提交/重置表單

得到表單引用后，直接調用submit()方法或者reset()方法

oForm.submit(); //oForm表單提交
oForm.reset(); //oForm表單重置

??對文本框元素進行腳本編寫

??獲取/更改文本框的值

對于標簽<input/>和<textarea/>都支持同樣的屬性value，以獲取文本框中的文本；使用value屬性返回String類型的文本內容；

??選擇文本

兩種類型的文本框都支持select()方法，該方法用于選擇文本框中的所有文本。為使該方法起作用，文本框必須獲得焦點。為確保文本框獲得焦點，我們必須在調用select()方法之前，調用另外一個方法focus();

??文本框事件

兩種文本框都支持blur、focus、change和select事件。

??change事件——在用戶改變文本框的值之后，當文本框失去焦點時觸發該事件。

（PS：通過設置value屬性改變文本框的值時，不觸發該事件）

??select事件——在一個或者多個字符被選中時觸發事件；不管是手動選中還是使用select()方法。

??blur事件——當文本框失去焦點時觸發事件；

（PS：blur事件和change事件都是在文本框失去焦點后觸發，但是change事件是在文本框的值被改變的情況下才會觸發，如果沒有改變時只觸發blur事件；改變時則先觸發change事件，隨后再執行blur事件）；

??focus事件——當文本框獲得焦點時觸發事件；

??對列表框和組合框進行腳本編寫

??訪問選項

HTML?DOM將select元素中的每一項定義到一個options集合中，該集合中列出select控件中的所有option元素。

屬性	描述
id	設置或返回選項的?id。
index	返回下拉列表中某個選項的索引位置。
label	設置或返回選項的標記?（僅用于選項組）。
selected	設置或返回?selected?屬性的值。
text	設置或返回某個選項的純文本值。
value	設置或返回被送往服務器的值。

??添加選項

很多時候，列表框或者組合的選項數據，是來自于后臺數據服務器或者其它數據文件，那么我們就不能在XHTML中指定選項，必須使用JavaScript編碼動態地將數據項添加到select元素中，按照以下步驟將選項動態添加到select元素中：

Ⅰ?定義一個帶三個參數的方法，這三個參數分別是要添加選項的列表值、要添加的選項的名稱以及要添加的選項的值；

Ⅱ?使用DOM方法創建一個option元素，然后創建一個文本節點分配給選項的名稱；

Ⅲ?設置option元素的value屬性；

Ⅳ?通過appendChild()方法，將新選項添加到select元素中;

ListUtil.add = function(oList, sName, sValue){var option = document.creatElement("option");option.appendChild(document.creatTextNode(sName));if(arguments.length == 3){option.setAttribute("value",sValue);}oList.appendChild(potion);
}

??刪除選項

刪除選項的方法有兩種，一種是使用DOM提供的功能，一種是使用HTML?DOM提供的功能

??BOM：使用options集合，將要移除的選項設置為null；

oList.options[0] = null;

??HTML?DOM:使用select元素的remove()方法，將要刪除的選項的索引傳遞給remove()方法；

oList.remove(0);

??移動選項

使用DOM的appendChild()方法，可以從第一個列表框中把元素移動選項到第二個列表框中。如果我們傳遞一個文檔中的一個元素到appendChild()方法，該元素就會從它的父元素中移除，并且放在指定位置。

??對復選框和單選框進行腳本編寫

屬性/方法	描述
checked	布爾值，指示控件狀態
defaultChecked	布爾值，指示頁面加載時控件是否被選中
click()	模仿按鈕點擊，改變控件狀態，對應的事件onclick

轉載于:https://www.cnblogs.com/HackerBlog/p/6057414.html

總結

以上是生活随笔為你收集整理的JavaScript总结（七）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。