HTML | DOM 表单集合

HTML表单是在Web上收集用户输入的最基本方法。它们是与用户交互的主要手段之一，并允许将数据传输回Web服务器以进行处理和存储。

在本篇文章中，我们将深入探讨HTML DOM表单集合的所有内容。HTML DOM（Document Object Model）提供了一种以编程方式处理HTML和XML文档的方法。

表单元素

HTML表单由一些表单元素组成。以下是最常用的表单元素：

• <input>元素：用于创建可输入的字段，例如文本框、密码框、单选按钮、复选框等。
• <select>元素：用于创建下拉菜单，例如单选下拉菜单、多选下拉菜单等。
• <textarea>元素：用于创建多行文本框。
• <button>元素：用于创建基本按钮。

HTML DOM

HTML DOM通过JavaScript操作表单元素和属性。所有HTML表单元素都是DOM中的对象，并且都有可以访问和设置的属性。

访问表单元素

要访问表单元素，可以使用以下DOM方法：

• 通过document.getElementById(id)方法：此方法返回一个元素，该元素的id属性与指定的字符串匹配。
• 通过document.getElementsByName(name)方法：此方法返回一个元素集合，其中每个元素都有一个name属性与指定的字符串匹配。
• 通过document.forms[index].elements[index]方法：此方法返回一个表单中的单个表单元素。

访问表单属性

要访问表单属性，可以使用以下DOM属性：

• form.length：表示表单中的元素数量。
• form.elements：返回一个集合对象，该对象包含表单的所有元素。
• form.action：返回表单提交URL。
• form.method：返回用于提交表单数据的HTTP方法（例如GET或POST）。
• form.name：返回表单的名称。
• form.reset()：重置表单中的所有表单元素。
• form.submit()：提交表单。

示例代码

下面是一个简单的HTML表单及其DOM操作的示例代码：

<form id="myForm" action="#" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>

  <input type="submit" value="Submit">
</form>

<script>
  const form = document.getElementById("myForm");
  const nameInput = form.elements.namedItem("name");
  const emailInput = form.elements.namedItem("email");
  const passwordInput = form.elements.namedItem("password");

  nameInput.value = "John Doe";
  emailInput.value = "johndoe@example.com";
  passwordInput.value = "password";
</script>

在此示例中，我们创建了一个带有三个输入字段的表单。使用DOM，我们分别访问每个表单元素并设置其值。最后，我们将这个表单提交至一个页面（在此示例中，我们将其设为#以防止重定向到另一个页面）。