表单基础知识

在JavaScript中，表单对应的是HTMLFormElement 类型，它继承了HTMLElement 。

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特性。

document.forms 可以获取页面中的所有表单，返回一个集合，在这个集合中可以通过数值索引或者name值来获取特定的表单。

1 2	var firstForm = document.forms[0]; //取得页面中的第一个表单 var myForm = document.forms["form2"]; //取得页面中为"form2"的表单

1、提交表单

用户点击按钮或者图像时

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

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

<input type="image" src="graphic.gif">  //图像也可以作为提交按钮

在JavaScript中，可以用submit() 方法也可以提交表单。注意：在调用submit() 方法提交表单的时候，不会触发submit 事件。

1
2
3

var form = document.getElementById("myForm");
// 提交表单
form.submit();

阻止提交按钮：

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){

	event = EventUtil.getEvent(event);
	EventUtil.preventDefault(event);
});

2、重置表单

重置按钮：


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

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

在JavaScript中，可以用 reset() 方法也可以重置表单。注意：在调用 reset() 方法提交表单的时候，会一样触发 reset 事件。

1
2
3

var form = document.getElementById("myForm");
// 重置表单
form.reset();

阻止重置按钮：

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){

	event = EventUtil.getEvent(event);
	EventUtil.preventDefault(event);
});

3、表单字段

每个表单都有一个element 属，它是表单中所有表单元素的集合。是一个有序列表。

var form = document.getElementById("form1");
//取得表单中的的一个字段
var field1 = form.elements[0];
//取得表单中为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含字段的数量
var fieldCount = form.elements.length;

1、共有的表单字段属性

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

var form = document.getElementById("myForm");
var field = form.elements[0];
//修改value 属性
field.value = "Another value";
//检查 form 属性的值
alert(field.form === form); //true
//把焦点设置当前字段
field.focus();
//禁用当前字段
field.disabled = true;
//修改 type 属性（不推荐，但对<input>是可行的）
field.type = "checkbox";

防止多次点击提交按钮

EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});

除了\

之外，所有表单都有 type 属性。但是\和\