表单脚本 ( 14 章 )

在HTML中，表单是由<form>元素来表示的。

取得表单的方法

var form = document.getElementById(“id1”);

var firstForm = document.forms[0];　　// 取得页面中的第一个表单

var myForm = document.forms[“form2”];        //取得名为”Form2的表单”

提交表单的方法

<input type=”submit” value=”Bubmit Form”>　　// 通用提交按钮

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

<input type=”submit” src=”graphic.gif”>　　// 图像按钮

在 JavaScript中，以变成方式调用 submit() 方法也可以提交表单，而且，这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。

var form = document.getElementById(“myForm”);

form.submit() ;   // 提交 , 不会触发 submit 事件。

重置表单

在重置表单时, 所有表单字段都会恢复到页面刚刚加载完毕时的初始值.

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

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

重置表单经常会导致用户摸不着头脑, 事实上, 重置表单需求很少见.

当用户单击重置按钮时，表单会被重置。 <input type=”reset”value=”reset Form”>

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

带有默认值的也会被初始化为默认值

var form = document.getElementById(“myForm”);

form.reset() ;

表单字段

表单中可能包含很多字段, 当你提交表单时, 可能提交了多个内容, 例如<input><textarea><button><fieldset> 每个表单字段在 elements集合中的顺序, 与它们出现在标记中的顺序相同, 可以按照位置和name特性来访问它们. 例如:

var form = document.getElementById("form1"); // 通过ID, 找到 form

var field1 = form.elements[0] // 取得表单中第一个字段

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

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

如果多个表单控件都使用一个name(如单选按钮), 可以返回一个name 的 NodeList, 例如:

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

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

var colorFields = form.elements["color"];  // 得到的是一个数组 NodeList
alert(colorFields.length);   // 3
var firstColorField = colorFields[0];
var firstFormField = form.elements[0];
alert(fistColorField === firstFormField);  // true

个人感觉, 要获取表单内的字段, 最好还是使用名字, 如果是顺序, 容易造成混乱.
另外, HTML5 对表单也提供了很多新的功能, 如必填字段, Email 字段 等等.