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事件：当表单字段元素失去焦点时，产生该事件。