理解表单字段

：点上面关注免费学习前端知识！

---

可以像访问页面中的其他元素一样，使用原生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=“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>

在这个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.elements[0] 访问到的第一个表单字段，与包含在form.elements[“color”] 中的第一个元素相同。

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

完

看前端技术文章，就在Web前端精髓