编程笔记 html5&css&js 091 JavaScript 表单对象

在JavaScript中，表单对象是一个HTMLCollection，它包含了文档中所有的表单元素。你可以通过其name属性或者通过它们在文档中的位置来访问这些元素。

以下是一个简单的例子，展示了如何使用JavaScript访问和操作表单对象：

HTML:

<form id="myForm">
  <input type="text" name="username" />
  <input type="email" name="email" />
  <input type="submit" />
</form>

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  var form = document.getElementById('myForm');
 
  // 通过name属性访问特定的表单元素
  var usernameField = form['username'];
  var emailField = form.elements['email'];
 
  // 添加事件监听器来处理表单提交
  form.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
 
    // 获取表单数据
    var username = usernameField.value;
    var email = emailField.value;
 
    // 输出表单数据或者进行其他操作
    console.log('Username:', username);
    console.log('Email:', email);
  });
});

在这个例子中，我们首先通过ID获取表单元素，然后通过form['username']或form.elements['email']来访问特定的表单字段。我们还为表单添加了一个事件监听器，以便在表单提交时捕获数据，并且阻止了默认的提交行为。这样，我们就可以处理这些数据，例如在控制台中输出它们。