《表单相关的小知识.doc》由会员分享，可在线阅读，更多相关《表单相关的小知识.doc（9页珍藏版）》请在金锄头文库上搜索。
1、form对象一个标记，就是一个对象。1、form对象的属性l name：表单的名称，主要用来让JS来控制表单。l action：表单的数据处理程序(PHP文件)。l method：表单的提交方式，取值：GET、POSTl enctype：表单数据的编码方式。2、form对象的方法l submit()：提交表单，与功能一样。l reset()：重置表单，与重置按钮功能一样。3、form对象的事件l onsubmit：当单击提交按钮时发生，并数据发往服务器之前发生。主要用来“在表单提交之前进行表单验证”。l onreset：当单击重置按钮时发生(了解)。获取表单元素的l 通过网页元素的id来获取对
2、象。document.getElementById(id)l 通过HTML标签名来获取对象。parentNode.getElementsByTagName(tagName)l 通过name属性来获取表单元素对象。表单中所有元素的起点都必须是document对象。u 语法：document.formObj.elementObju 访问方式是三层结构。其中，formObj代表表单对象，elementObj代表表单元素对象。u 举例：document.form1.username.value.length事件返回值事件的返回值，会影响对象的默认动作。如：标记的默认动作是打开一个网址。如果事件返回fa
3、lse，则阻止默认动作的执行；如果事件返回true或空，则默认动作继续执行。受返回值影响的事件有两个：onclick、onsubmit。提交和验证方法总结1、使用submit按钮，结合onsubmit事件来实现(最常用)2、submit按钮，结合onclick事件，实现表单的验证和提交3、button按钮(普通按钮)，结合submit()方法，实现表单验证提交function checkForm()if(document.form1.username.value.length = 0)/如果用户名为空window.alert(用户名不能为空！);else if(document.form1.u
4、sername.value.length20)/如果用户名长度小于5或大于20window.alert(用户名只能介于5-20个字符！);else if(checkOtherChar(document.form1.username.value)/如果用户名含有特殊符号window.alert(用户名中含有特殊符号！);else/如果验证通过，提交表单window.alert(验证通过！);/表单提交方法document.form1.submit();function checkOtherChar(str)/定义一个特殊符号的数组var arr = *,&,$,/;/循环比较：数组中的每一个字符
5、，与用户名每一个字符进行比对for(var i=0;iarr.length;i+)for(var j=0;jstr.length;j+)if(arri=str.charAt(j)return true;/如果没找到return false;用户名：密码：input对象一个标记，就是一个input对象。1、input对象的属性(以type=text为例)l name：表单元素的名称。l value：表单元素的值，用户输入的内容，可以通过该属性来获取。l size：表单的长度。l maxlength：表单元素的最大长度(最多可输的字符数)。l disabled：禁用属性。l readonly：只读
6、属性。2、input对象的方法l focus()：获得焦点的方法(定位光标)。l blur()：失去焦点的方法(移走光标)。l select()：选中文本的方法。3、input对象的事件l onfocus：当获得焦点时l onblur：当失去焦点时综合实例：表单验证select对象一个标记，对应一个select对象。select对象属性l options：设置或返回下拉列表中标记构成的数组。l selectedIndex：设置或选中指定的索引号。l length：指定下拉列表中标记的个数。l name：元素名称。option对象一个标记，对应一个option对象。option对象属性l tex
7、t：指和之间的文本。l value：是指标记的属性。综合实例：二级联动菜单（1）二级菜单初始化当网页加载完成，将arr_province中的数据写入到name=province下拉列表中。name=city下拉列表数据，要根据name=province列表的默认选择(selectedIndex)而改变。（2）根据name=province的选择，来改变name=city中的内容当改变时，获取选择中的省份的索引值。城市列表，会根据传递过来的索引值，请取对应的二维数组中的数据，并写入city列表中。var arr_province = 请选择省/城市,北京市,上海市,天津市,重庆市,深圳市,广东省
8、;var arr_city = 请选择城市/地区,东城区,西城区,朝阳区,宣武区,昌平区,大兴区,丰台区,海淀区,宝山区,长宁区,丰贤区, 虹口区,黄浦区,青浦区,南汇区,徐汇区,卢湾区,和平区, 河西区, 南开区, 河北区, 河东区, 红桥区, 塘古区, 开发区,俞中区, 南岸区, 江北区, 沙坪坝区, 九龙坡区, 渝北区, 大渡口区, 北碚区,福田区, 罗湖区, 盐田区, 宝安区, 龙岗区, 南山区, 深圳周边,广州市,惠州市,汕头市,珠海市,佛山市,中山市,东莞市;/网页加载完成，初始化二级菜单window.onload = init; /传地址，不带括号function init()/
9、获取name=province和name=city的对象var province = document.form1.province;var city = document.form1.city;/指定省份下拉中标记的个数province.length = arr_province.length;/循环将arr_province中的数据写入到标记中for(var i=0;iarr_province.length;i+)province.optionsi.text = arr_provincei;province.optionsi.value = arr_provincei;/修改省份列表中默认
10、选择项var index = 0;province.selectedIndex = index;/指定城市下拉中标记的个数city.length = arr_cityindex.length;/循环将arr_city中对应的数据写入到标记中for(var j=0;jarr_cityindex.length;j+)city.optionsj.text = arr_cityindexj;city.optionsj.value = arr_cityindexj;function changeSelect(index)/获取name=city的对象var city = document.form1.c
11、ity;/指定城市下拉中标记的个数city.length = arr_cityindex.length;/循环将arr_city中对应的数据写入到标记中for(var j=0;jarr_cityindex.length;j+)city.optionsj.text = arr_cityindexj;city.optionsj.value = arr_cityindexj;省份：城市：HTML5简介HTML5是新一代的HTML。HTML5目前主要应用在手机端，在PC端最新浏览器已经开始支持了，但还不全面。HTML5是由W3C和WHATWG合作的结果。W3C是万维网联盟，主要制作各种互联网标准的国际组织。如：XHTML、CSS、JavaScript、XML、AJAX等。主要想发展XHTML2.0。WHATWG应用程序工作组，是由Firefox、Chrome、苹果、safari、IE等浏览器公司成立了一个机构。主要面向应用程序的完善和开发、表单的扩展和完善。如：在HTML5中使用标记，直接可以播放视频。 邮箱验证input type = “color” nam
