Start · Sprachen · JavaScript · Referenz · HTMLFieldSetElement.type

HTMLFieldSetElement.type

Eigenschaft

Nur-Lese-Eigenschaft, die bei einem <code>&lt;fieldset&gt;</code>-Element immer den String <code>"fieldset"</code> zurückgibt.

seit JavaScript Baseline: alle Browser Kategorie: webapi

Signatur

HTMLFieldSetElement.type

Beschreibung

Die Eigenschaft type des Interfaces HTMLFieldSetElement ist schreibgeschützt und liefert immer den festen String "fieldset". Sie hängt nicht von einem HTML-Attribut ab, denn <fieldset> hat kein type-Attribut.

Wozu das gut ist: Viele formularbezogene Elemente haben eine type-Eigenschaft, etwa HTMLInputElement ("text", "checkbox" …), HTMLButtonElement ("submit", "button" …), HTMLSelectElement ("select-one", "select-multiple"), HTMLTextAreaElement ("textarea") und HTMLOutputElement ("output"). Wenn du über form.elements iterierst, kannst du deshalb alle Steuerelemente einheitlich über type unterscheiden – ein <fieldset> erkennst du am Wert "fieldset".

Wichtig: <fieldset>-Elemente tauchen in HTMLFormElement.elements auf, obwohl sie keinen eigenen Wert übermitteln. Beim Serialisieren oder Validieren von Formularen per Hand solltest du sie daher über type === "fieldset" herausfiltern.

Rückgabewert

Typ
string
Beschreibung
Immer der String "fieldset".

Beispiele

Typ eines fieldset-Elements auslesen

// <fieldset id="adresse"><legend>Adresse</legend>...</fieldset>
const fieldset = document.getElementById('adresse');
console.log(fieldset.type);
console.log(fieldset instanceof HTMLFieldSetElement);
fieldset true

fieldsets beim Durchlaufen von form.elements überspringen

// <form id="bestellung">
//   <fieldset><legend>Kunde</legend>
//     <input name="name" value="Anna">
//     <input name="email" type="email" value="anna@example.org">
//   </fieldset>
//   <button type="submit">Senden</button>
// </form>
const form = document.getElementById('bestellung');

const felder = [...form.elements]
  .filter((el) => el.type !== 'fieldset' && el.type !== 'submit')
  .map((el) => `${el.name} (${el.type}) = ${el.value}`);

console.log(felder);
["name (text) = Anna", "email (email) = anna@example.org"]

Schreibversuch hat keine Wirkung

'use strict';
const fs = document.createElement('fieldset');
try {
  fs.type = 'gruppe';
} catch (err) {
  console.log(err instanceof TypeError); // Getter-only-Eigenschaft im Strict Mode
}
console.log(fs.type);
true fieldset

// Wichtig · Fallstricke

  • Nur lesbar: Wenn du etwas zuweist, wird das im Sloppy Mode stillschweigend ignoriert. Im Strict Mode (also auch in ES-Modulen) wirft die Zuweisung einen TypeError.
  • Kein HTML-Attribut: fieldset.setAttribute('type', …) setzt zwar ein Attribut, ändert aber nichts am Wert der Eigenschaft.
  • Nicht mit tagName verwechseln: fieldset.tagName liefert "FIELDSET" in Großbuchstaben, type dagegen "fieldset" in Kleinbuchstaben.
  • Typprüfung: Wenn du nur prüfen willst, ob ein Element ein <fieldset> ist, ist el instanceof HTMLFieldSetElement meist klarer. Der Vergleich über type ist vor allem beim einheitlichen Durchlaufen von form.elements praktisch.
  • Kompatibilität: Wird von allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari).