JS第13章-表单对象和表单元素课件.ppt

第十三讲:表单对象和表单元素讲师:杨兴e-mail:jtclass@课程内容安排表单对象概述表单对象的应用表单元素文本框按钮表单对象概述表单对象介绍表单就是<form></form>之间部分。一个表单一般由三个基本组成部分组成:表单标签、表单域和表单按钮。它是域、按钮、文本、图像和其他元素的容器。一个表单对象代表了HTML文档中的表单,由于HTML中的表单会由很多表单元素组成,因此form对象也会包含很多子对象。JavaScript会为每个<form>标签创建一个form对象,并将这些form对象存放在forms[]数组中。因此,可以使用以下代码来获得文档中的form对象。[i]表单对象概述大小写的转换大小写转换也是一个比较常见的技术,通常在网页中需要处理大小写的问题,比如在输入验证码的时候,假若不要求大小写,就可以统一转化成大写或小写。将小写转换成大写的方法是toUpperCase,将大写转换成小写,则用toLowerCase方法。01 functionsetCase(caseSpec) //自定义处理大小写转换的函数02 {03 if(caseSpec=="upper") //判断是否是转换成大写04 {05 =();06 =();07 }08 else{ //转换成小写09 =();10 =()11 }12 }表单对象概述提交表单和重置表单reset和submit。这两个方法类似于单击了“重置”和“提交”按钮。其中reset相当于重置按钮,sumit相当于提交按钮。04 <scriptlanguage="javascript"> 05 functionSubmit() //自定义函数06 {07 (); //提交表单的方法08 alert("提交成功"); //提示用户信息09 }10 functionReset() //自定义函数实现重置11 {12 (); //重置表单的方法13 }14 </script>表单对象概述响应表单的提交和重置前面讲了表单的提交和重置。现在来考虑,当一个表单按下提交或重置后,它是怎样来响应提交和重置的。其实也是很简单,只要运用form对象的两个事件onreset(重置时触发事件)和onsubmit(提交时触发事件)就可以了。示例如下:01 <scriptlanguage="JavaScript"> 02 functionallowReset() //自定义函数用于设置数据03 {04 ("确定重置吗?"); //响应onReset事件05 }06 functionallowSend() //自定义函数用于发送数据07 {08 ("确认发送吗?"); //响应onSubmit事件09 }10 </script>表单对象概述11 <formaction=""onReset="returnallowReset()"onSubmit="returnallowSend()"><!--调用allowSend函数-->12 name:<inputtype="text"name="lastName"><P> <!--姓名文本框-->13 address:<inputtype="text"name="address"><P> <!--地址文本框-->14 city:<inputTYPE="text"name="city"><P> <!--城市文本框-->15 <inputtypeE=“radio”name=“gender”CHECKED>男<!--性别单选按钮-->16 <inputtype="radio"name="gender">女<P>17 <inputtype="checkbox"name="retired">同意<P>18 <inputtype="reset"> <!--重置按钮-->19 <inputtype="submit"> <!--提交按钮-->20 </form>