ElementInternals: form property

{{APIRef("Web Components")}}

The form read-only property of the {{domxref("ElementInternals")}} interface returns the {{domxref("HTMLFormElement")}} associated with this element.

Value

An {{domxref("HTMLFormElement")}}.

Examples

The following example shows a custom checkbox component inside a form with an ID of myForm. Printing form.length to the console, gives us the value of {{domxref("HTMLFormElement.length")}}.

<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);

Specifications

{{Specifications}}

Browser compatibility

{{Compat}}