《《表单与表单域》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《表单与表单域》PPT课件.ppt（42页珍藏版）》请在三一办公上搜索。
1、Web编程基础,Chapter10：表单与表单域,2023/8/1,访问表单和表单域表单事件表单元素 表单文本校验,内容,.,表 单,10.1 访问表单和表单域,第一种方法:为表单设置一个标识符，然后使用document对象的getElementById方法访问它:假如某表单的ID为form1oForm=document.getElementById(form1);第二种方法：使用document对象的forms属性。假如某表单是网页中的第一个表单，且其名称（name属性）为form1：oForm=document.forms0;oForm=document.formsform1;oForm=
2、document.form1;,10.1.1 访问表单,表单对象的常用属性acceptCharset：设置或获取一个逗号分隔的列表，内容是服务器可接受的字符集。action：设置或获取表单内容要发送到并进行处理的URL。enctype：设置或检索表单的MIME编码方式。默认设置为application/x-www-form-urlencoded，若要上传文件，则应设置为multipart/form-data。id：设置或检索表单的id。length：检索表单中的表单域的数目。method：设置或检索如何将表单数据发送到服务器。若设置为GET，则把表单数据附加到action属性指定的URL上发送
3、；若设置为POST，则通过HTTP发布事务发送数据。name：设置或检索表单的名称。target：设置或检索表单提交结果的框架或窗口名称。,10.1.1 访问表单,表单的集合elements：包含表单中除外的所有表单域。elements集合的length属性与表单的length属性值相等。表单的方法reset()：把表单中的表单域重置为它们的默认值，但不会触发表单的onreset事件。submit()：提交表单，但不会触发表单的onsubmit事件。表单对象的常用事件onreset：当重置表单时触发。onsubmit：当提交表单时触发,10.1.2 访问表单域,表单域都包含表单的element
4、s集合中通过ID访问表单域var oTextBox=document.getElementById(txtUsername);通过索引访问表单域var oTextBox=document.form1.elements0;通过name访问表单域var oTextBox=document.form1.elementstxtUsername;直接通过name属性来访问表单域：var oTextBox=document.form1.txtUsername;表单域的名称中包含空格，需要使用方括号标记：var oTextBox=document.form1.elementsUser name;,10.1.
5、2 访问表单域,表单域的属性、方法和事件disabled属性：获取或设置表单域是否被禁用。form属性：获取包含表单域所在的表单。blur()方法：表单域失去焦点，并将焦点移到别处。focus()方法：使表单域获得焦点。onblur事件：当表单域失去焦点时执行onblur事件处理程序。onfocus事件：当表单域获得焦点时发生，将执行onfocus事件处理程序,例：10.1,10.1.3 提交表单,单击提交按钮提交表单：单击图像按钮提交表单：调用表单的submit()方法提交表单：,10.1.3 提交表单,表单提交目的地提交给服务器端处理程序：提交给JavaScript函数：通过电子邮件形式提
6、交表单数据：,10.1.4 重置表单,使用重置按钮重置表单：通过调用表单的reset()方法重置表单：,10.2 为表单添加事件,与表单相关的主要事件submit，其事件句柄为onsumbit，为表单添加事件句柄的方法如下：传统方法：document.getElementById(“someform”).onsumbit=formHandler;内嵌的方法：,false（取消提交操作）,true（表单提交继续执行）,表单事件,按钮-事件处理程序,onSubmit事件处理代码：如果函数返回true，则向远程服务器提交表单；如果函数返回false，则取消提交。,事件处理程序(onSubmit),f
7、unction check()var userName=;var pass1=document.myform.pass1.value;var pass2=document.myform.pass2.value;if(pass1=pass2)if(pass1.length!=0)document.write(恭喜您，注册成功！欢迎+userName+光临！);return true;else alert(密码不能为空！n请输入密码);return false;else alert(确认码必须和输入的密码相同！);return false;,onSubmit事件调用的函数：输入数据检查,10.2.
8、1 跨浏览器的事件处理,用来解决跨浏览器兼容、捕获事件、添加事件句柄的事件处理函数：function catchEvent(eventObj,event,eventHandler)if(eventObj.addEventListener)eventObj.addEventListener(event,eventHandler,false);else if(eventObj.attachEvent)event=on+event;eventObj.attachEvent(event,eventHandler);,10.2.2 取消一个事件,取消表单提交操作（通用取消事件函数）function ca
9、ncelEvent(event)if(event.preventDefault)event.preventDefault();event.stopPropagation();else event.returnValue=false;event.cancelBubble=true;,10.3 文本框、多行文本、密码框及隐藏表单域元素,单行、基于文字的input元素hidden:隐含的对象,在页面里可以临时存放一些中间值，又不需要显示在页面里document.getElementById(test).value：得到对象的值多行文本框 Initial text,10.3 文本框、多行文本、密码框及
10、隐藏表单域元素,文本框对象的常用方法blur()：使文本框失去焦点并触发onblur事件。focus()：文本框得到焦点并执行由onfocus事件指定的代码。select()：选取文本框中的所有文本。文本框的事件onblur和onfocusonchange：当用户更改文本框的内容并使其失去焦点时触发。如果通过在脚本中设置value属性来更改文本框的内容，则不会触发onchange事件。onselect：当选取文本框中的一个或多个字符时触发。,登陆界面,文本框和密码框,登陆界面,Name:Password:The text area,var strResults=;var textInputs=
11、document.getElementById(someForm).getElementsByTagName(input);for(var i=0;i textInputs.length;i+)if(textInputsi.type!=submit)strResults+=textInputsi.value+”;document.getElementById(text4).value=strResults;,10.3 文本框、多行文本、密码框及隐藏表单域元素,10.4 单选按钮和复选框,单选按钮的常用方法blur()：使单选按钮失去焦点并触发onblur事件。click()：模拟鼠标单击操作并
12、触发onclick事件。focus()：使单选按钮获得焦点并执行由onfocus事件指定的代码。单选按钮的常用事件onblur：当单选按钮失去输入焦点时触发。onclick：当用户用鼠标左键单击单选按钮时触发。onfocus：当单选按钮获得焦点时触发。,10.4 单选按钮和复选框,复选框对象的常用方法blur()：使复选框失去焦点并触发onblur事件。click()：模拟鼠标单击操作并触发onclick事件。focus()：使复选框获得焦点并执行由onfocus事件指定的代码。复选框对象的常用事件onblur：当复选框失去输入焦点时触发。onclick：当用户用鼠标左键单击复选框时触发。on
13、focus：当复选框获得焦点时触发。,每次只能选择一项,10.4 单选按钮和复选框,function handle()var buttons=document.getElementsByName(radiogroup);for(var i=0;i,男女,单选按钮：每次只能选择一项,10.4 单选按钮和复选框,10.4 单选按钮和复选框,10.4 单选按钮和复选框,复选框（checkbox）：可同时选择多个,Opt1:Opt2:,表单添加新元素：,var newCheckbox=document.createElement(input);newCheckbox.type=checkbox;new
14、Checkbox.name=chekbox3;newCheckbox.checked=true;newCheckbox.text=df;someForm.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.myfor
15、m.checkbox2.checked=true)s=s+document.myform.checkbox2.value+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+);,单击”成交“按钮调用的
16、函数：检查每个复选框的选中情况，累计用户选中的商品,是为了原样显示字符串中的换行”n”格式,onClick=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(form
17、1).theSe.selectedIndex;var opt=document.getElementById(form1).theSe.optionsslIdx;alert(opt.text+opt.value);return false;,/单选下拉菜单 opt1 opt2 opt3,Select 元素提供的属性:disabled 该元素是否被禁用options 选项数组selectedindex 单选框元素表示当前选中的项目编号；多选框元素，它的值是选中的第一个值；selected 设置或者查看该选项是否被选中text 设置或者查看选项的文本值select对象的常用方法add：向selec
18、t对象的options集合中添加一个option元素。remove：从select对象的options集合中移除一个option元素。select对象的常用事件是onchange，该事件在用户从列表框中选择不同选项时发生。,10.5 选择列表框,select对象有一个options集合，该集合由列表框中的所有option对象组成。optionsi.defaultSelected：返回一个Boolean值，表明该选项初始化时是否被选中。optionsi.length：返回一个整数，表示options集合包含的选项个数。该属性值等于select对象的length属性值。optionsi.selec
19、ted：返回一个Boolean值，表明该选项是否被选中。optionsi.text：该选项显示在列表框中的文本。optionsi.value：该选项的值。当用户提交表单时，select对象的name属性值和选中项的value属性值将一起被发送到服务器端。,10.5.2 访问列表项,假如某个列表项在options集合中的索引为iIndex，则该列表项的文本和值分别为：oListBox.optionsiIndex.textoListBox.optionsiIndex.value当前选中项的文本和值：oListBox.optionsoListBox.selectedIndex.textoListBo
20、x.optionsoListBox.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集合的末尾。若要添加到列表框的指定位置，
21、则必须在调用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,eventHandler,false);else if
22、(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.getElementById(someForm).selectOpts.options;for(var i=0
23、;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)if(eventObj.addEventListener)eventObj.addEventListener(event,ev
24、entHandler,false);else if(eventObj.attachEvent)event=on+event;eventObj.attachEvent(event,eventHandler);catchEvent(window,load,setupEvents)function setupEvents(evnt)catchEvent(document.getElementById(form1),click,insertoption);function insertoption(evnt)var y=document.createElement(option);y.text=ban
25、ana;,var x=document.getElementById(select);x.add(y);AppleOrange Pineapple,function insertoption(evnt)var y=document.createElement(option);y.text=“banana”;,var x=document.getElementById(select);x.add(y);,10.6 文本验证,对文本域进行验证：事件：change、focus、blur；focus事件:当鼠标移到文本类型input域中时触发；blur事件:当鼠标离开时触发；change事件:当文本域内容被修改时触发。,10.6 文本验证,帐号：单价：￥数量：个总价：￥,function clearText()if(=输入您的会员帐号)=;function check()var a=;if(a.substr(0,2)!=10|isNaN(a)alert(格式错误，请重新输入);();();function compute()var price=;var number=;=price*number;,10.6 文本验证,小 结,本章主要讲述了如何处理表单事件、表单元素（select、checkbox、radio、text、button等）及表单的验证。,
