【JavaScript学习】表单脚本：介绍

1、在HTML中,表单是由<form>元素来表示的，而在JavaScript中，表单对应的则是HTMLFormElement类型。
2、HTMLFormElement继承了HTMLElement。因此它拥有HTML元素具有的默认属性，而且还独有自己的属性和方法：

HTMLFormElement属性和方法

属性/方法	说明
acceptCharset	服务器能够处理的字符集;
action	接受请求的URL;
elements	表单中所有控件的集合（HTMLCollection）;
enctype	请求的编码类型;
length	表单中控件的数量;
method	要发送的HTTP请求类型,通常是’get’或’post’;
name	表单的名称;
target	用于发送请求和接受响应的窗口名称;
reset()	将所有表单重置;
submit()	提交表单;

获取<form>元素的方法：

// 使用ID获取<form>元素;
document.getElementById('myForm'); 

// 使用forms的数字下标获取元素;
document.forms[0];  //取得页面中的第一个表单

 // 使用forms的名称下标获取元素;
document.forms['myForm'];

// 使用获取form元素集合里的第一个元素;
document.getElementsByTagName('form')[0]; 

提交表单

1、单击提交按钮或图像按钮

用户单击提交按钮或图像按钮时，就会提交表单。
使用或都可以定义提交按钮， 只要将其 type 特性的值设置为”submit”即可，而图像按钮则是通过将的 type 特性值设置为 “image”来定义的。

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

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

<!-- 图像按钮 --> 
<input type="image" src="graphic.gif">

1、 只要表单中存在上面列出的任何一种按钮，那么在相应表单控件拥有焦点的情况下，按回车键就可 以提交该表单。（textarea 是一个例外，在文本区中回车会换行。）
2、如果表单里没有提交按钮，按回车 键不会提交表单。

以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发 submit 事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。

var form = document.getElementById("myForm"); 
EventUtil.addHandler(form, "submit", function(event){ 
    //取得事件对象
    event = EventUtil.getEvent(event); 
    //阻止默认事件
    EventUtil.preventDefault(event); 
}); 

一般来说，在表单数据无效而不能发送给服务器时，可以使用这一技术。

2、以编程方式调用 submit()方法

这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。

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

在以调用 submit()方法的形式提交表单时，不会触发 submit 事件，因此要记得在调用此方法之 前先验证表单数据。

提交表单时可能出现的大问题，就是重复提交表单。
在第一次提交表单后，如果长时间没有反应，用户可能会变得不耐烦。这时候，他们也许会反复单击提交按钮。结果往往很麻烦（因为服务器要处理重复的请求），或者会造成错误（如果用户是下订单，那么可能会多订好几份）。
解决这一问题的办法有两个：
1、第一次提交表单后就禁用提交按钮；
2、利用 onsubmit 事件处理程序取消后续的 表单提交操作。

2. 重置表单

1、单击重置按钮

使用 type 特性值为”reset”的<input>或<button>都可以创建重置按钮。

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form"> 

<!-- 自定义重置按钮 --> 
<button type="reset">Reset Form</button>

在重置表单时，所有表单字段都会恢复到页面刚加载完毕时的初始值。如果某个字段的初始值为空，就会恢复为空；而带有默认值的字段，也会恢复为默认值。 用户单击重置按钮重置表单时，会触发 reset 事件。利用这个可以在必要时取消重置操作。

var form = document.getElementById("myForm"); 
EventUtil.addHandler(form, "reset", function(event){ 
    //取得事件对象
    event = EventUtil.getEvent(event); 
    //阻止表单重置
    EventUtil.preventDefault(event); 
}); 

2、通过 JavaScript来重置表单

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

与调用 submit()方法不同，调用 reset()方法会像单击重置按钮一样触发 reset 事件。

表单字段

1、可以像访问页面中其它元素一样，使用原生DOM方法访问表单元素。
2、每个表单都有elements属性，该属性是表单中所有元素的集合。
3、elements集合是一个有序列表，其中包含着表单中所有字段，例如<input>、<textarea>、<button>和<fieldset>。
4、每个表单字段在 elements集合中的顺序，与它们出现在标记中的顺序相同，可以按照位置和name特性来访问它们。

var form = document.getElementById("form1")
//取得表单中的第一个字段
var field1 = form.elements[0];

//取得名为textbox1的字段
var field2 = form.elements["textbox1"];

//取得表单中包含的字段的数量
var fieldCount = form.elements.length;

如果有多个表单控件都在使用一个name（如单选按钮），那么就会返回以该name命名的一个NodeList。

<form method="post" id="myForm">
    <ul>
    　　<li><input type="radia" name="color" value="red"></li>
    　　<li><input type="radia" name="color" value="green"></li>
    　　<li><input type="radia" name="color" value="blue"></li>
　　</ul>
</form>

//在这个HTML表单中，有3个单选按钮，它们的name属性都是“color”，意味着这3个字段是一起的。
//在访问 elements["color"]时，就会返回一个NodeList，其中包含3个元素；如果访问elements[0]，则只会返回第一个元素。

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

var colorFields = form.elements["color"];
alert(colorFields.length); //3

var firstColorField = colorFields[0];
var firstFormField = form.elements[0];
alert(firstColorField === firstFormField); //true

也可以通过访问表单的属性来访问元素，例如form[0]可以取得第一个表单字段，而form[“color”]则可以取得第一个命名字段。这些属性与通过elements集合访问到的元素是相同的。
注意：应该尽可能使用elements，通过表单属性访问元素只是为了与旧浏览器向后兼容保留的一种过渡方式。

共有的表单字段属性

除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。 由于<input>类型可以表示多种表单字段，因此有些属性只适用于某些字段，但还有一些属性是所有字段所共有的。

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

除了form属性之外，可以通过JavaScript动态修改其他任何属性。

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.disable = true;
});

注意，不能通过onclick事件处理程序来实现这个功能。因为不同的浏览器之间存在“时差”：有的浏览器会在触发表单的submit事件之前触发click事件，而有的浏览器则相反。对于先触发click事件的浏览器，意味着会在提交发生之前禁用按钮，结果永远也不会提交表单。
只有在包含提交按钮的情况下，才有可能触发表单的submit事件。

共有的表单字段方法

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

fucus()方法

1、用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。
2、使用focus()方法，可以将用户的注意力吸引到页面中的某个部位。

注意：如果第一个表单字段是一个<input>元素，且其type特性的值为“hidden”，那使用focus()方法会导致错误。
如果使用CSS的display和visibility属性隐藏了该字段，同样也会导致错误。

HTML 5 为表单字段新增了一个autofocus属性。在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript就自动把焦点移动到相应字段。

<input type="text" autofocus />

//为了保证前面的代码在设置autofocus的浏览器中正常运行，必须检测是否设置了该属性，如果设置了，就不再调用focus()了。
EventUtil.addHandler(window,"load",function(event){
    var element = document.forms[0].elements[0];
    if(element.autofocus !== true){
        element.focus();
    }
});

blur()方法

1、作用：从元素中移走焦点。
2、在调用blur()方法时，并不会把焦点转移到某个特定的元素上；仅仅是将焦点从调用这个方法的元素上面移走。

共有的表单字段事件

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

事件	描述
blur	当前字段失去焦点时触发。
change	对于<input>和<textarea>元素，在它们失去焦点且value值改变时触发对于<select>元素，在其选项改变时触发。
focus	当前字段获得焦点时触发。

1、当用户改变了当前字段的焦点，或者用JavaScript调用了blur()或focus()方法时，都可以触发blur和focus事件。这两个事件在所有表单字段中都是相同的。
2、change事件在不同表单控件中触发的次数会有所不同。 对于<input>和<textarea>元素，当它们从获得焦点到失去焦点且value值改变时，才会触发change事件。 对于元素，只要用户选择了不同的选项，就会触发change事件；换句话说，不失去焦点也会触发change事件。