表单脚本

表单的基础知识

在HTML中,表单是由<form>元素表示的,在Javascript对应的是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>元素引用的方式有好几种

var form=document.getElementById("form1");

var firstForm=document.form[0];

var myForm=document.form["form2"];

提交表单

点击提交按钮或图像按钮,就会提交表单

使用<input>或<button>都可以定义提交按钮,将其type特性设置为“submit”即可

使用<input>定义图像按钮,type特性设置为“image”

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

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

<input type="image" src="graphic.gif">

以这种方式提交表单时,浏览器在将请求发送给服务器前会触发submit事件,有机会验证表单数据,阻止默认的行为

var form=document.getElementById("myForm");

EventUtil.addHandler(form,"submit",function(event){

      event=EventUtil.getEvent(event);

      EventUtil.preventDefault(event);

    });

调用submit()方法提交表单不会触发submit事件,要在调用此方法之前验证表单数据

var form=document.getElementById("myForm");

form.submit();

解决重复提交表单的两个方法:第一次提交表单后就禁用提交按钮,或者利用onsubmit事件处理程序取消后续的表单提交操作

重置表单

使用<input>或<button>都可以定义重置按钮,将其type特性设置为“reset”即可

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

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

会触发reset事件

调用reset()方法也会触发reset事件

var form=document.getElementById("myForm");

form.reset();

表单字段

每个表单都有elements属性,是表单中所有元素的集合,其中包含着表单中所有的字段,例如<input>、<textarea>、<button>和<fieldset>,可以按照位置和name特性来访问它们

var form=document.getElementById("myForm");

var field1=form.elements[0];

var field2=form.elements["textbox1"];

var fieldCount=form.elements.length;

如果多个表单控件都使用一个name,elements[name]返回一个NodeList,是一个集合

共有的表单字段属性

除了<fieldset>元素以外,所有的表单字段都拥有相同的一组属性

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

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

name:当前字段的名称

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

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

type:当前字段的类型,如“checkbox”、“radio”等等

value:表示当前字段被提交给服务器的值,对于文字字段来说,这个属性是只读的,包含文件在计算机中的路径

除了form只读,其他可修改

//避免多次提交表单

EventUtil.addHandler(form,"submit",function(event){

      event=EventUtil.getEvent(event);

      var target=EventUtil.getTarget(event);

      var btn=target.elements["submit-btn"];

      btn.disabled=true;

    });

以上代码在表单提交过一次以后马上禁用它,由于执行时差问题,不能用onclick事件处理程序来处理重复提交表单问题

<input>和<button>元素的type可以修改,<select>元素的type属性只读

JavaScript高级程序设计52.pdf的更多相关文章

  1. JavaScript高级程序设计61.pdf

    JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...

  2. JavaScript高级程序设计60.pdf

    错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...

  3. JavaScript高级程序设计58.pdf

    15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...

  4. JavaScript高级程序设计57.pdf

    表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...

  5. JavaScript高级程序设计55.pdf

    输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...

  6. JavaScript高级程序设计54.pdf

    过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...

  7. JavaScript高级程序设计53.pdf

    共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...

  8. JavaScript高级程序设计50.pdf

    hashchange事件 HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发 ...

  9. JavaScript高级程序设计49.pdf

    HTML5事件 contextmenu事件 contextmenu事件是冒泡的,可以将事件处理程序指定到document,这个事件的目标是用户操作的元素,在兼容DOM的浏览器中使用event.prev ...

随机推荐

  1. MongoDB笔记(四)基本管理命令

    MongoDB命令帮助系统 基本命令及实例 一基本命令 二基本DDL和DML 三启动与终止 四安全管理 五数据备份恢复与迁移管理 六远程连接管理   MongoDB是一个NoSQL数据库系统:一个数据 ...

  2. linux进程间通信--无名管道

    管道 只能用于具有亲缘关系的进程之间通信是一个半双工的通信模式, 具有固定的写读端和写端,管道可以看成一种特殊的文件,对它可以使用普通的read.write等操作 管道的创建: #include &l ...

  3. Linux之C编译器gcc和makefile使用简介

    使用gcc编译程序是,其过程主要分为四个阶段:预处理,编译,汇编,连接 程序清单: #include<stdio.h> #include<stdlib.h> int main( ...

  4. 【转】CHAR CHARACTER VARCHAR NCHAR NVARCHAR NVARCHAR2区别

    http://blog.csdn.net/lhl6688/article/details/44156823?ref=myread oracle提供了五种字符数据类型:char.nchar.varcha ...

  5. MAC 终端快捷建

    常用的快捷键: Ctrl + d        删除一个字符,相当于通常的Delete键(命令行若无所有字符,则相当于exit:处理多行标准输入时也表示eof) Ctrl + h        退格删 ...

  6. sass进阶篇总结一

    一.@if 指令: @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块.在 Sass 中除了 @if 之,还 ...

  7. 一个小程序[Socrates]中学到的Perl点滴

    1. 抓取网页源文件,只要三行代码 use LWP::Simple; $url='http://music.baidu.com/top/dayhot'; $page=get($url) or die ...

  8. 阻止CSS样式被缓存

    <link href="/stylesheet.css?<?php echo time(); ?>" rel="stylesheet" typ ...

  9. [转]left join,right join,inner join区别

    left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...

  10. Improved Semantic Representations From Tree-Structured Long Short-Term Memory Networks(1)

    今天和陈驰,汪鑫讨论了一下,借此记录一下想法. 关于这篇论文,要弄清的地方有: 1.LSTMtree到底是从上往下还是从下往上学的,再确认一下 2.关于每个节点的标注问题 3.label的值到底该怎么 ...