yunjiepiaobai
yunjiepiaobai

JS高级程序设计14-表单脚本

  • 表单的基础知识（P412）

    在JS中，表单对应的时HTMLFormElement类型，同时HTMLFormElement也继承了HTMLElement，除了与其他HTML元素具有相同默认的属性，HTMLFormElement额外的属性和方法：

    acceptCharset--服务器能够处理的字符集；
action--接受请求的URL；
elements--表单中所有控件的集合；
enctype--请求的编码类型；
length--表单中控件的数量；
method--要发送的HTTP请求类型，通常时“get”或"post";
name:表单的名称；
reset()--将所有表单域重置为默认值；
submit()--提交表单；
target--用于发送请求和接受相应的窗口名称

//取得
    元素引用的方式：
var form=document.getElementById("form1");
var firstForm=document.form[0]; //取得页面中的第一个表单
var myForm=document.forms["form2"]; //取得页面中名称为"form2"的表单

    提交表单（P413）

    type="submit" value="Submit Form"> //通用提交按钮
 //自定义提交按钮
type="image" src="graphic.gif"> //图像按钮

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

//解决重复提交表单：
在第一次提交表单后就禁用提交按钮；
利用onsubmit事件处理程序取消后续的表单提交操作

    重置表单（P414）

    type="reset" value="reset Form"> //通用重置按钮
 //自定义重置按钮

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

    表单字段（P414）

    每个表单都有elements属性，该属性是表单中所有元素的集合;

//表单字段共有的属性和方法：
disabled--布尔值，表示当前字段是否被禁用；
form--指向当前字段所属表单的指针；
name--当前字段的名称；
readOnly--布尔值，表示当前字段是否只读；
tabindex--表示当前字段的切换序号；
type--当前字段的类型；
value--当前字段将被提交给服务器的值

//除了form属性之外，JS可以动态修改其他任何属性
var form=document.getElementById("myForm");
var field=form.elements[0];
field.value="Another value";//修改value属性
alert(field.form===form); //检查form属性的值
field.focus();//把焦点设置到当前字段
field.disabled=true;//禁用当前字段
field.type="checkboos";//修改type属性（不推荐）

//共有的表单字段方法
focus()--将焦点转移到某处
设置autofocus属性也可以不使用JS就能自动把焦点移动到相应字段
blur()--从元素中移走焦点

//共有的表单字段事件
blur--当前字段失去焦点时触发
change--对于和