ElementInternals: form property

The form read-only property of the ElementInternals interface returns the HTMLFormElement associated with this element.

Value

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

Specifications

HTML