HTML DOM forms 集合

在前端开发中，表单是不可或缺的一部分。HTML DOM forms 集合提供了一种方便的方式来访问和操作表单元素。在本文中，我将详细介绍 HTML DOM forms 集合的相关知识，并提供示例代码帮助您更好地理解。

获取表单元素

要访问表单元素，我们首先需要获取表单对象。可以通过 document.forms 属性来获取页面中所有的表单元素。该属性返回一个 HTMLCollection 对象，其中包含了所有的表单元素。

示例代码如下：

// www.javascriptcn.com code example
<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.forms[0];
  console.log(form);
</script>

在上面的示例中，我们通过 document.forms[0] 获取了页面中的第一个表单元素，并将其赋值给 form 变量。然后我们通过 console.log 打印了这个表单元素。

访问表单元素

一旦获取了表单对象，我们就可以通过它来访问表单元素。HTML DOM forms 集合提供了多种方法来访问表单元素，比如通过表单元素的索引、名称或 ID 来获取。

示例代码如下：

// www.javascriptcn.com code example
<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="submit">Submit</button>
</form>

<script>
  const form = document.forms[0];
  
  const usernameInput = form.elements[0];
  const passwordInput = form.elements['password'];
  
  console.log(usernameInput);
  console.log(passwordInput);
</script>

在上面的示例中，我们通过 form.elements[0] 和 form.elements['password'] 分别获取了表单中的第一个输入框和名称为 "password" 的输入框。

提交表单

一旦获取了表单元素，我们就可以通过调用 submit() 方法来提交表单。该方法会触发表单的提交行为，提交表单的数据给服务器进行处理。

示例代码如下：

// www.javascriptcn.com code example
<form id="myForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <button type="button" onclick="submitForm()">Submit</button>
</form>

<script>
  function submitForm() {
    const form = document.forms[0];
    form.submit();
  }
</script>

在上面的示例中，我们通过一个按钮的点击事件来触发 submitForm() 函数，然后在函数中调用表单的 submit() 方法来提交表单。

总结

通过 HTML DOM forms 集合，我们可以方便地访问和操作表单元素，实现更灵活的表单交互效果。希望本文能帮助您更好地理解和应用 HTML DOM forms 集合。