HTMLOutputElement.name — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOutputElement.name

Beschreibung

Die Eigenschaft name des Interfaces HTMLOutputElement gibt den Wert des HTML-Attributs name eines <output>-Elements als Zeichenkette zurück. Wird ihr ein Wert zugewiesen, ändert sich auch das Attribut. Fehlt das Attribut, ist der Wert ein leerer String.

Über den Namen erreicht man das Element in der Sammlung form.elements (z. B. form.elements.summe oder form.elements["summe"]). Innerhalb von oninput-Handlern des Formulars kann man es auch direkt über seinen Namen ansprechen. Das macht name praktisch für Rechenformulare, die ein Ergebnis live anzeigen.

Wichtig: Anders als <input>-Elemente werden <output>-Elemente beim Absenden nicht mitgesendet. Der Name wird also nicht Teil der Formulardaten, und auch new FormData(form) enthält keinen Eintrag dafür. Der Name dient nur der Adressierung im Skript.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs name. Fehlt das Attribut, ist es ein leerer String "". Beim Zuweisen wird der Wert in einen String umgewandelt und ins Attribut geschrieben.

Beispiele

Namen auslesen und über form.elements zugreifen

// HTML:
// <form id="rechner">
//   <input type="number" name="a" value="2"> +
//   <input type="number" name="b" value="3"> =
//   <output name="summe" for="a b">5</output>
// </form>
const form = document.getElementById('rechner');
const out = form.querySelector('output');

console.log(out.name);                       // Name lesen
console.log(form.elements.summe === out);   // Zugriff über den Namen

summe true

Live-Rechner, der das Ergebnis über den Namen schreibt

const form = document.getElementById('rechner');

form.addEventListener('input', () => {
  const { a, b, summe } = form.elements;
  summe.value = a.valueAsNumber + b.valueAsNumber;
  console.log(`${summe.name} = ${summe.value}`);
});

summe = 5 // bei jeder Eingabe aktualisiert

Namen dynamisch setzen und prüfen, ob er mitgesendet wird

const out = document.createElement('output');
console.log(JSON.stringify(out.name)); // noch kein Attribut

out.name = 'ergebnis';
console.log(out.getAttribute('name'));

const form = document.createElement('form');
form.append(out);
out.value = '42';
console.log(new FormData(form).has('ergebnis')); // output wird nicht gesendet

"" ergebnis false

// Wichtig · Fallstricke

Kein Absenden: <output>-Werte gehören nicht zu den Formulardaten. Soll das Ergebnis an den Server gehen, muss man es zusätzlich in ein <input type="hidden"> kopieren.
Namenskollisionen: Heißen mehrere Steuerelemente gleich, liefert form.elements.name eine RadioNodeList statt eines einzelnen Elements. Namen wie submit, action oder length überdecken außerdem gleichnamige Formular-Eigenschaften und sollten vermieden werden.
name ist nicht dasselbe wie id. Für document.getElementById() und für das Attribut for anderer Elemente braucht man eine id.
Kompatibilität: wird von allen aktuellen Browsern unterstützt. Der alte Internet Explorer kennt <output> nicht.

Siehe auch

HTMLButtonElement.name HTMLOutputElement.type HTMLOutputElement.value HTMLOutputElement.form HTMLOutputElement.labels