多语言展示
当前在线:172今日阅读:23今日分享:25

基于JavaScript表单脚本

一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。 表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。 表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。JavaScript与表单间的关系:JS最初的应用就是用于分担服务器处理表单的责任,打破依赖服务器的局面,尽管目前web和javascript都有了长足的发展,web表单依然没有为许多常见的任务提供现成的解决方案,很多开发人员不仅会在验证表单的时候使用javascript,而且还会用来增强一些标准表单控件的默认行为。
工具/原料

JavaScript

方法/步骤
1

一 ,表单的基础知识在HTML中,表单由form标签,在javascript中,表单对应HTMLFormElement类型,HTMLFormElement类型继承HTMLElement类型,所有它和其他的Element元素有相同的默认属性,同时它也有自己的属性和方法: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表单元素的方法有: var form=document.getElementById('form1'); //通过id来取得表单元素var firstForm=document.forms[0]; //通过document.forms来取得页面中的所有表单元素,通过索引值'0‘,取得第一个表单元素var form2=document.forms['form2']; //通过document.forms来取得页面中的所有表单元素,通过name值取得特定的表单元素提交表单:

2

以这种方式提交表单时,浏览器会在将请求发送给服务器之前触发 submit 事件。这样,有机会验证表单数据,并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交在JS中同样可以以编程的方式调用submit()方法来提交表单:

3

在重置表单时,所有表单字段都会恢复到页面刚加载完毕时的初始值用JS方法来重置表单:

4

表单字段:每个表单都有Element属性,该属性是表单中所有表单元素(字段)的集合。这个集合是一个有序列表,每个表单字段在element集合中出现的顺序,与在标记中出现的先后顺序相同,可以按位置和name值来访问他们。常见的表单字段有input,select,fieldset,要取得表单中的表单字段:

5

共有的表单字段属性:disabled:布尔值,表示当前字段是否被禁用。form:指向当前字段所属表单的指针;只读。name:当前字段的名称。readOnly:布尔值,表示当前字段是否只读。tabIndex:表示当前字段的切换(tab)序号。type:当前字段的类型,如'checkbox'、 'radio',等等。value:当前字段将被提交给服务器的值。对文件字段来说,这个属性是只读的,包含着文件在计算机中的路径除了 form 属性之外,可以通过 JavaScript 动态修改其他任何属性。能够动态修改表单字段属性,意味着我们可以在任何时候,以任何方式来动态操作表单。用户可能会重复单击表单的提交按钮。在涉及信用卡消费时,这就是个问题:因为会导致费用翻番。为此,最常见的解决方案,就是在第一次单击后就禁用提交按钮。只要侦听 submit 事件,并在该事件发生时禁用提交按钮即可 :

6

除了

之外,所有表单字段都有 type 属性。对于元素,这个值等于 HTML 特性 type 的值。对于其他元素,这个 type 属性的值如下表所列。

7

共有的表单字段方法 :每个表单字段都有两个方法: focus()和 blur()。使用 focus()方法,可以将用户的注意力吸引到页面中的某个部位。例如,在页面加载完毕后,将焦点转移到表单中的第一个字段。

8

HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中,只要设置这个属性,不用 JavaScript 就能自动把焦点移动到相应字段。例如:与 focus()方法相对的是 blur()方法,它的作用是从元素中移走焦点:document.forms[0].elements[0].blur();change事件:对于