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, 通过表单属性访问元素只是为了与旧浏览器向后兼容保留的一种过渡方式.
来源: http://www.css88.com/qa/javascript/11436.html