JavaScript前端開發(fā)程序設(shè)計(jì)表單與表單對象

程序設(shè)計(jì)教程（）JavaScript前端開發(fā)第8章表單與表單對象學(xué)習(xí)目的:

■掌握表單及表單對象地概念

■掌握定義表單地方法

■掌握訪問表單與表單元素地方法

■掌握操作表單對象地方法

目錄1表單與表單對象2訪問表單與表單元素3操作表單對象目錄1表單與表單對象2訪問表單與表單元素3操作表單對象表單與表單對象

表單是一個容器對象,用來存放表單對象,并負(fù)責(zé)將表單對象地值提交給服務(wù)器端地某個程序處理,它地應(yīng)用范圍非常廣泛,不僅用于收集信息與反饋意見,還用于資料檢索,網(wǎng)上購物等交互式場景。

表單對象是表單所包含地用于不同目地地控件,比如文本框,密碼框,按鈕,復(fù)選框等

定義表單1文本框2單選按鈕3復(fù)選框4列表或菜單5按鈕6目錄CONTENTS定義表單我們使用<form>標(biāo)簽定義表單,語法如下。<formid="formid"name="myForm"method="post"action="check.php">……</form><form>標(biāo)簽常用地屬性如表8-1所示。文本框

文本框是用于輸入單行文本地表單控件,通常用來填寫用戶名以及簡單地回答。使用<input>標(biāo)簽定義單行文本框,實(shí)現(xiàn)如下。<inputtype="text"name="username"value=""/>文本框常用地屬性如表8-2所示。文本框單選按鈕

單選按鈕是用于從多個選擇選一個項(xiàng)目地表單控件,將<input>標(biāo)簽地type屬性設(shè)置為radio即可定義單選按鈕。語法如下。<inputtype="radio"value="female"name="gender"checked>女<inputtype="radio"value="male"name="gender">男單選按鈕常用地屬性如表8-3所示。單選按鈕復(fù)選框

復(fù)選框是用于選擇或取消某個項(xiàng)目地表單控件,將<input>標(biāo)簽地type屬性設(shè)置為checkbox即可定義復(fù)選框。語法如下。<inputtype="checkbox"value="rock"name="m1"checked>搖滾樂<inputtype="checkbox"value="jazz"name="m2"checked>爵士樂<inputtype="checkbox"value="pop"name="m3">流行樂復(fù)選框常用地屬性如表8-4所示。列表或菜單

列表或菜單用于從多個選項(xiàng)選擇某個項(xiàng)目地表單控件,使用<select>標(biāo)簽定義列表或菜單。語法如下。<selectname="name"size="3"multiple><optionvalue="beijing"selected>北京</option><optionvalue="tianjin">天津</option><optionvalue="shanghai"selected>上海</option></select>列表或菜單常用地屬性如表8-5所示。列表或菜單按鈕

HTML支持三種類型地按鈕,即普通按鈕,提交按鈕與重置按鈕。單擊普通按鈕實(shí)現(xiàn)某些操作,比如彈出提示,得到信息等;單擊提交按鈕,能夠?qū)⒈韱蔚財(cái)?shù)據(jù)提交到服務(wù)器;單擊重置按鈕,能夠?qū)⒈韱嗡锌丶刂翟O(shè)置為初始值。使用<input>標(biāo)簽定義按鈕,通過type屬性指定按鈕地類型,其type="button"表示定義普通按鈕,type="submit"表示定義提交按鈕,type="reset"表示定義重置按鈕,語法如下。<inputtype="button"value="問好"name="hello"/><inputtype="submit"name="submit"/><inputtype="reset"name="reset"/>按鈕常用地屬性如表8-6所示。目錄1表單與表單對象2訪問表單與表單元素3操作表單對象訪問表單與表單元素

我們可以使用JavaScript地DOM對象來對表單與表單元素進(jìn)行操作。通過表單地ID來訪問表單

首先,我們需要給表單或者表單元素來定義一個id屬性,然后使用document.getElementById()方法來或獲取對應(yīng)地DOM對象。語法如下。varmyForm=document.getElementById("myFormId");//myFormId為表單地idvaruserName=document.getElementById("userId");//userId為表單控件地id通過表單名稱來訪問表單

首先,我們需要給表單或者表單元素定義一個name屬性,然后使用document.getElementsByName()方法來獲取對應(yīng)地DOM對象。語法如下。//myForm為表單地name屬性varmyForm=document.getElementsByName("myForm")[0];//userName為表單控件地name屬性varuserName=document.getElementsByName("userName")[0];通過表單標(biāo)簽名來訪問表單

在這里,我們不需要定義任何屬性,而是直接使用document.getElementsByTagName()方法來獲取對應(yīng)地DOM對象。語法如下。varobj=document.getElementsByTagName("input");目錄1表單與表單對象2訪問表單與表單元素3操作表單對象操作表單對象

通過前面地學(xué)習(xí),我們通過三種方式訪問了表單對象,接下來我們看一下獲取到地表單對象,有哪些操作。禁用與啟用表單對象

表單對象地disabled屬性,如果設(shè)置為true,代表禁用這個表單對象,反之,將啟用這個表單對象。表單對象獲得與失去焦點(diǎn)

當(dāng)我們地頁面上有多個文本框時,我們需要在某個文本框雙擊,那么這個文本框就獲得了焦點(diǎn),也可以使用表單對象地focus()方法,同樣如果想讓某個表單對象失去焦點(diǎn),那么可以使用blur()方法。提交表單

提交表單是指將用戶在表單填寫或選擇地內(nèi)容傳送給服務(wù)器端地特定程序（action屬性指定）,然后由該程序進(jìn)行具體地處理。將表單數(shù)據(jù)提交給服務(wù)器地方法有兩種。第一種方法是單擊表單地"提交"按鈕;第二種方法是調(diào)用表單對象地submit()方法。這兩種方法基本相同,不同處在于第一種方法是執(zhí)行處理函數(shù)onsubmit,并且可能阻止表單提交,第二種方法是將數(shù)據(jù)直接提交給服務(wù)器。在這里我們使用方法一介紹表單地提交。語法如下。<formid="fm"method="post"action=""onsubmit="returncheck()">重置表單

重置表單是指對用戶在表單填寫或選擇地內(nèi)容進(jìn)行重新設(shè)置,調(diào)用表單地reset()方法,語法如下。myform.reset();驗(yàn)證表單

驗(yàn)證表單是指在用戶提交表單之前,需要對用戶輸入地?cái)?shù)據(jù)進(jìn)行檢查,如果滿足有效性要求,再提交表單。例如,在表單注冊頁面,驗(yàn)證用戶輸入地身份證號是否正確,年齡是否符合要求等。驗(yàn)證表單分為服務(wù)器端表單驗(yàn)證與客戶端表單驗(yàn)證。服務(wù)器端地表單驗(yàn)證是指在服務(wù)器端接收到用戶提交數(shù)據(jù)后進(jìn)行驗(yàn)證工作,而客戶端表單驗(yàn)證是指在向服務(wù)器提交表單數(shù)據(jù)之前進(jìn)行表單驗(yàn)證工作。我們研究地內(nèi)容是在客戶端進(jìn)行驗(yàn)證,這樣可以省卻大量錯誤數(shù)據(jù)地傳送,避免服務(wù)器做無用地工作。驗(yàn)證表單

在表單地onsubmit處理函數(shù)進(jìn)行表單驗(yàn)證,語