ElementInternals：form 属性

基线 2023

新可用

自 2023 年 3 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能无法在旧版设备或浏览器中使用。

form 是 ElementInternals 接口的只读属性，它返回与此元素关联的 HTMLFormElement。

值

一个 HTMLFormElement。

示例

以下示例显示了一个表单内的自定义复选框组件，该表单的 ID 为 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>
js
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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。