javaScript表单脚本

来源：互联网发布：女生项链品牌知乎编辑：程序博客网时间：2024/04/29 21:01

获取表单的集中方法：
1、通过表单ID去寻找表单
var form = document.getElementById("form");
2、通过document.forms可以取得页面中的所有表单。在这个结合中可以通过数值所有或者name获得相对应的表单。
var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms["form2"]; //取得页面中名称为"form2"的表单
提交表单：

<input type="submit" value="Submit Form">

<button type="submit">Submit Form</button>

<input type="image" src="graphic.gif"/>
只要表单中存在上面列出的任何一种按钮，那么在相应表单空间拥有焦点的情况下，按回车键就可以提交该表单。

还可以用：
var form = document.getElementById("myForm");
//提交表单
form.submit();
以编程方式调用 submit()方法也可以提交表单，这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。
表单字段：
1、可以通过原生DOM方法去访问表单元素。此外，每个表单都有elements属性，该属性是表单中所有表单元素的集合。这个elements集合是有个有序列表，其中包含着表单的所有字段。每个表单字段在elements集合中的顺序，与他们出现在标记中顺序相同，可以按照位置和name特性来访问他们。
var form = document.getElementById("form");//获取表单
var firstDom = form.elements[0];
var inputIp = form.elements["name"];

单选按钮实例：
<!DOCTYPE html>
<html>
<head>
</head>
<script type="application/javascript">

</script>
<body>
<form method="post" id="myForm">
<ul>
<li><input type="radio" name="color" value="red">Red</li>
<li><input type="radio" name="color" value="green">Green</li>
<li><input type="radio" name="color" value="blue">Blue</li>
</ul>
</form>
</body>
</html>

var form = document.getElementById("myForm");
var colorFields = form.elements["color"];
alert(colorFields.length); //3
var firstColorField = colorFields[0];
var firstFormField = form.elements[0];
alert(firstColorField === firstFormField); //true

共有的表单字段属性
除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。由于<input>类型可以表示多种表单字段，因此有些属性只
适用于某些字段，但还有一些属性是所有字段所共有的。表单字段共有属性：
disabled:布尔值，表示当前字段是否被禁用
form：只向当前字段所属表单的指针：只读
name：当前字段的名称
readOnly：布尔值，表示当前字段是否只读
tabIndex:表示当前字段的切换(tab)序号
type：当前字段类型
value：当前字段将被提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机中的路径。

除了 form 属性之外，可以通过 JavaScript 动态修改其他任何属性。来看下面的例子：
var form = document.getElementById("myForm");
var field = form.elements[0];
//修改 value 属性
field.value = "Another value";
//检查 form 属性的值
alert(field.form === form); //true
//把焦点设置到当前字段
field.focus();
//禁用当前字段
field.disabled = true;
//修改 type 属性（不推荐，但对<input>来说是可行的）
field.type = "checkbox";

共有的表单字段方法
每个表单字段都有两个方法：focus()和blur()。focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其
可以响应键盘字段。
document.forms[0].elements[0].focus();//表单第一个字段获取焦点

HTML5新增一个autofocus属性。在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript就能自动把焦点移动到相
应字段。
<input type = "text" autofocus>

与 focus()方法相对的是 blur()方法，它的作用是从元素中移走焦点
document.forms[0].elements[0].blur();

共有的表单字段事件
blur：当前字段失去焦点时触发。
 change：对于<input>和<textarea>元素，在它们失去焦点且 value 值改变时触发；对于<select>元素，在其选项改变时触发。
 focus：当前字段获得焦点时触发。

阅读全文

0 0