javaScript表单脚本

系统管理员 2021-02-05 02:17 780阅读 0赞

获取表单的集中方法：  
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：当前字段获得焦点时触发。