JS第13章–表单对象和表单元素.ppt

1-* 北京源智天下科技有限公司 联系方式： 联系方式： 北京源智天下科技有限公司 第十三讲：表单对象和表单元素  讲师：杨兴 e-mail:jtclass@163.com 课程内容安排 表单对象概述 表单对象的应用 表单元素 文本框 按钮 表单对象概述 表单对象介绍 表单就是form/form之间部分。一个表单一般由三个基本组成部分组成：表单标签、表单域和表单按钮。它是域、按钮、文本、图像和其他元素的容器。 一个表单对象代表了HTML文档中的表单，由于HTML中的表单会由很多表单元素组成，因此form对象也会包含很多子对象。JavaScript会为每个form标签创建一个form对象，并将这些form对象存放在forms[]数组中。因此，可以使用以下代码来获得文档中的form对象。 document.forms[i] 表单对象概述 大小写的转换 大小写转换也是一个比较常见的技术，通常在网页中需要处理大小写的问题，比如在输入验证码的时候，假若不要求大小写，就可以统一转化成大写或小写。 将小写转换成大写的方法是toUpperCase，将大写转换成小写，则用toLowerCase方法。 01 function setCase (caseSpec) //自定义处理大小写转换的函数 02 { 03 if (caseSpec == upper) //判断是否是转换成大写 04 { 05 document.myForm.firstName.value=document.myForm.firstName.value.toUpperCase(); 06 document.myForm.lastName.value=document.myForm.lastName.value.toUpperCase(); 07 } 08 else{ //转换成小写 09 document.myForm.firstName.value=document.myForm.firstName.value.toLowerCase(); 10 document.myForm.lastName.value=document.myForm.lastName.value.toLowerCase() 11 } 12 } 表单对象概述 提交表单和重置表单 reset和submit。这两个方法类似于单击了“重置”和“提交”按钮。其中reset相当于重置按钮，sumit相当于提交按钮 。 04 script language=javascript 05 function Submit() //自定义函数 06 { 07 form1.submit(); //提交表单的方法 08 alert(提交成功); //提示用户信息 09 } 10 function Reset() //自定义函数实现重置 11 { 12 form1.reset(); //重置表单的方法 13 } 14 /script 表单对象概述 响应表单的提交和重置 前面讲了表单的提交和重置。现在来考虑，当一个表单按下提交或重置后，它是怎样来响应提交和重置的。其实也是很简单，只要运用form对象的两个事件onreset（重置时触发事件）和onsubmit（提交时触发事件）就可以了 。 示例如下: 01 script language=JavaScript 02 function allowReset() //自定义函数用于设置数据 03 { 04 return window.confirm(确定重置吗？); //响应 onReset事件 05 } 06 function allowSend() //自定义函数用于发送数据 07 { 08 return window.confirm(确认发送吗？); //响应 onSubmit事件 09 } 10 /script 表单对象概述 11 form action= onReset=return allowReset()onSubmit=return allowSend()!--调用allowSend函数-- 12 name:input type=text name=lastNameP !--姓名文本框-- 13 address:input type=text name=addressP !--地址文本框-- 14 city:input TYPE=text name=cityP !--城市文本框-- 15 input typeE=“radio” name=“gender” CHECKED男 !--