参考资料

1. HTML DOM 返回和设置一个iframe中的scrolling属性的值
2. HTML DOM 返回一个表单target属性的值
3. HTML DOM 返回和设置链接的charset属性实例
4. HTML DOM弹出下拉列表中被选中的选项的索引
5. HTML DOM 改变iframe的高度和宽度
6. HTML DOM 返回页面上所有相对URL的基URL 实例
7. HTML DOM 元素
8. HTML DOM 方法

HTML DOM 返回一个表单中元素的数量 实例

HTML DOM 返回表单元素数量

简介

通过HTML DOM可以获取表单中所有元素的集合，并返回其数量。

相关标签和属性

• <form> - 定义HTML表单

• elements - 表单元素的集合属性

基本用法

var form = document.getElementById("myForm");
var elementCount = form.elements.length;

实例代码

<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Submit">
</form>

<script>
  var form = document.getElementById("myForm");
  var count = form.elements.length;
  console.log("表单包含 " + count + " 个元素"); // 输出: 表单包含 3 个元素
</script>

功能说明

1. 获取表单中所有元素的数量

2. 包括input、textarea、select、button等表单元素

3. 不包括非表单元素（如div、p等）

CSS扩展

可以为表单元素添加样式来增强视觉效果：

form {
  border: 1px solid #ccc;
  padding: 20px;
  max-width: 400px;
  margin: 0 auto;
}

form input, form select, form textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  box-sizing: border-box;
}

form input[type="submit"] {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

注意事项

• elements集合包含所有表单控件，无论是否可见

• 隐藏元素也会被计入总数

• 表单内的非表单控件不会被计入