《表单与表单域》PPT课件.ppt

《《表单与表单域》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《表单与表单域》PPT课件.ppt（42页珍藏版）》请在装配图网上搜索。

1、Web编程基础,Chapter10：表单与表单域,2020年7月9日星期四,访问表单和表单域 表单事件 表单元素 表单文本校验,内容, . . ,表 单,10.1 访问表单和表单域,第一种方法:为表单设置一个标识符，然后使用document对象的getElementById方法访问它: 假如某表单的ID为form1 oForm = document.getElementById(form1); 第二种方法：使用document对象的forms属性。 假如某表单是网页中的第一个表单，且其名称（name属性）为form1： oForm = document.forms0; oForm = docu

2、ment.formsform1; oForm = document.form1;,10.1.1 访问表单,表单对象的常用属性 acceptCharset：设置或获取一个逗号分隔的列表，内容是服务器可接受的字符集。 action：设置或获取表单内容要发送到并进行处理的URL。 enctype：设置或检索表单的MIME编码方式。默认设置为application/x-www-form- urlencoded，若要上传文件，则应设置为multipart/form-data。 id：设置或检索表单的id。 length：检索表单中的表单域的数目。 method：设置或检索如何将表单数据发送到服务器。若设

3、置为GET，则把表单数据附加到action属性指定的URL上发送；若设置为POST，则通过HTTP发布事务发送数据。 name：设置或检索表单的名称。 target：设置或检索表单提交结果的框架或窗口名称。,10.1.1 访问表单,表单的集合 elements：包含表单中除外的所有表单域。elements集合的length属性与表单的length属性值相等。 表单的方法 reset()：把表单中的表单域重置为它们的默认值，但不会触发表单的onreset事件。 submit()：提交表单，但不会触发表单的onsubmit事件。 表单对象的常用事件 onreset：当重置表单时触发。 onsubm

4、it：当提交表单时触发,10.1.2 访问表单域,表单域都包含表单的elements集合中 通过ID访问表单域 var oTextBox = document.getElementById(txtUsername); 通过索引访问表单域 var oTextBox = document.form1.elements0; 通过name访问表单域 var oTextBox = document.form1.elementstxtUsername; 直接通过name属性来访问表单域： var oTextBox = document.form1.txtUsername; 表单域的名称中包含空格，需要使用

5、方括号标记： var oTextBox = document.form1.elementsUser name;,10.1.2 访问表单域,表单域的属性、方法和事件 disabled属性：获取或设置表单域是否被禁用。 form属性：获取包含表单域所在的表单。 blur()方法：表单域失去焦点，并将焦点移到别处。 focus()方法：使表单域获得焦点。 onblur事件：当表单域失去焦点时执行onblur事件处理程序。 onfocus事件：当表单域获得焦点时发生，将执行onfocus事件处理程序,例：10.1,10.1.3 提交表单,单击提交按钮提交表单： 单击图像按钮提交表单： 调用表单的sub

6、mit()方法提交表单： ,10.1.3 提交表单,表单提交目的地 提交给服务器端处理程序： 提交给JavaScript函数： 通过电子邮件形式提交表单数据： ,10.1.4 重置表单,使用重置按钮重置表单： 通过调用表单的reset()方法重置表单： ,10.2 为表单添加事件,与表单相关的主要事件submit，其事件句柄为onsumbit，为表单添加事件句柄的方法如下： 传统方法： document.getElementById(“someform”).onsumbit=formHandler; 内嵌的方法： ,false（取消提交操作）,true（表单提交继续执行）,表单事件,按钮 -

7、事件处理程序,onSubmit事件处理代码： 如果函数返回true，则向远程服务器提交表单； 如果函数返回false，则取消提交。,事件处理程序(onSubmit),function check( ) var userName= document.myform.userName.value; var pass1= document.myform.pass1.value; var pass2=document.myform.pass2.value; if (pass1=pass2) if (pass1.length!=0) document.write(恭喜您，注册成功！欢迎 +userName

8、+光临！); return true; else alert(密码不能为空！n请输入密码); return false; else alert(确认码必须和输入的密码相同！); return false; , ,onSubmit事件调用的函数：输入数据检查,10.2.1 跨浏览器的事件处理,用来解决跨浏览器兼容、捕获事件、添加事件句柄的事件处理函数： function catchEvent(eventObj,event,eventHandler) if (eventObj.addEventListener) eventObj.addEventListener(event,eventHandle

9、r,false); else if (eventObj.attachEvent) event =on+ event ; eventObj.attachEvent(event,eventHandler); ,10.2.2 取消一个事件,取消表单提交操作（通用取消事件函数） function cancelEvent(event) if (event.preventDefault) event.preventDefault(); event.stopPropagation(); else event.returnValue = false; event.cancelBubble = true; ,1

10、0.3 文本框、多行文本、密码框及隐藏表单域元素,单行、基于文字的input元素 hidden:隐含的对象,在页面里可以临时存放一些中间值，又不需要显示在页面里 document.getElementById(test).value ：得到对象的值 多行文本框 Initial text,10.3 文本框、多行文本、密码框及隐藏表单域元素,文本框对象的常用方法 blur()：使文本框失去焦点并触发onblur事件。 focus()：文本框得到焦点并执行由onfocus事件指定的代码。 select()：选取文本框中的所有文本。 文本框的事件 onblur和onfocus onchange：当用户

11、更改文本框的内容并使其失去焦点时触发。如果通过在脚本中设置value属性来更改文本框的内容，则不会触发onchange事件。 onselect：当选取文本框中的一个或多个字符时触发。,登陆界面,文本框和密码框,登陆界面, Name: Password: The text area ,var strResults = ; var textInputs = document.getElementById(someForm).getElementsByTagName(input); for (var i = 0; i textInputs.length; i+) if (textInputsi.ty

12、pe != submit) strResults += textInputsi.value+” ”; document.getElementById(text4).value=strResults;,10.3 文本框、多行文本、密码框及隐藏表单域元素,10.4 单选按钮和复选框,单选按钮的常用方法 blur()：使单选按钮失去焦点并触发onblur事件。 click()：模拟鼠标单击操作并触发onclick事件。 focus()：使单选按钮获得焦点并执行由onfocus事件指定的代码。 单选按钮的常用事件 onblur：当单选按钮失去输入焦点时触发。 onclick：当用户用鼠标左键单击单选按

13、钮时触发。 onfocus：当单选按钮获得焦点时触发。,10.4 单选按钮和复选框,复选框对象的常用方法 blur()：使复选框失去焦点并触发onblur事件。 click()：模拟鼠标单击操作并触发onclick事件。 focus()：使复选框获得焦点并执行由onfocus事件指定的代码。 复选框对象的常用事件 onblur：当复选框失去输入焦点时触发。 onclick：当用户用鼠标左键单击复选框时触发。 onfocus：当复选框获得焦点时触发。,每次只能选择一项,10.4 单选按钮和复选框, function handle() var buttons = document.getEleme

14、ntsByName(radiogroup); for(var i = 0; i , 男 女 ,单选按钮：每次只能选择一项,10.4 单选按钮和复选框,10.4 单选按钮和复选框,10.4 单选按钮和复选框,复选框（checkbox）：可同时选择多个, Opt1: Opt2: ,表单添加新元素：,var newCheckbox = document.createElement(input); newCheckbox.type=checkbox; newCheckbox.name=chekbox3; newCheckbox.checked=true; newCheckbox.text=df; so

15、meForm.appendChild(newCheckbox);,10.4 单选按钮和复选框,checkbox1,checkbox2,checkbox3,checkbox4,myform, function buy( ) var s=; if (document.myform.checkbox1.checked=true) /如果被选中 s=s+document.myform.checkbox1.value+“n”; /累计选中的商品 if (document.myform.checkbox2.checked=true) s=s+document.myform.checkbox2.value+

16、n; if (document.myform.checkbox3.checked=true) s=s+document.myform.checkbox3.value+n; if (document.myform.checkbox4.checked=true) s=s+document.myform.checkbox4.value+n; / if(confirm(您定购了以下物品，确定吗？：n+s)=true) document.write(您定购了以下物品:+s+); ,单击”成交“按钮调用的函数： 检查每个复选框的选中情况，累计用户选中的商品,是为了原样显示字符串中的换行”n”格式, onC

17、lick=buy( )“ ,10.4 单选按钮和复选框, function buy( ) var s=; for (var i=0;i+s+); /其他代码略 /其他代码略,2.使用数组和for循环大大简化代码,1.修改每个复选框的名称都为mybox，使这4个复选框构成一个数组mybox,10.4 单选按钮和复选框,10.5 选择列表框,Select（选择列表框）元素是从一个列表中选择一项或者多项的方法。, function handle() var slIdx = document.getElementById(form1).theSe.selectedIndex; var opt = do

18、cument.getElementById(form1).theSe.optionsslIdx; alert(opt.text+ +opt.value ); return false; , / 单选下拉菜单 opt1 opt2 opt3 ,Select 元素提供的属性: disabled 该元素是否被禁用 options 选项数组 selectedindex 单选框元素表示当前选中的项目编号；多选框元素，它的值是选中的第一个值； selected 设置或者查看该选项是否被选中 text 设置或者查看选项的文本值 select对象的常用方法 add：向select对象的options集合中添加一

19、个option元素。 remove：从select对象的options集合中移除一个option元素。 select对象的常用事件是onchange，该事件在用户从列表框中选择不同选项时发生。,10.5 选择列表框,select对象有一个options集合，该集合由列表框中的所有option对象组成。 optionsi.defaultSelected：返回一个Boolean值，表明该选项初始化时是否被选中。 optionsi.length：返回一个整数，表示options集合包含的选项个数。该属性值等于select对象的length属性值。 optionsi.selected：返回一个Bool

20、ean值，表明该选项是否被选中。 optionsi.text：该选项显示在列表框中的文本。 optionsi.value：该选项的值。当用户提交表单时，select对象的name属性值和选中项的value属性值将一起被发送到服务器端。,10.5.2 访问列表项,假如某个列表项在options集合中的索引为iIndex，则该列表项的文本和值分别为： oListBox.optionsiIndex.text oListBox.optionsiIndex.value 当前选中项的文本和值： oListBox.optionsoListBox.selectedIndex.text oListBox.opt

21、ionsoListBox.selectedIndex.value,10.5.2 访问列表项,通过调用option对象的构造函数来创建新的option对象： var oOption = new Option(sText, sValue); 其中sText为该选项在列表框中显示的文本，sValue为该选项的值。 通过调用select对象的add()方法来把option对象添加到options集合中： var oOption = new Option(magenta, 洋红); oListBox.add(oOption); 默认情况下option对象将被添加到options集合的末尾。若要添加到列表

22、框的指定位置，则必须在调用add()方法时设置第二个参数。 var oOption = new Option(magenta, 洋红); oListBox.add(oOption, 2); 从列表框中删除具有指定索引值的选项: oListBox.options2 = null; oListBox.remove2;,10.5.3 添加和删除列表项,跨浏览器多选框,function catchEvent(eventObj, event, eventHandler) if (eventObj.addEventListener) eventObj.addEventListener(event, eve

23、ntHandler,false); else if (eventObj.attachEvent) event = on + event; eventObj.attachEvent(event, eventHandler); catchEvent(window,load,setupEvents); function setupEvents(evnt) catchEvent(document.getElementById(someForm), submit, checkForm); function checkForm(evnt) var opts = document.getElementByI

24、d(someForm).selectOpts.options; for (var i = 0; i opts.length; i+) if (optsi.selected) alert(optsi.text + + optsi.value); / no server side processing, cancel submit event return false; , Option One Option Two Option Three ,动态修改选择列表框-动态添加一个选项, 动态添加一个选项 function catchEvent(eventObj,event,eventHandler)

25、 if (eventObj.addEventListener) eventObj.addEventListener(event,eventHandler,false); else if (eventObj.attachEvent) event =on+ event ; eventObj.attachEvent(event, eventHandler); catchEvent(window,load,setupEvents) function setupEvents(evnt) catchEvent(document.getElementById(form1),click, insertopti

26、on); function insertoption(evnt) var y=document.createElement(option); y.text=banana ;,var x=document.getElementById(select); x.add(y); Apple Orange Pineapple ,function insertoption(evnt) var y=document.createElement(option); y.text =“banana”;,var x=document.getElementById (select); x.add(y);,10.6 文

27、本验证,对文本域进行验证： 事件：change、 focus、 blur ； focus事件:当鼠标移到文本类型input域中时触发； blur事件:当鼠标离开时触发； change事件:当文本域内容被修改时触发。,10.6 文本验证, 帐号： 单价：￥ 数量： 个 总价：￥ , function clearText( ) if (document.myform.card.value=输入您的会员帐号) document.myform.card.value= ; function check( ) var a=document.myform.card.value; if (a.substr(0

28、,2)!=10 | isNaN(a) alert(格式错误，请重新输入); document.myform.card.focus( ); document.myform.card.select( ); function compute( ) var price= document.myform.price.value; var number= document.myform.number.value ; document.myform.tot.value= price*number; ,10.6 文本验证,小 结,本章主要讲述了如何处理表单事件、表单元素（select、checkbox、radio、text、button等）及表单的验证。,