JavaScript访问表单元素

可以像访问页面中其它元素一样，使用原生DOM方法访问表单元素。此外，每个表单都有elements属性，该属性是表单中所有元素的集合。这个 elements集合是一个有序列表，其中包含着表单中所有字段，例如<input>、<textarea>、<button>和<fieldset>。每个表单字段在 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。例如，以下面的HTML代码片段为例：

　　<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 = colorFields[0];
　　alert(firstColorField === firstFormField); //true

　　以上代码显示，通过form.elements[0]访问到的第一个表单字段，与包含在form.elements["color"]中的第一个元素相同。

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