HTML DOM Form 对象

HTML DOM Form 对象是 HTML 中的一个内置对象，可用于访问 HTML 表单元素并与之交互。表单元素可以是文本输入框、复选框、单选按钮、下拉菜单等等。

一、使用 HTML DOM Form 对象

要想使用 HTML DOM Form 对象，需要先获得表单元素的引用。使用 getElementById() 方法可以获取元素的引用。代码如下：

var myForm = document.getElementById("myForm");

这将创建一个名为 myForm 的变量，该变量引用具有 ID 为 myForm 的表单元素。现在，可以使用此变量与表单元素进行交互。

二、HTML DOM Form 对象的属性

在 HTML DOM Form 对象中使用的最常见的属性是 action 和 method。

action 属性指定提交表单后要处理表单数据的 URL，也可以使用相对 URL 或 JavaScript。

method 属性指定表单向服务器提交数据的方法，一般为 GET 或 POST。

另外，还有以下常用的 Form 对象属性：

  1. name：返回表单的名称。

  2. target：返回在哪里打开表单提交后返回的数据。

  3. enctype: 设置表单提交的编码类型。常见有 application/x-www-form-urlencoded(默认)、multipart/form-data、text/plain。

  4. elements：返回表单中所有的表单控件元素。

  5. length：返回表单中表单控件的数量。

三、HTML DOM Form 对象的方法

HTML DOM Form 对象中最重要的方法之一是 submit() 方法。它用于在不点击提交按钮的情况下提交表单。可以使用它从 JavaScript 中提交表单。

document.getElementById("myForm").submit();

在表单中，我们使用 JavaScript 或按钮将表单数据提交到服务器。在这种情况下，我们可以使用 reset() 方法重置表单，以便提交其他数据。

document.getElementById("myForm").reset();

除了上述两种方法外，还有其他常用的 Form 对象属性，例如：

  1. submit()：在不触发提交按钮的情况下向服务器提交表单。

  2. reset()：将表单中所有的控制元素重置为它们的默认值。

  3. checkValidity()：在提交表单之前，检查表单是否有效。

  4. setCustomValidity()：将一个或多个自定义错误消息关联到表单元素。

四、HTML DOM Form 对象的事件

Form 对象不会触发自己的事件，在表单上的事件通常与提交按钮或表单控件有关。例如，我们可以通过以下方式使用 submit 事件：

document.getElementById("myForm").addEventListener("submit", function(){
  alert("Submitted");
});

当表单元素被修改时，也可以使用 onchange 和 oninput 事件向表单添加事件处理程序。

document.getElementById("myForm").addEventListener("input", function(){
  alert("Input Changed");
});

总结

HTML DOM Form 对象是一种非常灵活和有用的对象，可用于访问和操作 HTML 表单元素。由于表单元素在 HTML 中的使用非常频繁，因此了解 HTML DOM Form 对象的基本知识和用法是很重要的，它们可以使表单在网站上正确地工作，并帮助增强用户的交互体验。

HTML DOM FileUpload 对象 HTML DOM Frame 和 IFrame 对象