首页 > 代码库 > {点点滴滴}DOM的Form对象
{点点滴滴}DOM的Form对象
DOM的Form对象
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 = http://www.mamicode.com/“zhangsan”>
<input type = submit name=submit value=http://www.mamicode.com/”递交”>
</form>
<script language=javascript>
function simu_submit()
{
// 用Form名称直接引用form对象
form1.method = “get”;
// 将form名称作为document对象的属性来引用form对象，
// 并用user作为form对象的属性来引用名为user的文本框元素对象
document.form1.user.value = http://www.mamicode.com/“lisi”;
// 下面2条语句使用item方法来访问文本框元素对象
// document.form1.item(“user”).value = http://www.mamicode.com/“lisi”;
// document.form1.item(0).value = http://www.mamicode.com/“lisi”;
// 下面的几条语句都是使用forms数组对象来引用其中的form1表单
// document.forms.form1.user.value = http://www.mamicode.com/“lisi”;
document.forms[“form1”].action = “http://www.baidu.com/deal.jsp”;
document.forms[0].submit();
}
</script>
<a href = “javascript:simu_submit()”>递交表单</a>
<! - - 下面这条语句实现与上面语句同样的功能
<a href=http://www.mamicode.com/”#” onclick = “simu_submit();return false”>递交表单
- ->
但是，上面的代码运行后，单击“递交”按钮后，页面并没有跳转，单击“递交”的超链接时，状态栏还会出现错误提示。这是因为表单提交按钮的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=http://www.mamicode.com/”输入lisi显示失败页面，其他显示成功页面”>
<input type=submit name=sbmLogin value=http://www.mamicode.com/”递交”>
</form>
<script language=javascript>
function login()
{
if (frmLogin.txtUser.value = http://www.mamicode.com/= “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=http://www.mamicode.com/”递交”>
</form>
<script language=”javascript”>
function dosubmit(frm)
{
if (frm.mem_id.value.length != 6)
{
alert(“会员号必须是6位”);
return false;
}
else
{
var mem_value = http://www.mamicode.com/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=http://www.mamicode.com/”递交” 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对象