JavaScript 表单脚本
2016-07-23 17:18
609 查看
理解表单
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值来取得特定的表单。
用户点击按钮或图像按钮时,就会提交表单;使用<input>或<button>都可以定义提交按钮,只要将其type特性的值设置为"submit"即可。当然也可以通过自定义函数来提交表单;
重置表单:
在用户单击重置按钮时,表单会被重置。使用type特性值为"reset"的<input>或<button>可以创建重置按钮
表单字段
可以把表单里面的字段当成DOM的形式来访问和处理。另外,每个表单都有elements属性,该属性是表单中所有元素的集合。这个elements集合是一个有序列表,其中包含着表单中的所有字段,例如<input>,<textarea>.<button>和<fieldset>。每个表单字段在elements集合中的顺序,与它们出现在标记中的属性一致,可以按照位置和name的特性来访问它们。
共有的表单字段属性
disabled:布尔值,表示当前字段是否被禁用。
form:指向当前字段所属表单的指针;只读。
name:当前字段的名称。
readOnly:布尔值,表示当前字段是否只读。
tabIndex:表示当前字段的切换(tab)序号。
type:当前字段的类型,如"checkbox","radion",等等。
value:当前字段提交给服务器的值。对文件字段来说,这个属性是只读的,包含着文件在计算机的路径。
共有的表单字段方法
每个表单的字段都有两个方法:focus()和blur()。其中,focus()方法用于将浏览器的焦点设置到表单字段,即激活表单字段,使其可以响应键盘事件。
HTML5还为表达新增了一个autofocus属性,在支持这个属性的浏览器中,只要设置这个属性,不用JavaScript就能自动把焦点移动到对应字段;
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"); //获取form var 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>
相关文章推荐
- javaScript实现简单的表单验证
- js 跨域详解
- javascript命名规范总结
- JavaScript struct类型与valueOf
- 12个非常实用的JavaScript小技巧
- 快速、高效解析Json数据之FastJson
- BZOJ1013 [JSOI2008]球形空间产生器sphere
- Javascript WebSocket使用实例介绍(简明入门教程)
- js常用正则表达式
- javascript实现 时钟实时显示及幻灯片自动播放
- JavaScript document.cookie使用
- js使用立即调用的函数表达式创建局部作用域问题
- javascript针对DOM的应用
- JavaScript 对象与数组(操作指南)
- javascript针对DOM的应用
- javascript针对DOM的应用(二)
- 省市区联动
- div上下循环移动
- 几个比较”有意思“的JS脚本
- JSP学路漫漫 之 1.1 指令标签 (1) page指令