HTMLTextAreaElement.name — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.name

Beschreibung

Die Eigenschaft name von HTMLTextAreaElement ist ein String, der das HTML-Attribut name eines <textarea>-Elements widerspiegelt. Wenn Sie die Eigenschaft lesen, erhalten Sie den Attributwert. Wenn Sie sie schreiben, wird das Attribut im DOM aktualisiert.

Der Name bestimmt, unter welchem Schlüssel der Inhalt des Textfelds beim Absenden eines Formulars übertragen wird. Das gilt für klassische POST- und GET-Anfragen genauso wie für new FormData(form). Ein <textarea> ohne Namen wird beim Absenden nicht mitgeschickt.

Außerdem können Sie über den Namen auf das Element zugreifen, zum Beispiel mit form.elements.namedItem("kommentar") oder form.elements.kommentar. Das ist nützlich, wenn Formularfelder dynamisch erzeugt werden oder wenn Sie Felder eindeutig zuordnen wollen, ohne eine id zu vergeben.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs name. Fehlt das Attribut, ist der Wert ein leerer String "".

Beispiele

Namen auslesen und ändern

// HTML: <textarea id="notiz" name="notiz"></textarea>
const textarea = document.getElementById("notiz");
console.log(textarea.name);

textarea.name = "bemerkung";
console.log(textarea.getAttribute("name"));

notiz bemerkung

Name bestimmt den Schlüssel in FormData

// HTML: <form id="feedback"><textarea name="kommentar">Tolle Seite!</textarea></form>
const form = document.getElementById("feedback");
const daten = new FormData(form);
console.log(daten.get("kommentar"));

// Ohne Namen wird das Feld nicht übertragen
form.querySelector("textarea").name = "";
console.log([...new FormData(form).keys()].length);

Tolle Seite! 0

Dynamisch erzeugte Felder mit eindeutigen Namen

const form = document.createElement("form");

["frage1", "frage2"].forEach((key) => {
  const ta = document.createElement("textarea");
  ta.name = key;
  ta.value = `Antwort zu ${key}`;
  form.append(ta);
});

console.log(form.elements.namedItem("frage2").value);
console.log(Object.fromEntries(new FormData(form)));

Antwort zu frage2 { frage1: 'Antwort zu frage1', frage2: 'Antwort zu frage2' }

// Wichtig · Fallstricke

Fehlender Name = keine Übertragung: Ein <textarea> ohne name (oder mit leerem Namen) fehlt beim Absenden und in FormData. Das ist eine häufige Fehlerquelle.
Verdeckte Formular-Eigenschaften: Namen wie submit, action oder reset überschreiben über form.submit usw. die gleichnamigen Methoden und Eigenschaften des Formulars. Wählen Sie solche Namen deshalb nicht.
Doppelte Namen: Haben mehrere Felder denselben Namen, liefert form.elements.namedItem() eine RadioNodeList statt eines einzelnen Elements. FormData enthält dann mehrere Einträge, die Sie mit getAll() auslesen.
Nicht verwechseln: name ist nicht dasselbe wie id. Für die Zuordnung per <label for> brauchen Sie die id.
Die Eigenschaft wird von allen Browsern unterstützt.

Siehe auch

HTMLDetailsElement.name HTMLTextAreaElement.dirName HTMLTextAreaElement.type HTMLTextAreaElement.value HTMLTextAreaElement.cols