文档对象模型(DOM)中的 form 对象提供了访问和操作 HTML 表单的方法和属性。通过 form 对象,我们可以获取表单元素、访问和修改表单数据以及执行表单相关的操作。本文将介绍 form 对象的一些重要功能,并提供相关的代码示例。
表单的 HTML 结构通常由一组表单元素组成,如文本输入框、选择框、复选框等。form 对象与这些表单元素进行交互,使我们能够获取用户的输入并对其进行处理。
以下是一些常用的 form 对象功能以及相应的代码示例:
获取表单元素
通过 form 对象的 elements 属性,我们可以获取表单中的所有元素。我们可以根据元素的名称(name)或索引来访问表单元素。
javascript
// 通过名称获取表单元素let inputElement = document.forms["myForm"].elements["myInput"];
// 通过索引获取表单元素let checkboxElement = document.forms[0].elements[1];
在上述代码中,我们通过 forms 属性访问文档中的表单元素。然后,通过元素的名称或索引访问特定的表单元素。
访问和修改表单数据
form 对象提供了多种方式来访问和修改表单数据。我们可以通过元素的名称或索引,使用特定的属性来获取或设置表单元素的值。
javascript
// 获取表单元素的值let inputValue = document.forms["myForm"].elements["myInput"].value;
// 设置表单元素的值document.forms["myForm"].elements["myInput"].value = "New value";
在以上代码中,我们使用 value 属性来获取或设置输入框元素的值。通过这种方式,我们可以轻松地访问和修改表单的数据。
提交表单
form 对象的 submit() 方法用于提交表单。通过调用该方法,我们可以将表单数据发送到服务器进行处理。
javascript
// 提交表单document.forms["myForm"].submit();
在上述代码中,我们使用 submit() 方法提交了名为 "myForm" 的表单。
重置表单
form 对象的 reset() 方法用于重置表单的所有字段为默认值。
javascript
// 重置表单document.forms["myForm"].reset();
在以上代码中,我们使用 reset() 方法重置了名为 "myForm" 的表单。
通过使用 form 对象的功能,我们可以轻松地访问和操作表单元素和数据。我们可以获取表单元素的值,修改表单数据,提交表单以及重置表单字段。这些功能使我们能够构建复杂的表单交互和处理逻辑,为用户提供良好的用户体验。