如何理解JavaScript表单的基础知识

进修社 人气:5.76K

HTMLFormElement继承了HTMLElement,它自己独有的属性和方法有:

如何理解JavaScript表单的基础知识

acceptCharset:服务器能够处理的字符集,等价于HTML的accept-charset特性 action:接收请求的URL,等价于HTML中的action特性。 elements:表单中所有控件的集合(HTMLCollection) enctype:请求的编码类型 length:表单中控件的数量 method:要发送的HTTP请求类型,通常是get或post name:表单的名称 reset():将所有表单域重置为默认值 submit():提交表单 target:用于发送请求和接收响应的窗口名称;

取得form元素的引用可以是getElementById、也可以是s中数值索引或name值;

 一、提交表单

提交表单的按钮有三种:

以上面这种方法提交表单会在浏览器请求发送给服务器之前触发submit事件,这样就可以验证表单数据和决定是否允许提交表单,如下面的'代码就可以阻止表单的提交:

var form = lementById("myForm");ventListener("submit", function () { entDefault();});

另外也可以通过js脚本调用submit()方法提交表单,在调用submit()提交表单不会触发submit事件。

var form = lementById("myForm");it();

第一次提交表单后如果长时间没有回应,用户会变得不耐烦,往往多次点击提交按钮,导致重复提交表单,因此应该在第一次提交表单后就禁用提交按钮或利用onsubmit事件阻止后续操作。

var submitBtn = lementById("submitBtn");ick = function () { //处理表格和提交等等 bled = true;};

 二、重置表单

重置表单应该使用input或button:

当用户单击重置按钮重置表单时,会触发reset事件,可以在必要的时候取消重置操作:

var resetBtn = lementById("resetBtn");ventListener("reset", function () { entDefault();});

另外也可以通过js脚本调用reset()方法重置表单,在调用reset()方法重置表单时会触发reset事件。

var form = lementById("myForm");t();

 三、表单字段

每个表单都有一个elements属性,该属性是表单中所有表单(字段)的集合:

var form = s["myForm"];var list = [];//取得表单中第一个字段var firstName = ents[0];();//取得表单中名为lastName的字段var lastName = ents["lastName"];();// 取得表单中包含的字段的数量var fieldCount = th;(fieldCount);(ring()); //firstName,lastName,4

多个表单控件使用一个name(单选按钮),那么会返回以该name命名的NodeList:

name都是color,在访问elements["color"]时,返回NodeList:

var list = [];var form = s["myForm"];var radios = ents["color"];(th) //3

共有的表单字段属性

disabled: 布尔值,表示当前字段是否被禁用; form: 指向当前字段所属表单的指针:只读; name: 当前字段的名称; readOnly: 布尔值,表示当前字段是否只读; tabIndex: 表示当前字段的切换(tab)序号; type: 当前字段的类型; value: 当前字段被提交给服务器的值。对文件字段来说,这个属性是只读的,包含着文件在计算机中的路径;

可通过submit事件在提交表单后禁用提交按钮,但不可以用onclick事件,因为onclick在不同浏览器中有“时差”;

共有表单字段方法

focus(): 激活字段,使其可以响应键盘事件; blur(): 失去焦点,触发;使用的场合不多;

可以在侦听页面的load事件上添加该focus()方法:

ventListener("load", function () { s["myForm"]ents["lastName"]s();});

需要注意,第一个表单字段是input,如果其type特性为“hidden”,或者css属性的display和visibility属性隐藏了该字段,就会导致错误。

在HTML5中,表单中新增加了autofocus属性,自动把焦点移动到相应字段。

autofocus

如:

或者检测是否设置了该属性,没有的话再调用focus()方法:

ventListener("load", function () { var form = s["myForm"]; if (form["lastName"]focus !== true) { form["lastName"]s(); };});

共有的表单字段事件

除了支持鼠标键盘更改和HTML事件之外,所有的表单字段都支持下列3个事件:

blur: 当前字段失去焦点时触发;

change:input元素和textarea元素,在它们失去焦点且value值改变时触发;select元素在其选项改变时触发(不失去焦点也会触发);

focus:当前字段获得焦点时触发;

如:

var form = s["myForm"];var firstName = ents["firstName"];ventListener("focus", handler);ventListener("blur", handler);ventListener("change", handler);function handler() { switch () { case "focus": if (groundColor !== "red") { groundColor = "yellow"; }; break; case "blur": if (th < 1) { groundColor = "red"; } else { groundColor = ""; }; break; case "change": if (th < 1) { groundColor = "red"; } else { groundColor = ""; }; break; }}

TAGS:表单