HTMLButtonElement.type — Eigenschaft · JavaScript-Referenz

Signatur

HTMLButtonElement.type

Beschreibung

Die Eigenschaft type von HTMLButtonElement spiegelt das HTML-Attribut type. Sie legt fest, was beim Klick auf den Button geschieht:

"submit": sendet das zugehörige Formular ab. Das ist der Standardwert.
"reset": setzt alle Steuerelemente des Formulars auf ihre Anfangswerte zurück.
"button": kein eingebautes Verhalten. Der Button tut nur das, was du per JavaScript festlegst.

Beim Lesen bekommst du immer einen normalisierten Wert in Kleinbuchstaben. Fehlt das Attribut oder ist sein Wert ungültig, liefert die Eigenschaft "submit". Beim Schreiben wird das Attribut type direkt gesetzt. Beliebige Zeichenketten werden dabei angenommen, wirken aber wie "submit".

In der Praxis brauchst du die Eigenschaft vor allem aus zwei Gründen: Du prüfst, ob ein Button ein Formular absendet, zum Beispiel in einem allgemeinen Klick-Handler. Oder du setzt bei dynamisch erzeugten Buttons ausdrücklich type = "button", damit kein Formular versehentlich abgeschickt wird.

Parameter

Name	Typ	Default	Beschreibung
$value	string	"submit"	Nur beim Schreiben: der neue Typ, also `"submit"`, `"reset"` oder `"button"`. Groß- und Kleinschreibung spielt keine Rolle.

Rückgabewert

Typ

string

Beschreibung

Der normalisierte Typ in Kleinbuchstaben: "submit", "reset" oder "button". Bei fehlendem oder ungültigem Attribut ist es "submit".

Beispiele

Typ auslesen und normalisierten Wert sehen

// HTML: <form><button id="a">Senden</button><button id="b" type="RESET">Zurücksetzen</button><button id="c" type="quatsch">?</button></form>
const ids = ['a', 'b', 'c'];
for (const id of ids) {
  const btn = document.getElementById(id);
  console.log(id, btn.type, btn.getAttribute('type'));
}

a submit null b reset RESET c submit quatsch

Dynamisch erzeugten Button ohne Formularversand einfügen

const form = document.querySelector('form');
const addBtn = document.createElement('button');
addBtn.textContent = 'Zeile hinzufügen';
// Ohne diese Zeile würde der Klick das Formular absenden
addBtn.type = 'button';
addBtn.addEventListener('click', () => {
  const input = document.createElement('input');
  input.name = 'eintrag[]';
  form.insertBefore(input, addBtn);
});
form.append(addBtn);
console.log(addBtn.type, addBtn.outerHTML);

button <button type="button">Zeile hinzufügen</button>

Absende-Buttons während eines Requests sperren

const form = document.querySelector('#kontakt');
form.addEventListener('submit', async (event) => {
  event.preventDefault();
  // Nur die Buttons, die tatsächlich absenden
  const submitButtons = [...form.elements].filter(
    (el) => el instanceof HTMLButtonElement && el.type === 'submit'
  );
  submitButtons.forEach((b) => (b.disabled = true));
  try {
    await fetch(form.action, { method: 'POST', body: new FormData(form) });
  } finally {
    submitButtons.forEach((b) => (b.disabled = false));
  }
});

// Wichtig · Fallstricke

Häufigster Fallstrick: Ein <button> ohne type innerhalb eines <form> ist ein Absende-Button. Buttons für Modals, Tabs oder zum Aufklappen solltest du immer mit type="button" versehen. Sonst lösen sie ungewollt das Absenden und ein Neuladen der Seite aus.
Ungültige Werte werfen keinen Fehler. Das Attribut behält den Rohwert, die Eigenschaft liefert aber "submit". Den tatsächlich gesetzten Text liest du mit getAttribute('type').
Steht ein Button außerhalb eines Formulars und ist er auch nicht per form-Attribut einem Formular zugeordnet, bewirken "submit" und "reset" nichts.
Neuere Spezifikationen führen das Attribut commandfor ein, die Invoker Commands. Ist es gesetzt und fehlt type, verhält sich der Button wie "button". Diese Regel wird noch nicht von allen Browsern unterstützt. Setze type daher ausdrücklich.
Die Eigenschaft selbst wird von allen Browsern unterstützt. In sehr alten Versionen des Internet Explorer war type nach dem Einfügen in das Dokument nur lesbar.

Siehe auch

HTMLButtonElement.form HTMLButtonElement.name HTMLButtonElement.value HTMLButtonElement.labels HTMLButtonElement.command