表单脚本
表单的基础知识
在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