{点点滴滴}DOM的Form对象

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了{点点滴滴}DOM的Form对象相关的知识,希望对你有一定的参考价值。

DOM的Form对象

作者:maybelle0049

Form对象的主要功能就是能够直接访问html文档中的Form表单。一个web页面可以有一个或多个Form表单,使用document.forms数组对象可以访问到各个Form表单。可以将<form>标签中嵌入的表单字段元素的名称作为一个form对象的属性,来引用表示这个表单字段字段元素的对象。 

 

form对象的方法 

◆ submit方法:该方法是form对象的专用方法,用于向服务器递交表单数据,模拟用户单击<input type=submit …>按钮的效果,但该方法不产生onsubmit事件。 

◆ item方法:返回代表Form表单中的某个表单字段元素所对应的对象,接受的参数可以是表单字段元素的名称,也可以是表单字段元素在Form表单中的索引序号。item方法不能返回< input type=submit …>类型的表单字段元素。

 

form对象的属性 

HTML文档中的<form>标签具有name, target, title, enctype, method, action等属性。与之对应,javascript中的form对象也具有这些属性来访问HTML文档中的<form>标签属性。Form对象的属性还包括<form>标签中嵌入的表单字段元素的名称,可以将表单字段元素的名称作为form对象的属性,来应用表单字段元素所对应的对象。下面的实例是如何访问form的对象及其属性: 

<form name = form1 action=”” method=post>

<input type = text  name = user  value = “zhangsan”>

<input type = submit name=submit  value=”递交”>

</form>

<script language=javascript>

       function simu_submit()

       {

              // 用Form名称直接引用form对象

              form1.method = “get”;

              // 将form名称作为document对象的属性来引用form对象,

              // 并用user作为form对象的属性来引用名为user的文本框元素对象

              document.form1.user.value = “lisi”;

              // 下面2条语句使用item方法来访问文本框元素对象

              // document.form1.item(“user”).value = “lisi”;

              // document.form1.item(0).value = “lisi”;

              // 下面的几条语句都是使用forms数组对象来引用其中的form1表单

              // document.forms.form1.user.value = “lisi”;

              document.forms[“form1”].action = “http://www.baidu.com/deal.jsp”;

              document.forms[0].submit();

       }

</script>

<a href = “javascript:simu_submit()”>递交表单</a>

<! - - 下面这条语句实现与上面语句同样的功能

<a href=”#”  onclick = “simu_submit();return false”>递交表单</a>

- ->

      

但是,上面的代码运行后,单击“递交”按钮后,页面并没有跳转,单击“递交”的超链接时,状态栏还会出现错误提示。这是因为表单提交按钮的name属性设置成“submit”,从而与submit方法发生了冲突。将表单递交按钮的name属性修改为submit1后,正常。

(设置HTML元素的name和id属性值,定义Javascript中的变量名、函数名等时,都要特别注意不能与DOM对象模型中定义的对象名、属性名、方法名相冲突。)

 

还可以在Form表单的action属性中使用javascript协议。下面的实例在form表单的action属性中使用Javascript协议,来实现用户提交不同内容后不同的效果,其中failure.html和succes.html文件,可以自行设计: 

<form name=frmLogin action=”javascript: login()” method=post>

<input type=text name=txtUser value=”输入lisi显示失败页面,其他显示成功页面”>

<input type=submit name=sbmLogin value=”递交”>

</form>

<script language=javascript>

       function login()

       {

              if (frmLogin.txtUser.value = = “lisi”)

              {

                     window.open(“failure.html”, “_self”);

              }

              else

              {    

                     window.open(“success.html”,”_self”);

              }

       }

</script>

 

脚下留心:

设置HTML元素的name和id属性值,定义Javascript中的变量名、函数名等时,都要特别注意不能与DOM对象模型中定义的对象名、属性名、方法名相冲突。前面实例中提到过这个问题。如你把一个自定义的函数名用click来命名,就会出现错误。 

 

Form对象的事件 

onsubmit事件:是form对象的专有事件,当用户单击<input type=submit …>按钮或在表单的单行文本输入框中按下回车键后,表单数据即将递交到WWW服务器前发生该事件。 

onsubmit事件处理的典型用法就是检查Form表单收集到的数据的合法性和完整性,防止将不正确的数据传送给服务器。在onsubmit事件属性设置中,一定要使用return语句返回事件处理的结果,如果返回false,则取消数据的提交,如果返回true,则继续提交到服务器。 

有了Javascript,就可以在客户端来验证用户提交的数据是否合法,而不用提交到服务器后由服务器程序来验证,这样既减少了网络流量,又降低了服务器开销。 

JavaScript脚本代码可以放在web页面的任何合法位置,如果代码较多,为了整洁方便,最好将所有的脚本代码放在web页面的同一个地方,通过是紧跟在web页面开头部分的<body>标签之后。

 

下面的实例演示如何在表单提交数据时,对用户输入进行检查: 

<form name=form1 target=”_blank” method=post onsubmit=”return dosubmit(this)”>

会员号码(6位数字):<input type=text name=mem_id>

<input type=submit name=submit1 value=”递交”>

</form>

<script language=”javascript”>

       function dosubmit(frm)

       {

              if (frm.mem_id.value.length != 6)

              {

                     alert(“会员号必须是6位”);

                     return false;

              }

              else

              {

                     var mem_value = frm.mem_id.value;

                     for (var i=0; i<mem_value.length; i++)

                     {

                            if(mem_value.charAt(i)<’0’ || mem_value.charAt(i)>’9’)

                            {

                                   alert(“会员号只能是数字”);

                                   return false;

                            }

                     }

              }

              // frm.submit();

              return true;

       }

</script> 

在事件属性的设置值中,可以使用this关键字代表触发该事件的事件源对象,所以作为参数传递给dosubmit函数的this就代表form1对象。

如果取消// frm.submit();语句前的注释,在文本输入框中输入正确格式的会员后提交表单,浏览器会打开2个新的窗口,这说明表单数据被提交了2次。这是因为frm.submit()语句会提交表单数据,当document方法返回true时,浏览器也会继续提交表单数据。所以,不能让frm.submit()语句与return true 语句在onsubmit事件处理函数中同时出现。

如果上面要用frm.submit()语句提交表单数据,onsubmit事件属性设置中必须总是返回false,在dosubmit函数中不必再使用任何return语句。

 

因为浏览器提交表单数据到服务器的动作,是由单击表单上的“提交”按钮(<input type=submit …>)事件引发的,所以,也可以在表单提交按钮的单击事件处理程序中验证表单数据,并决定是否继续提交表单数据。这样的话,不用修改上面的Javascript代码,只要修改HTML表单及提交按钮的事件属性设置即可。修改内容如下:

<form name=form1 target=”_blank” methos=post>

会员号码(6位数): <input type=text value=”递交” onclick=”dosubmit(this.form); return false”>

</form>

注意:这种方式,只能在单击表单的“提交”按钮时进行数据验证,当在表单文本输入按下回车时,表单数据会直接提交。

 

form对象的对象属性 

1、  all数组属性:代表某个对象对应的HTML标签中所包含的所有HTML子元素对象的集合,在这里代表<form>标签下的所有子元素对象的集合;

2、  elements数组对象:代表<form>标签下除了<input type=image >之外的表单字段元素对象的集合;

3、  children数组属性:代表某个对象对应HTML标签中包含的所有直接的HTML子元素对象的结合,不包含子元素下面的子元素,用在form对象时,包含<input type=image>表单字段元素所对应的对象。

 

form表单字段元素对象 

form表单字段元素包括普通按钮、提交按钮、重置按钮、单选按钮、复选按钮、单行文本输入框、多行文本输入框、下拉列表等。不能以document.name或document.id属性值,以及name或id属性值的简写形式访问嵌套在<form>标签中的表单字段元素,如:

<form>

<input type=text name=email id = idEmail>

</form>

不能用document.email和idEmail等形式来访问上面的文本输入框的对象。 

 

form表单字段元素对象的方法 

◆ blur方法:让表单字段元素失去焦点,当前焦点移到后台;

◆ focus方法:让表单字段元素获得焦点;

◆ click方法:模仿用户鼠标单击该元素的过程;

◆ setCapture方法:在某个表单字段元素对象上捕获当前网页文档上的鼠标事件;

◆ releaseCapture方法:取消某个表单字段元素对象对当前网页文档鼠标事件的捕获设置;

◆ add方法:为列表框(select)增加一个选择项(option). 

 

form表单字段元素对象的属性 

◆ defaultValue属性:设置或返回表单字段元素的默认值(初始值);

◆ disabled属性:设置或返回表单字段元素的disabled状态;

◆ form属性:返回表单字段元素所属于form表单对象;

◆ readOnly属性:设置或返回文本输入框的readonly状态;

◆ title属性:设置或返回表单字段元素title属性;

◆ value属性:设置或返回表单字段元素的当前取值;

◆ checked属性:设置或返回单选按钮、复选按钮的选中状态;

 

另外,列表框(select)具有以下一些专有的属性。……  

 

form表单字段元素对象的事件 

◆ onChange事件:当焦点离开文本输入框且文本输入框中的值改变时,或者改变列表框的选择结果后,产生该事件;

◆ onSelect事件:当单行或多行文本输入框中的文字被选择加亮后,产生该事件;

◆ onFocus事件:当表单字段获得焦点时,产生该事件;

◆ onBlur事件:当表单字段元素失去焦点时,产生该事件。

以上是关于{点点滴滴}DOM的Form对象的主要内容,如果未能解决你的问题,请参考以下文章

随笔:关于Fiber架构的一点点理解

随笔:关于Fiber架构的一点点理解

随笔:关于Fiber架构的一点点理解

爬虫技术——抓取滴滴打车优惠券

加载中三个点点动态出现

内省Introspector 和BeanUtils 工具对反射属性的包装(简单的不是一点点哦)