html调用父类form的表单的id,HTMLFormElement - 表示 DOM 中的 <form> 元素

HTMLFormElement 接口表示 DOM 中的

元素；它允许访问并在某些情况下修改表单的各个属性，以及访问其组件元素。

属性

该接口还从其父类 HTMLElement 继承了属性。

一个 long，反映了表单中控件的数量。

HTMLFormElement.name

一个 DOMString，反映了表单的

一个 DOMString，反映了表单的

一个 DOMString，反映了表单的

一个 DOMString 反映了表单的

一个 DOMString，反映了表单的

一个 DOMString，反映了表单的

一个 DOMString，反映了表单的

一个 Boolean，反映了表单的

带有 name 的输入控件将作为属性添加到其所有者表单实例(即可通过 form.name 访问相应的控件)。并且如果它们有着相同的名称时，则会覆盖表单的属性(例如，name 为 action 的输入控件，将使其表单的 action 属性返回为该输入控件对象，而不是表单的

方法

该接口还从其父类 HTMLElement 继承了方法。

将表单提交到服务器。

将表单重置为其初始状态。

如果元素的子控件受约束验证的约束并且满足这些约束，则返回 true; 如果某些控件不满足其约束，则返回 false。在任何不满足其约束的控件上触发名为 false 。

如果元素的子控件满足其验证约束，则返回 true。返回 false 时，会为每个无效的子项触发可取消的

当具有自动填充字段名称值的字段值不是 off 或 on 时，触发本机浏览器界面以帮助用户自动完成。一旦用户完成界面的操作，表单将收到一个事件，当填写字段时，事件是 该方法已从 Chrome 和 Firefox 中删除 - 有关原因的背景信息，请参阅 Mozilla bug 1270740。

使用注意

获取表单元素对象

要获取 HTMLFormElement 对象，可以使用 CSS 选择器和 querySelector()，或者您可以使用 document.forms 属性获取文档中所有表单的列表。

Document.forms 返回一个列出页面上每个表单的 HTMLFormElement 对象数组。然后，您可以使用以下任何语法来获取单个表单：

document.forms[*index*]

返回表单数组中指定 index 处的表单。

document.forms[*id*]

返回 ID 为 id 的表单。

document.forms[*name*]

返回 name 属性的值为 name 的表单。

访问表单的元素

您可以通过检查表单的 elements 属性来访问表单的包含数据的元素的列表。这将返回一个 HTMLFormControlsCollection，列出所有表单的用户数据条目元素，这些元素都是

的后代，以及那些使用 form 属性成为表单成员的元素。

被视为表单控件的元素

HTMLFormElement.elements 和 HTMLFormElement.length 包含的元素是：

elements 返回的列表中不包含其他元素，这使得它成为处理表单元素时的绝佳方法。

实例

创建一个新的表单元素，修改其属性，然后提交它：

var f = document.createElement("form");// 创建一个表单

document.body.appendChild(f); // 将其添加到文档正文中

f.action = "/cgi-bin/some.cgi"; // 增加操作和方法属性

f.method = "POST";

f.submit(); // 调用表单的提交方法

从表单元素中提取信息并设置其一些属性：

点击 “信息” 查看表单详细信息，或点击 “设置” 更改这些详细信息。

信息

设置

重置

// 通过名称获取对表单的引用

var f = document.forms["formA"];

// 我们感兴趣的表单属性

var properties = [ 'elements', 'length', 'name', 'charset', 'action', 'acceptCharset', 'action', 'enctype', 'method', 'target' ];

// 遍历属性，将它们转换为我们可以向用户显示的字符串

var info = properties.map(function(property){

console.log(f)

return property + ": " + f[property];

}).join("\n");

// 设置表单的 值以显示表单的属性

document.forms["formA"].elements['form-info'].value = info;

}

function setFormInfo(f){ // 参数应该是表单元素引用。

f.action = "a-different-url.cgi";

f.target = "_blank";

getFormInfo();

}

将表单提交到新窗口：

提交表单到新窗口实例

姓：

名：

喜欢的宠物

猫

狗

拥有车辆

我有一辆自行车

我有一辆汽车

提交

使用 XMLHttpRequest 提交表单和上传文件

如果您想知道如何使用 XMLHttpRequest API 序列化和提交表单，请阅读本段。

规范

桌面浏览器兼容性

特性

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

基础支持

支持

支持

1

支持

支持

支持

reportValidity

40

17

49

不支持

支持

支持

移动浏览器兼容性

特性

Android

Chrome for Android

Edge mobile

Firefox for Android

IE mobile

Opera Android

iOS Safari

基础支持

支持

支持

支持

支持

未知

支持

支持

reportValidity

40

40

17

未知

未知

未知

未知

相关链接

实现该接口的 HTML 元素：

。