HTMLInputElement.name — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.name

Beschreibung

Die Eigenschaft name spiegelt das HTML-Attribut name eines <input>-Elements wider. Beim Absenden eines Formulars wird der Wert des Feldes unter diesem Namen übertragen, also als Paar name=wert. Dasselbe gilt, wenn Sie Formulardaten mit FormData auslesen.

Außerdem legt name fest, welche Radiobuttons eine Gruppe bilden: Alle <input type="radio"> mit demselben Namen schließen sich gegenseitig aus. Über form.elements erreichen Sie Felder direkt unter ihrem Namen, zum Beispiel mit form.elements.email oder form.elements['user[name]'].

Die Eigenschaft kann gelesen und gesetzt werden. Wenn Sie ihr einen Wert zuweisen, ändert sich sofort auch das Attribut im DOM. Fehlt das Attribut, liefert die Eigenschaft einen leeren String. Ein Feld ohne Namen wird beim Absenden nicht übertragen.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Nur beim Setzen: der neue Name des Feldes. Andere Typen werden in einen String umgewandelt.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs name. Ist das Attribut nicht gesetzt, kommt ein leerer String "" zurück.

Beispiele

Namen lesen und setzen

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

input.name = 'email';
console.log(input.name);
console.log(input.getAttribute('name'));

"" email email

Formulardaten über den Namen auslesen

// <form id="login"><input name="user" value="anna"><input name="pass" type="password" value="geheim"><input value="ohne-name"></form>
const form = document.getElementById('login');
const data = new FormData(form);

for (const [key, value] of data) {
  console.log(`${key} = ${value}`);
}
// Feld ohne Namen fehlt in den Formulardaten

user = anna pass = geheim

Radiobuttons dynamisch zu einer Gruppe verbinden

const container = document.body;
['klein', 'mittel', 'groß'].forEach((size) => {
  const radio = document.createElement('input');
  radio.type = 'radio';
  radio.name = 'groesse'; // gleicher Name = eine Gruppe
  radio.value = size;
  container.append(radio, ` ${size} `);
});

const radios = document.querySelectorAll('input[name="groesse"]');
radios[1].checked = true;
console.log(radios.length, document.querySelector('input[name="groesse"]:checked').value);

3 mittel

Feld über form.elements direkt ansprechen

const form = document.createElement('form');
const field = document.createElement('input');
field.name = 'plz';
field.value = '10115';
form.append(field);

console.log(form.elements.plz.value);
console.log(form.elements.namedItem('plz') === field);

10115 true

// Wichtig · Fallstricke

Fehlender Name: Felder ohne name (oder mit leerem Namen) werden beim Absenden nicht übertragen und fehlen auch in FormData. Das ist ein häufiger Grund für „verschwundene“ Werte.
Kollision mit Formular-Eigenschaften: Namen wie submit, action, method, reset oder length überdecken die gleichnamigen Eigenschaften und Methoden des <form>-Elements. Dann schlägt zum Beispiel form.submit() fehl. Solche Namen sollten Sie vermeiden.
Mehrfache Namen: Haben mehrere Felder denselben Namen, liefert form.elements[name] eine RadioNodeList statt eines einzelnen Elements. Alle Werte erhalten Sie mit FormData.getAll().
Besondere Namen: Der Name _charset_ hat bei versteckten Feldern (type="hidden") eine Sonderbedeutung: Der Browser setzt dort automatisch die Zeichenkodierung ein. Den Namen isindex sollten Sie nicht verwenden.
name ist nicht dasselbe wie id. Namen müssen nicht eindeutig sein und haben keinen Einfluss auf getElementById().
Die Eigenschaft wird von allen Browsern unterstützt.

Siehe auch

HTMLFormElement.name HTMLInputElement.alt HTMLInputElement.dirName HTMLInputElement.max HTMLInputElement.size