JavaScript表单(Form)对象(forms[]数组)介绍

在HTML文档中有可能会出现多个表单，也就是说，一个HTML文档中有可能出现多个<form>标签。

JavaScript会为每个<form>标签创建一个表单(Form)对象，并将这些Form对象存放在forms[]数组中。因此，可以使用下面的代码来获得文档中的Form对象：

document.forms[i]

由于在forms[]数组中，Form对象是按照其在HTML文档中出现的次序所排列的，所以下面的代码可以获得HTML文档中的第1个Form对象：

document.forms[0]

除了使用forms[]数组下标的方式获得Form对象之外，还可以通过<form>标签中的name属性值来获得Form对象。例如<form>标签如下：

<form name="myForm">

如果要获得代表以上form元素的Form对象，可以使用下面的代码：

document.forms["myForm"]
document.myForm

avaScript表单(Form)对象(forms[]数组)的属性

表单(Form)对象的属性大多与form元素的属性相关。

Form对象常用的属性如下表所示：

属性	说明
acceptCharset	该属性可以返回或设置能接受的输入数据所用的字符编码方式列表。该属性的初始值由form元素中的acceptCharset属性值所决定。该属性由W3C标准支持，不过最新的浏览器大多都不再支持该属性了。
action	该属性可以返回或设置表单提交的URL，该属性的初始值由form元素中的action属性值所决定。
elements	该属性可以返回由Form对象中的元素所构成的数组，数组中的元素也是对象，有可能是Button对象、Checkbox对象、Hidden对象、Password对象、Radio对象、Reset对象、Select对象、Submit对象、Text对象或Textarea对象等。
encoding	该属性可以返回或设置提交表单时传输数据的编码方式。该属性的初始值由form元素中的enctype属性值所决定。该属性值通常有“multipart/form-data”和“text/plain”两种。
id	该属性可以返回或设置表单的id。该属性的初始值由form元素中的id属性值所决定。
length	该属性可以返回Form对象中元素的个数，相当于elements[]数组的长度。
method	该属性可以返回或设置提交表单的方式。该属性的初始值由form元素中的method属性值所决定。该属性有“get”和“post”两种，默认为get方式。
name	该属性可以返回或设置表单的名称。该属性的初始值由form元素中的name属性值所决定。
target	该属性可以返回或设置将表单提交到哪个浏览器窗口或框架中。该属性的初始值由form元素中的target属性值所决定。

JavaScript访问表单(Form)对象的属性

在JavaScript中，可以访问表单对象的属性。

实例

下面是一个访问表单对象的属性的例子。源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript访问表单(Form)对象的属性实例-www.baike369.com</title>
<link id="styleLink" rel="stylesheet" href="link.css" type="text/css" />
</head>
<body>
<h2>访问Form对象的属性</h2>
<form action="http://www.baike369.com" method="post" name="testform" id="testform" onreset="return confirm('你确定吗？');" onsubmit="alert('未准备好发送数据');return false;">
<label>姓名：
<input type="text" id="field1" name="field1" size="20" value="李岩" /></label>
<br />
<label>密码：
<input type="password" id="field2" name="field2" size="8" maxlength="8" /></label>
<br />
<input type="reset" value="重置" />
<input type="submit" value="确定" />
<input type="button" value="重置吗？" onclick="document.testform.reset();" />
<input type="button" value="确定吗？" onclick="document.testform.submit();" />
</form>
<hr />
<h2>Form对象属性</h2>
<script type="text/javascript">
<!--
// 修改document.testform为document.forms[0]会得到相同的结果
with(document.testform)
{
  document.write("action："+action+"<br />");
  document.write("encoding："+encoding+"<br />");
  document.write("length："+length+"<br />");
  document.write("method："+method+"<br />");
  document.write("name："+name+"<br />");
  document.write("target："+target+"<br />");
  // 读取页面中所有表单元素，并写入页面
  for(var i=0;i<document.testform.length;i++)
  {
    document.write("element["+i+"].type="+document.testform.elements[i].type+"<br />");
  }
}
-->
</script>
</body>
</html>

显示效果如下：

JavaScript表单(Form)对象(forms[]数组)的方法

表单(Form)对象的方法并不多，只有reset()和submit()两个方法，这两个方法类似于单击了“重置”按钮和“提交”按钮。

Form对象常用的方法如下表所示：

方法	说明
reset()	该方法可以将表单中所有元素重置为初始值，相当于单击了“重置”按钮（但不激活“重置”按钮中设置的事件）。
submit()	该方法可以提交表单内容，相当于单击了“提交”按钮（但不激活“提交”按钮中设置的事件）。

posted @ 2017-01-12 14:28 天涯海角路阅读(2079) 评论(0) 收藏举报

刷新页面返回顶部

天涯海角路

JavaScript表单(Form)对象(forms[]数组)介绍