ElementInternals: form 属性

Baseline 已广泛支持

此功能已成熟，并可在许多设备和浏览器版本上运行。自 2023 年 3 月以来，它已在各种浏览器中可用。

ElementInternals 接口的只读属性 form 返回与该元素关联的 HTMLFormElement。

值

一个 HTMLFormElement。

示例

下面的示例显示了一个名为 myForm 的表单内的自定义复选框组件。将 form.length 打印到控制台，即可获得 HTMLFormElement.length 的值。

html

<form id="myForm">
  <custom-checkbox id="custom-checkbox"></custom-checkbox>
  <custom-label for="custom-checkbox">Join newsletter</custom-label>
</form>

class CustomCheckbox extends HTMLElement {
  static formAssociated = true;
  #internals;

  constructor() {
    super();
    this.#internals = this.attachInternals();
  }

  connectedCallback() {
    console.log(this.#internals.form.length);
  }
}

window.customElements.define("custom-checkbox", CustomCheckbox);

规范

规范
HTML # dom-elementinternals-form

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 2023年12月8日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的某个问题