HTMLFieldSetElement.name — Eigenschaft · JavaScript-Referenz

Signatur

HTMLFieldSetElement.name

Beschreibung

Die Eigenschaft name der Schnittstelle HTMLFieldSetElement gibt den Wert des HTML-Attributs name eines <fieldset>-Elements als Zeichenkette zurück. Sie ist beschreibbar. Wenn Sie ihr einen Wert zuweisen, ändert sich das Attribut im DOM direkt mit. Hat das Element kein name-Attribut, ist der Wert eine leere Zeichenkette "".

Ein <fieldset> gehört zu den aufgelisteten Formularelementen. Deshalb können Sie es über seinen Namen in der Sammlung form.elements ansprechen, etwa mit form.elements.namedItem("adresse") oder form.elements.adresse. So lassen sich ganze Gruppen von Feldern gezielt finden, zum Beispiel um sie mit disabled gemeinsam zu sperren oder um sie ein- und auszublenden.

Wichtig: Ein <fieldset> ist nicht übermittelbar. Sein Name erscheint also weder in den gesendeten Formulardaten noch in einem FormData-Objekt. Der Name dient nur dazu, das Element per Skript wiederzufinden und das Formular übersichtlich zu gliedern.

Parameter

Name	Typ	Default	Beschreibung
$wert	string	""	Nur beim Schreiben: der neue Name. Andere Werte werden in eine Zeichenkette umgewandelt, z. B. `null` zu `"null"`.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs name. Fehlt das Attribut, ist es eine leere Zeichenkette.

Beispiele

Namen lesen und ändern

// HTML: <form id="bestellung"><fieldset name="lieferung"><legend>Lieferung</legend></fieldset></form>
const fieldset = document.querySelector('#bestellung fieldset');

console.log(fieldset.name);

fieldset.name = 'versand';
console.log(fieldset.getAttribute('name'));

lieferung versand

Fieldset über form.elements finden und sperren

// HTML:
// <form id="konto">
//   <label><input type="checkbox" id="firma"> Firmenkunde</label>
//   <fieldset name="firmendaten" disabled>
//     <input name="ustId" placeholder="USt-IdNr.">
//   </fieldset>
// </form>
const form = document.getElementById('konto');
const firmendaten = form.elements.namedItem('firmendaten');

document.getElementById('firma').addEventListener('change', (event) => {
  // Alle Felder im Fieldset auf einmal freigeben oder sperren
  firmendaten.disabled = !event.target.checked;
});

console.log(firmendaten instanceof HTMLFieldSetElement);

true

Der Fieldset-Name steht nicht in FormData

const form = document.createElement('form');
form.innerHTML = `
  <fieldset name="kontakt">
    <input name="email" value="max@example.com">
  </fieldset>`;

const daten = new FormData(form);
console.log([...daten.keys()]);
console.log(form.querySelector('fieldset').name);

["email"] kontakt

Fehlendes Attribut ergibt leere Zeichenkette

const fs = document.createElement('fieldset');
console.log(JSON.stringify(fs.name));
console.log(fs.hasAttribute('name'));

"" false

// Wichtig · Fallstricke

Keine Übermittlung: Der Name eines <fieldset> wird nicht mit dem Formular gesendet. Eingabefelder im Fieldset brauchen weiterhin jeweils ein eigenes name-Attribut. Das gilt auch für Radio-Button-Gruppen: Sie werden über das name-Attribut der <input>-Elemente gebildet, nicht über den Namen des Fieldsets.
Namenskonflikte: Haben ein Fieldset und ein Eingabefeld denselben Namen, liefert form.elements.namedItem() eine RadioNodeList statt eines einzelnen Elements. Verwenden Sie deshalb eindeutige Namen.
Bekommt ein Fieldset einen Namen, der einer Eigenschaft des Formulars entspricht (z. B. submit oder action), überdeckt der Kurzzugriff form.name diese Eigenschaft. Das kann zu schwer auffindbaren Fehlern führen.
Die Eigenschaft wird seit Langem von allen gängigen Browsern unterstützt.

Siehe auch

HTMLFieldSetElement.form HTMLFieldSetElement.type HTMLFieldSetElement.disabled HTMLFieldSetElement.elements HTMLFieldSetElement.validity