JavaScript高级程序设计笔记(14)-表单

表单的基础知识

HTMLFormElement 独有的属性和方法：
1、 acceptCharset: 服务器能够处理的字符集
2、 action: 接受请求的url
3、 elements: 表单中所有空间的集合
4、 enctype: 请求的编码类型
5、 length: 表单中控件的数量
6、 method: 要发送HTTP请求类型
7、 name: 表单的名称
8、 reset(): 将所有表单域重置为默认值
9、 submit(): 提交表单
10、 target: 用于发送请求和接收相应的窗口名称

取得Form元素

//第一种方式：
var myForm = document.getElementById('myForm');

//第二种方式
var firsetForm = document.forms[0];

var myForm = document.forms['form2'];//取得页面中名称为'form2'的表单

提交表单

用户点击提交按钮或图像按钮时，就会提交表单。

<!--通用提交按钮-->
<input type='submit' value='Submit Form'>

<!--自定义提交按钮-->
<button type='submit'>提交</button>

<!--图像按钮-->
<input type='image' src='submit.png'>

阻止浏览器的表单提交默认事件，就会取消表单提交。

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

EventUtil.addHandler(form, 'submit', function(event){
	event = Event.getEvent(event);
	EventUtil.preventDefault(event);
})

form.submit();

重置表单

点击重置表单按钮后，所有表单字段都会恢复到页面刚加载完毕时的初始值，如果某个字段值初始值为空，就会恢复为空，而带有默认值得字段，也会恢复为默认值。

<!--通用重置按钮-->
<input type='reset' value='Reset Form'>
<!--自定义重置按钮-->
<button type='reset'>Reset Form</button>

1 2	var form = document.getElementById('myForm'); form.reset();

表单字段

var form = document.getElementById('myForm');
//取得表单中第一个字段
var field1 = form.elements[0];
//取得表单中名为"textbox"的字段
var filed2 = form.elements['textbox'];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;

共有的表单字段属性

1、 disabled: 布尔值，表示当前字段是否被禁用
2、 form: 指向当前字段所属表单的指针，只读
3、 name: 当前字段名称
4、 readOnly: 布尔值，表示当前字段是否只读
5、 tabIndex: 表单当前字段的切换（tab）序号
6、 type: 当前字段的类型，如checkbox、radio等
7、 value: 当前字段将被提交给服务器的值。

共有的表单字段方法

每个表单字段都有两个方法：focus()和blur()。

1
2
3

EventUtil.addHandler(window, 'load', function(event){
	document.forms[0].elements[0].focus();
})

HTML5为表单新增了一个autofocus属性，在支持该属性的浏览器中，设置该属性，不用Javascript就能自动把焦点移动到相应字段。

1	<input type='text' autofocus>

共有的表单字段事件

blur、change和focus

button默认的type值为submit