HTMLSelectElement.form — Eigenschaft · JavaScript-Referenz

Signatur

HTMLSelectElement.form

Beschreibung

Die Eigenschaft form eines HTMLSelectElement verweist auf das Formular, das das Auswahlfeld besitzt. Meist ist das das umgebende <form>-Element. Wenn das <select> aber ein form-Attribut mit der ID eines Formulars hat, gilt das referenzierte Formular, auch wenn das Feld außerhalb davon im DOM steht.

Praktisch ist die Eigenschaft in wiederverwendbaren Event-Handlern: Aus dem change-Event eines Auswahlfelds kommt man über event.target.form direkt an das zugehörige Formular. Damit kann man es z. B. automatisch absenden, mit FormData auswerten oder andere Felder über form.elements ansprechen, ohne das Formular per Selektor zu suchen.

Die Eigenschaft ist nur lesbar. Um die Zuordnung zu ändern, setzt man das HTML-Attribut form über setAttribute('form', 'formularId'). Gibt es kein besitzendes Formular oder zeigt das Attribut auf eine ID, die es nicht gibt oder die zu keinem <form> gehört, liefert die Eigenschaft null.

Rückgabewert

Typ

HTMLFormElement | null

Beschreibung

Das Formular, zu dem das <select> gehört, oder null, wenn es keinem Formular zugeordnet ist.

Beispiele

Zugehöriges Formular ermitteln

// HTML: <form id="bestellung"><select id="groesse"><option>S</option><option>M</option></select></form>
const select = document.getElementById('groesse');
console.log(select.form.id);
console.log(select.form instanceof HTMLFormElement);

bestellung true

Formular bei Änderung automatisch absenden

// Jedes Auswahlfeld mit data-autosubmit sendet sein Formular bei einer Änderung ab
document.querySelectorAll('select[data-autosubmit]').forEach((select) => {
  select.addEventListener('change', (event) => {
    const { form } = event.target;
    if (form) {
      form.requestSubmit(); // löst Validierung und das submit-Event aus
    }
  });
});

Zuordnung über das form-Attribut außerhalb des Formulars

// HTML:
// <form id="filter"></form>
// <select id="sortierung" form="filter" name="sort"><option value="preis">Preis</option></select>
// <select id="lose"><option>x</option></select>
const sortierung = document.getElementById('sortierung');
const lose = document.getElementById('lose');

console.log(sortierung.form?.id);
console.log(lose.form);

// Das Feld nachträglich einem Formular zuordnen
lose.setAttribute('form', 'filter');
console.log(lose.form?.id);

// Das Feld wird in FormData aufgenommen
const daten = new FormData(sortierung.form);
console.log(daten.get('sort'));

filter null filter preis

Nachbarfelder über form.elements ansprechen

// Land wählen -> PLZ-Feld im selben Formular anpassen
const land = document.querySelector('select[name="land"]');
land.addEventListener('change', () => {
  const plz = land.form?.elements.namedItem('plz');
  if (plz) {
    plz.maxLength = land.value === 'DE' ? 5 : 4;
  }
});

// Wichtig · Fallstricke

Nur lesbar: Wer select.form = … zuweist, erreicht nichts (im Strict Mode gibt es einen TypeError). Die Zuordnung ändert man über das Attribut: select.setAttribute('form', 'id').
Das form-Attribut hat Vorrang vor dem umgebenden <form>. Zeigt es auf eine ID, die es nicht gibt, liefert die Eigenschaft null, auch wenn das Feld in einem Formular steht.
Vorsicht bei Namenskonflikten: Enthält ein Formular ein Feld mit name=\"submit\" oder name=\"action\", überdeckt es die gleichnamigen Eigenschaften des Formulars. select.form.submit() schlägt dann fehl.
Nimm lieber form.requestSubmit() als form.submit(). Nur so laufen die Validierung und das submit-Event.
Gegen null absichern (z. B. mit ?.), wenn Auswahlfelder auch ohne Formular vorkommen können.
Kompatibilität: Die Eigenschaft wird von allen Browsern unterstützt. Das form-Attribut für Felder außerhalb des Formulars gibt es nicht im Internet Explorer.

Siehe auch

HTMLLegendElement.form HTMLSelectElement.name HTMLSelectElement.size HTMLSelectElement.type HTMLSelectElement.value