基于ASPNET的Web應(yīng)用開發(fā)單元2網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)(html+css+js)課件6_第1頁
基于ASPNET的Web應(yīng)用開發(fā)單元2網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)(html+css+js)課件6_第2頁
基于ASPNET的Web應(yīng)用開發(fā)單元2網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)(html+css+js)課件6_第3頁
基于ASPNET的Web應(yīng)用開發(fā)單元2網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)(html+css+js)課件6_第4頁
基于ASPNET的Web應(yīng)用開發(fā)單元2網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)(html+css+js)課件6_第5頁
已閱讀5頁,還剩55頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

WEB應(yīng)用開發(fā)

單元2:網(wǎng)站的規(guī)劃與設(shè)計(jì)任務(wù)2:網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)(html+css+js)(5)WEB應(yīng)用開發(fā) 單元2:網(wǎng)站的規(guī)劃與設(shè)計(jì)任務(wù)2:網(wǎng)頁主要內(nèi)容事件1訪問表單2提交、重置表單3表單常用方法與事件4主要內(nèi)容事件1訪問表單2提交、重置表單3表單常用方法與學(xué)習(xí)目標(biāo)知識(shí)目標(biāo):掌握使用JavaScript進(jìn)行表單驗(yàn)證的方法能力目標(biāo):能夠使用JavaScript訪問表單與表單域能夠使用JavaScript對(duì)注冊(cè)表單的內(nèi)容進(jìn)行驗(yàn)證學(xué)習(xí)目標(biāo)知識(shí)目標(biāo):技術(shù)應(yīng)用的背景表單是網(wǎng)頁的重要組成部分,通過表單可以使用戶向服務(wù)器發(fā)送數(shù)據(jù)。表單由form、input、textarea和select等HTML元素構(gòu)成,form元素指定發(fā)送數(shù)據(jù)時(shí)使用的HTTP請(qǐng)求方法以及用于處理表單的服務(wù)器端程序或動(dòng)態(tài)網(wǎng)頁的URL地址等,用戶利用表單輸入信息并提交給服務(wù)器進(jìn)行處理,在提交之前可以通過JavaScript腳本對(duì)表單信息進(jìn)行檢查和處理。技術(shù)應(yīng)用的背景表單是網(wǎng)頁的重要組成部分,通過表單可以使用戶向一、事件概述1.事件事件是指可以被瀏覽器識(shí)別的、發(fā)生在頁面上的用戶動(dòng)作或狀態(tài)變化。許多HTML元素可以激發(fā)事件,通過響應(yīng)特定元素的特定事件,可以大大地提升網(wǎng)頁的交互性。其中:用戶動(dòng)作:用戶對(duì)頁面的鼠標(biāo)或鍵盤操作。例如,click、keypress等狀態(tài)變化:頁面的狀態(tài)發(fā)生變化。例如,load、resize、change等一、事件概述1.事件一、事件概述2.編寫事件響應(yīng)代碼在元素的屬性聲明中直接寫JavaScript代碼。例如:響應(yīng)函數(shù):

<inputtype="button"value="PressMe"onclick="alert('thanks');"><scripttype="text/javascript"> functionButton1_onclick() {//......} </script> <inputid="Button1"type="button"value="button" onclick="returnButton1_onclick()"/>事件名稱響應(yīng)函數(shù)名一、事件概述2.編寫事件響應(yīng)代碼<inputtype="b一、事件概述3.事件驅(qū)動(dòng)編程事件驅(qū)動(dòng)編程:是指為需要處理的事件編寫相應(yīng)的事件處理程序事件驅(qū)動(dòng)編程的一般步驟:第1步,確定響應(yīng)事件的元素第2步,為指定元素確定需要響應(yīng)的事件類型第3步,為指定元素的指定事件編寫相應(yīng)的事件處理程序第4步,將事件處理程序綁定到指定元素的指定事件一、事件概述3.事件驅(qū)動(dòng)編程一、事件概述4.事件綁定將一個(gè)函數(shù)與某個(gè)HTML元素的事件屬性關(guān)聯(lián)起來,使得當(dāng)相應(yīng)事件發(fā)生時(shí)就會(huì)觸發(fā)該函數(shù)的執(zhí)行,事件處理程序?yàn)楸唤壎ǖ暮瘮?shù)。事件綁定的兩種方法靜態(tài)綁定:是指將處理事件的程序代碼直接指定為HTML元素的事件屬性值。動(dòng)態(tài)綁定:是指通過語句建立事件綁定。對(duì)象.事件屬性=函數(shù)引用;一、事件概述4.事件綁定一、事件概述5.事件屬性使用事件屬性可以為元素的指定事件綁定事件處理程序事件屬性名:在事件名的基礎(chǔ)上,加上前綴“on”,如onclick在HTML標(biāo)記中設(shè)置事件屬性時(shí),還可以把事件處理函數(shù)屬性值設(shè)置為一個(gè)返回布爾值的return語句。如果這個(gè)return語句返回ture,則執(zhí)行該事件的默認(rèn)行為;如果返回false,則取消該事件的默認(rèn)行為。對(duì)于HTML元素的不同事件,當(dāng)相應(yīng)的事件處理函數(shù)返回false值時(shí)效果是有所不同的。一、事件概述5.事件屬性一、事件概述6.事件分類頁面事件:是指因頁面狀態(tài)發(fā)生變化而產(chǎn)生的事件,包括onload、onunload、onresize、onabort、onerror等鼠標(biāo)事件:是指用戶操作鼠標(biāo)(點(diǎn)擊或移動(dòng))而觸發(fā)的事件,包括onclick、ondblclick、onmousedown等鍵盤事件:是指用戶在鍵盤上敲擊、輸入時(shí)觸發(fā)的事件,包括onkeypress、onkeydown、onkeyup等表單事件:是指與表單或表單控件相關(guān)的事件,包括onsubmit、onreset、onchange、onselect、onblur和onfocus等一、事件概述6.事件分類一、事件概述7.事件流事件流是指事件的冒泡傳遞過程源元素→父元素→根對(duì)象(即Document對(duì)象)由于存在事件流,因此當(dāng)一個(gè)事件發(fā)生時(shí),不僅可以由產(chǎn)生事件的元素響應(yīng),也可以由其他元素響應(yīng)。有些事件(如load、unload、blur、focus等事件)不會(huì)傳遞一、事件概述7.事件流二、訪問表單1.訪問表單方式:假如某表單的ID為form1,則可以使用DOM方法來獲取該表單對(duì)象:假如某表單是網(wǎng)頁中的第一個(gè)表單,且其名稱(name屬性)為form1,則可以通過document的forms集合來獲取該表單:oForm=document.getElementById("form1");

oForm=document.forms[0]; oForm=document.forms["form1"]; oForm=document.form1;二、訪問表單1.訪問表單方式:oForm=docume二、訪問表單2.表單對(duì)象的常用屬性acceptCharset:設(shè)置或獲取一個(gè)逗號(hào)分隔的列表,內(nèi)容是服務(wù)器可接受的字符集。action:設(shè)置或獲取表單內(nèi)容要發(fā)送到并進(jìn)行處理的URL。enctype:設(shè)置或檢索表單的MIME編碼方式。默認(rèn)設(shè)置為application/x-www-form-urlencoded,若要上傳文件,則應(yīng)設(shè)置為multipart/form-data。id:設(shè)置或檢索表單的id。二、訪問表單2.表單對(duì)象的常用屬性二、訪問表單2.表單對(duì)象的常用屬性(續(xù))length:檢索表單中的表單域的數(shù)目。method:設(shè)置或檢索如何將表單數(shù)據(jù)發(fā)送到服務(wù)器。若設(shè)置為GET,則把表單數(shù)據(jù)附加到action屬性指定的URL上發(fā)送;若設(shè)置為POST,則通過HTTP發(fā)布事務(wù)發(fā)送數(shù)據(jù)。name:設(shè)置或檢索表單的名稱。target:設(shè)置或檢索表單提交結(jié)果的框架或窗口名稱。二、訪問表單2.表單對(duì)象的常用屬性(續(xù))二、訪問表單3.表單的集合elements:包含表單中除<inputtype=image>外的所有表單域。elements集合的length屬性與表單的length屬性值相等。4.表單的方法reset():把表單中的表單域重置為它們的默認(rèn)值,但不會(huì)觸發(fā)表單的onreset事件。submit():用于提交表單,但不會(huì)觸發(fā)表單的onsubmit事件。表單對(duì)象的常用事件onreset:當(dāng)重置表單時(shí)觸發(fā)。onsubmit:當(dāng)提交表單時(shí)觸發(fā)。二、訪問表單3.表單的集合三、訪問表單域在一個(gè)表單內(nèi)可以添加一些表單域,例如按鈕、文本框以及列表框等,這些表單域都包含表單的elements集合中。在JavaScript腳本中,既可以用document.getElementById方法和表單域的ID來獲取該表單域,也可以通過表單域的name屬性或表單域在elements集合中的索引來訪問不同的表單域。用elements集合的length屬性可獲取表單中包含的表單域數(shù)目。三、訪問表單域在一個(gè)表單內(nèi)可以添加一些表單域,例如按鈕、文本三、訪問表單域通過ID訪問表單域

通過索引訪問表單域

通過name訪問表單域

直接通過name屬性來訪問表單域:

假如表單域的名稱中包含空格,則需要使用方括號(hào)標(biāo)記:

varoTextBox=document.getElementById("txtUsername");varoTextBox=document.form1.elements[0];varoTextBox=document.form1.elements["txtUsername"];varoTextBox=document.form1.txtUsername;varoTextBox=document.form1.elements["Username"];三、訪問表單域通過ID訪問表單域varoTextBox=三、訪問表單域表單域的屬性、方法和事件disabled屬性:獲取或設(shè)置表單域是否被禁用。form屬性:獲取包含表單域所在的表單。blur()方法:使表單域失去焦點(diǎn),并將焦點(diǎn)移到別處。focus()方法:使表單域獲得焦點(diǎn)。onblur事件:當(dāng)表單域失去焦點(diǎn)時(shí)發(fā)生,將執(zhí)行onblur事件處理程序。onfocus事件:當(dāng)表單域獲得焦點(diǎn)時(shí)發(fā)生,將執(zhí)行onfocus事件處理程序。三、訪問表單域表單域的屬性、方法和事件四、提交表單1.表單提交方式通過單擊提交按鈕提交表單:通過單擊圖像按鈕提交表單:通過調(diào)用表單的submit()方法提交表單:<inputtype="submit"value="提交"/><inputtype="image"src="submit.jpg"/><inputtype="button"value="提交"onclick="this.form.submit();"/>四、提交表單1.表單提交方式<inputtype="su四、提交表單2.表單提交目的地提交給服務(wù)器端處理程序:

提交給JavaScript函數(shù): 通過電子郵件形式提交表單數(shù)據(jù):<formname="form1"id="form1"method="post"action="process.asp"><formname="form1"id="form1"method="post" action="javascript:alter('表單已提交!')"><formname="form1"id="form1"method="post"action="mailto:tina@163.com?subject=表單數(shù)據(jù)">四、提交表單2.表單提交目的地<formname="fo五、重置表單使用重置按鈕重置表單:

通過調(diào)用表單的reset()方法重置表單:<inputtype="reset"value="重置"/><inputtype="button"value="重置"onclick="this.form.reset();"/>五、重置表單使用重置按鈕重置表單:<inputtype="六、表單域常用方法與事件1.文本框文本框?qū)ο蟮某S梅椒╞lur():使文本框失去焦點(diǎn)并觸發(fā)onblur事件。focus():使文本框得到焦點(diǎn)并執(zhí)行由onfocus事件指定的代碼。select():選取文本框中的所有文本。文本框的事件onblur和onfocusonchange:當(dāng)用戶更改文本框的內(nèi)容并使其失去焦點(diǎn)時(shí)觸發(fā)。如果通過在腳本中設(shè)置value屬性來更改文本框的內(nèi)容,則不會(huì)觸發(fā)onchange事件。onselect:當(dāng)選取文本框中的一個(gè)或多個(gè)字符時(shí)觸發(fā)。六、表單域常用方法與事件1.文本框六、表單域常用方法與事件2.文本區(qū)域與文本框一樣,文本區(qū)域具有blur()、focus()和select()方法,而且支持onchange和onselect事件。六、表單域常用方法與事件2.文本區(qū)域六、表單域常用方法與事件3.單選按鈕單選按鈕的常用方法blur():使單選按鈕失去焦點(diǎn)并觸發(fā)onblur事件。click():模擬鼠標(biāo)單擊操作并觸發(fā)onclick事件。focus():使單選按鈕獲得焦點(diǎn)并執(zhí)行由onfocus事件指定的代碼。單選按鈕的常用事件onblur:當(dāng)單選按鈕失去輸入焦點(diǎn)時(shí)觸發(fā)。onclick:當(dāng)用戶用鼠標(biāo)左鍵單擊單選按鈕時(shí)觸發(fā)。onfocus:當(dāng)單選按鈕獲得焦點(diǎn)時(shí)觸發(fā)。六、表單域常用方法與事件3.單選按鈕六、表單域常用方法與事件4.復(fù)選框復(fù)選框?qū)ο蟮某S梅椒╞lur():使復(fù)選框失去焦點(diǎn)并觸發(fā)onblur事件。click():模擬鼠標(biāo)單擊操作并觸發(fā)onclick事件。focus():使復(fù)選框獲得焦點(diǎn)并執(zhí)行由onfocus事件指定的代碼。復(fù)選框?qū)ο蟮某S檬录nblur:當(dāng)復(fù)選框失去輸入焦點(diǎn)時(shí)觸發(fā)。onclick:當(dāng)用戶用鼠標(biāo)左鍵單擊復(fù)選框時(shí)觸發(fā)。onfocus:當(dāng)復(fù)選框獲得焦點(diǎn)時(shí)觸發(fā)。六、表單域常用方法與事件4.復(fù)選框六、表單域常用方法與事件5.列表框select對(duì)象的常用方法add:向select對(duì)象的options集合中添加一個(gè)option元素。remove:從select對(duì)象的options集合中移除一個(gè)option元素。select對(duì)象的常用事件是onchange,該事件在用戶從列表框中選擇不同選項(xiàng)時(shí)發(fā)生。訪問列表項(xiàng)select對(duì)象有一個(gè)options集合,該集合由列表框中的所有option對(duì)象組成。通過options集合可以對(duì)列表框中的選項(xiàng)進(jìn)行訪問。如果某個(gè)選項(xiàng)在options集合中的索引為i,則可以通過options[i]形式來獲取該選項(xiàng),并對(duì)其以下屬性進(jìn)行訪問。六、表單域常用方法與事件5.列表框六、表單域常用方法與事件5.列表框(續(xù))options[i].defaultSelected:返回一個(gè)Boolean值,表明該選項(xiàng)初始化時(shí)是否被選中。options[i].length:返回一個(gè)整數(shù),表示options集合包含的選項(xiàng)個(gè)數(shù)。該屬性值等于select對(duì)象的length屬性值。options[i].selected:返回一個(gè)Boolean值,表明該選項(xiàng)是否被選中。options[i].text:該選項(xiàng)顯示在列表框中的文本。options[i].value:該選項(xiàng)的值。當(dāng)用戶提交表單時(shí),select對(duì)象的name屬性值和選中項(xiàng)的value屬性值將一起被發(fā)送到服務(wù)器端。六、表單域常用方法與事件5.列表框(續(xù))六、表單域常用方法與事件5.列表框(續(xù))若要獲取列表框中的列表項(xiàng)的文本和值,可以通過select對(duì)象的options集合來實(shí)現(xiàn)。假如某個(gè)列表項(xiàng)在options集合中的索引為iIndex,則該列表項(xiàng)的文本和值分別為:oListBox.options[iIndex].textoListBox.options[iIndex].value六、表單域常用方法與事件5.列表框(續(xù))七、小結(jié)本節(jié)主要介紹JavaScript事件,以及訪問、提交、重置表單的方法,能夠在理解相關(guān)知識(shí)的基礎(chǔ)上掌握表單驗(yàn)證的常用方法。七、小結(jié)本節(jié)主要介紹JavaScript事件,THANKYOUTHANKYOUWEB應(yīng)用開發(fā)

單元2:網(wǎng)站的規(guī)劃與設(shè)計(jì)任務(wù)2:網(wǎng)頁設(shè)計(jì)與制作基礎(chǔ)(html+css+js)(5)WEB應(yīng)用開發(fā) 單元2:網(wǎng)站的規(guī)劃與設(shè)計(jì)任務(wù)2:網(wǎng)頁主要內(nèi)容事件1訪問表單2提交、重置表單3表單常用方法與事件4主要內(nèi)容事件1訪問表單2提交、重置表單3表單常用方法與學(xué)習(xí)目標(biāo)知識(shí)目標(biāo):掌握使用JavaScript進(jìn)行表單驗(yàn)證的方法能力目標(biāo):能夠使用JavaScript訪問表單與表單域能夠使用JavaScript對(duì)注冊(cè)表單的內(nèi)容進(jìn)行驗(yàn)證學(xué)習(xí)目標(biāo)知識(shí)目標(biāo):技術(shù)應(yīng)用的背景表單是網(wǎng)頁的重要組成部分,通過表單可以使用戶向服務(wù)器發(fā)送數(shù)據(jù)。表單由form、input、textarea和select等HTML元素構(gòu)成,form元素指定發(fā)送數(shù)據(jù)時(shí)使用的HTTP請(qǐng)求方法以及用于處理表單的服務(wù)器端程序或動(dòng)態(tài)網(wǎng)頁的URL地址等,用戶利用表單輸入信息并提交給服務(wù)器進(jìn)行處理,在提交之前可以通過JavaScript腳本對(duì)表單信息進(jìn)行檢查和處理。技術(shù)應(yīng)用的背景表單是網(wǎng)頁的重要組成部分,通過表單可以使用戶向一、事件概述1.事件事件是指可以被瀏覽器識(shí)別的、發(fā)生在頁面上的用戶動(dòng)作或狀態(tài)變化。許多HTML元素可以激發(fā)事件,通過響應(yīng)特定元素的特定事件,可以大大地提升網(wǎng)頁的交互性。其中:用戶動(dòng)作:用戶對(duì)頁面的鼠標(biāo)或鍵盤操作。例如,click、keypress等狀態(tài)變化:頁面的狀態(tài)發(fā)生變化。例如,load、resize、change等一、事件概述1.事件一、事件概述2.編寫事件響應(yīng)代碼在元素的屬性聲明中直接寫JavaScript代碼。例如:響應(yīng)函數(shù):

<inputtype="button"value="PressMe"onclick="alert('thanks');"><scripttype="text/javascript"> functionButton1_onclick() {//......} </script> <inputid="Button1"type="button"value="button" onclick="returnButton1_onclick()"/>事件名稱響應(yīng)函數(shù)名一、事件概述2.編寫事件響應(yīng)代碼<inputtype="b一、事件概述3.事件驅(qū)動(dòng)編程事件驅(qū)動(dòng)編程:是指為需要處理的事件編寫相應(yīng)的事件處理程序事件驅(qū)動(dòng)編程的一般步驟:第1步,確定響應(yīng)事件的元素第2步,為指定元素確定需要響應(yīng)的事件類型第3步,為指定元素的指定事件編寫相應(yīng)的事件處理程序第4步,將事件處理程序綁定到指定元素的指定事件一、事件概述3.事件驅(qū)動(dòng)編程一、事件概述4.事件綁定將一個(gè)函數(shù)與某個(gè)HTML元素的事件屬性關(guān)聯(lián)起來,使得當(dāng)相應(yīng)事件發(fā)生時(shí)就會(huì)觸發(fā)該函數(shù)的執(zhí)行,事件處理程序?yàn)楸唤壎ǖ暮瘮?shù)。事件綁定的兩種方法靜態(tài)綁定:是指將處理事件的程序代碼直接指定為HTML元素的事件屬性值。動(dòng)態(tài)綁定:是指通過語句建立事件綁定。對(duì)象.事件屬性=函數(shù)引用;一、事件概述4.事件綁定一、事件概述5.事件屬性使用事件屬性可以為元素的指定事件綁定事件處理程序事件屬性名:在事件名的基礎(chǔ)上,加上前綴“on”,如onclick在HTML標(biāo)記中設(shè)置事件屬性時(shí),還可以把事件處理函數(shù)屬性值設(shè)置為一個(gè)返回布爾值的return語句。如果這個(gè)return語句返回ture,則執(zhí)行該事件的默認(rèn)行為;如果返回false,則取消該事件的默認(rèn)行為。對(duì)于HTML元素的不同事件,當(dāng)相應(yīng)的事件處理函數(shù)返回false值時(shí)效果是有所不同的。一、事件概述5.事件屬性一、事件概述6.事件分類頁面事件:是指因頁面狀態(tài)發(fā)生變化而產(chǎn)生的事件,包括onload、onunload、onresize、onabort、onerror等鼠標(biāo)事件:是指用戶操作鼠標(biāo)(點(diǎn)擊或移動(dòng))而觸發(fā)的事件,包括onclick、ondblclick、onmousedown等鍵盤事件:是指用戶在鍵盤上敲擊、輸入時(shí)觸發(fā)的事件,包括onkeypress、onkeydown、onkeyup等表單事件:是指與表單或表單控件相關(guān)的事件,包括onsubmit、onreset、onchange、onselect、onblur和onfocus等一、事件概述6.事件分類一、事件概述7.事件流事件流是指事件的冒泡傳遞過程源元素→父元素→根對(duì)象(即Document對(duì)象)由于存在事件流,因此當(dāng)一個(gè)事件發(fā)生時(shí),不僅可以由產(chǎn)生事件的元素響應(yīng),也可以由其他元素響應(yīng)。有些事件(如load、unload、blur、focus等事件)不會(huì)傳遞一、事件概述7.事件流二、訪問表單1.訪問表單方式:假如某表單的ID為form1,則可以使用DOM方法來獲取該表單對(duì)象:假如某表單是網(wǎng)頁中的第一個(gè)表單,且其名稱(name屬性)為form1,則可以通過document的forms集合來獲取該表單:oForm=document.getElementById("form1");

oForm=document.forms[0]; oForm=document.forms["form1"]; oForm=document.form1;二、訪問表單1.訪問表單方式:oForm=docume二、訪問表單2.表單對(duì)象的常用屬性acceptCharset:設(shè)置或獲取一個(gè)逗號(hào)分隔的列表,內(nèi)容是服務(wù)器可接受的字符集。action:設(shè)置或獲取表單內(nèi)容要發(fā)送到并進(jìn)行處理的URL。enctype:設(shè)置或檢索表單的MIME編碼方式。默認(rèn)設(shè)置為application/x-www-form-urlencoded,若要上傳文件,則應(yīng)設(shè)置為multipart/form-data。id:設(shè)置或檢索表單的id。二、訪問表單2.表單對(duì)象的常用屬性二、訪問表單2.表單對(duì)象的常用屬性(續(xù))length:檢索表單中的表單域的數(shù)目。method:設(shè)置或檢索如何將表單數(shù)據(jù)發(fā)送到服務(wù)器。若設(shè)置為GET,則把表單數(shù)據(jù)附加到action屬性指定的URL上發(fā)送;若設(shè)置為POST,則通過HTTP發(fā)布事務(wù)發(fā)送數(shù)據(jù)。name:設(shè)置或檢索表單的名稱。target:設(shè)置或檢索表單提交結(jié)果的框架或窗口名稱。二、訪問表單2.表單對(duì)象的常用屬性(續(xù))二、訪問表單3.表單的集合elements:包含表單中除<inputtype=image>外的所有表單域。elements集合的length屬性與表單的length屬性值相等。4.表單的方法reset():把表單中的表單域重置為它們的默認(rèn)值,但不會(huì)觸發(fā)表單的onreset事件。submit():用于提交表單,但不會(huì)觸發(fā)表單的onsubmit事件。表單對(duì)象的常用事件onreset:當(dāng)重置表單時(shí)觸發(fā)。onsubmit:當(dāng)提交表單時(shí)觸發(fā)。二、訪問表單3.表單的集合三、訪問表單域在一個(gè)表單內(nèi)可以添加一些表單域,例如按鈕、文本框以及列表框等,這些表單域都包含表單的elements集合中。在JavaScript腳本中,既可以用document.getElementById方法和表單域的ID來獲取該表單域,也可以通過表單域的name屬性或表單域在elements集合中的索引來訪問不同的表單域。用elements集合的length屬性可獲取表單中包含的表單域數(shù)目。三、訪問表單域在一個(gè)表單內(nèi)可以添加一些表單域,例如按鈕、文本三、訪問表單域通過ID訪問表單域

通過索引訪問表單域

通過name訪問表單域

直接通過name屬性來訪問表單域:

假如表單域的名稱中包含空格,則需要使用方括號(hào)標(biāo)記:

varoTextBox=document.getElementById("txtUsername");varoTextBox=document.form1.elements[0];varoTextBox=document.form1.elements["txtUsername"];varoTextBox=document.form1.txtUsername;varoTextBox=document.form1.elements["Username"];三、訪問表單域通過ID訪問表單域varoTextBox=三、訪問表單域表單域的屬性、方法和事件disabled屬性:獲取或設(shè)置表單域是否被禁用。form屬性:獲取包含表單域所在的表單。blur()方法:使表單域失去焦點(diǎn),并將焦點(diǎn)移到別處。focus()方法:使表單域獲得焦點(diǎn)。onblur事件:當(dāng)表單域失去焦點(diǎn)時(shí)發(fā)生,將執(zhí)行onblur事件處理程序。onfocus事件:當(dāng)表單域獲得焦點(diǎn)時(shí)發(fā)生,將執(zhí)行onfocus事件處理程序。三、訪問表單域表單域的屬性、方法和事件四、提交表單1.表單提交方式通過單擊提交按鈕提交表單:通過單擊圖像按鈕提交表單:通過調(diào)用表單的submit()方法提交表單:<inputtype="submit"value="提交"/><inputtype="image"src="submit.jpg"/><inputtype="button"value="提交"onclick="this.form.submit();"/>四、提交表單1.表單提交方式<inputtype="su四、提交表單2.表單提交目的地提交給服務(wù)器端處理程序:

提交給JavaScript函數(shù): 通過電子郵件形式提交表單數(shù)據(jù):<formname="form1"id="form1"method="post"action="process.asp"><formname="form1"id="form1"method="post" action="javascript:alter('表單已提交!')"><formname="form1"id="form1"method="post"action="mailto:tina@163.com?subject=表單數(shù)據(jù)">四、提交表單2.表單提交目的地<formname="fo五、重置表單使用重置按鈕重置表單:

通過調(diào)用表單的reset()方法重置表單:<inputtype="reset"value="重置"/><inputtype="button"value="重置"onclick="this.form.reset();"/>五、重置表單使用重置按鈕重置表單:<inputtype="六、表單域常用方法與事件1.文本框文本框?qū)ο蟮某S梅椒╞lur():使文本框失去焦點(diǎn)并觸發(fā)onblur事件。focus():使文本框得到焦點(diǎn)并執(zhí)行由onfocus事件指定的代碼。select():選取文本框中的所有文本。文本框的事件onblur和onfocusonchange:當(dāng)用戶更改文本框的內(nèi)容并使其失去焦點(diǎn)時(shí)觸發(fā)。如果通過在腳本中設(shè)置value屬性來更改文本框的內(nèi)容,則不會(huì)觸發(fā)onchange事件。onselect:當(dāng)選取文本框中的一個(gè)或多個(gè)字符時(shí)觸發(fā)。六、表單域常用方法與事件1.文本框六、表單域常用方法與事件2.文本區(qū)域與文本框一樣,文本區(qū)域具有blur()、focus()和select()方法,而且支持onchange和onselect事件。六、表單域常用方法與事件2.文本區(qū)域六、表單域常用方法與事件3.單選按鈕單選按鈕的常用方法blur():使單選按鈕失去焦點(diǎn)并觸發(fā)onblur事件。click():模擬鼠標(biāo)單擊操作并觸發(fā)onclick事件。focus():使單選按鈕獲得焦點(diǎn)并執(zhí)行由onfocus事件指定的代碼。單選按鈕的常用事件onblur

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論