JavaScript 表单脚本

来源：互联网发布：健康系统破解软件编辑：程序博客网时间：2024/05/16 15:27

理解表单

JavaScript最初的一个应用，就是分担服务器处理表单的责任，打破处处依赖服务器的局面，现在表单已经成为开发Web程序必不可少的一部分了，可是我们又对它了解多少啦，下面一起来了解一下表单；

表单的基础知识

在HTML中，表单是由<form>元素来表示额，而在JavaScript中，表单对应的则是HTMLForm-Element类型。HTMLFormElement继承了HTMLElement,因而与其他HTML元素具有相同的默认属性。不过，HTMLFormElement也有它自己的属性和方法；

acceptCharset:服务器能够处理的字符集；等价于HTML中的accept-charset属性。

action:接受请求的URL；等价于HTML中的action特性。

elements:表单中所有控件的集合（HTMLCollection)。

enctype:请求的编码类型，等价于HTML中的enctype特性。

length:表单中控件的数量。

method：要发送的HTTP请求类型，一般是get或post;等价于HTMl的method特性。

name：表单的名称；等价于HTMl的name特性。

reset():将所有表单域重置为默认值。

submit():提交表单。

target:用于发送请求和接收相应的窗口名称：等价于HTML的target属性。

取得<form>元素的方式有好几种，通常用的最多的是把里面的元素当成dom，为其添加ID属性，通过id来定位。

还可以通过document,forms来获取页面中所有的表单。然后通过数值索引或name值来取得特定的表单。

var firstForm=document.forms[0]; //取得页面中的第一个表单var myForm=document,forms["form2"];//取得页面中名称为"form2"的表单

提交表单

用户点击按钮或图像按钮时，就会提交表单；使用<input>或<button>都可以定义提交按钮，只要将其type特性的值设置为"submit"即可。当然也可以通过自定义函数来提交表单；

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title> </head> <body><form method="post" id="form1" action="#">请输入账号<input type="text"></input><br>请输入密码<input type="password"></input><br><input type="submit"></input></form> </body></html>

以上是普通的表单提交，当然可以可以使用事件绑定提交的方式

<!doctype html><html lang="en"> <head>  <meta charset="UTF-8">  <meta name="Generator" content="EditPlus®">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <title>Document</title> </head> <body><form method="post" id="form1" action="#">请输入账号<input type="text"></input><br>请输入密码<input type="password"></input><br><input type="button" value="提交" onclick="submit()"></input></form> </body> <script>function submit(){var form=document.getElementById("form1");form.submit();} </script></html>

以函数事件提交的方式，使得我们可以在浏览器发送请求给服务器之前触发submit，这样我们就有事件来验证表单数据，并决定最终是否要提交表单；

重置表单：

在用户单击重置按钮时，表单会被重置。使用type特性值为"reset"的<input>或<button>可以创建重置按钮

<button type="reset" >重置</button><input type="reset" value="重置"></input>

表单字段

可以把表单里面的字段当成DOM的形式来访问和处理。另外，每个表单都有elements属性，该属性是表单中所有元素的集合。这个elements集合是一个有序列表，其中包含着表单中的所有字段，例如<input>,<textarea>.<button>和<fieldset>。每个表单字段在elements集合中的顺序，与它们出现在标记中的属性一致，可以按照位置和name的特性来访问它们。

var form=document.getElementById("form1"); //获取formvar field1=form.elements[0];//获取表单中的第一个字段alert(field1.value);//获取名字loginNo的字段var field2=form.elements['loginNo'];alert(field2);var fieldCount=form.elements.length; //获取表单中包含的字段的数量

共有的表单字段属性

disabled:布尔值，表示当前字段是否被禁用。

form:指向当前字段所属表单的指针；只读。

name:当前字段的名称。

readOnly:布尔值，表示当前字段是否只读。

tabIndex:表示当前字段的切换(tab)序号。

type:当前字段的类型，如"checkbox","radion",等等。

value:当前字段提交给服务器的值。对文件字段来说，这个属性是只读的，包含着文件在计算机的路径。

共有的表单字段方法

每个表单的字段都有两个方法:focus()和blur()。其中,focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。

HTML5还为表达新增了一个autofocus属性，在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript就能自动把焦点移动到对应字段；

请输入账号<input type="text" name="loginNo" autofocus></input><br>

0 0