HTMLButtonElement.formTarget — Eigenschaft · JavaScript-Referenz

Signatur

HTMLButtonElement.formTarget

Beschreibung

Die Eigenschaft formTarget des HTMLButtonElement spiegelt das HTML-Attribut formtarget wider. Sie legt fest, in welchem Browsing-Kontext (Tab, Fenster oder <iframe>) die Serverantwort angezeigt wird, wenn das Formular über genau diesen Button abgeschickt wird. Damit überschreibt sie für diesen einen Absendevorgang das target-Attribut des zugehörigen <form>-Elements.

Gültige Werte sind die Schlüsselwörter _self (aktueller Kontext, Standard), _blank (neuer Tab bzw. neues Fenster), _parent (übergeordneter Kontext), _top (oberster Kontext) sowie der Name eines Fensters oder iframes (Attribut name). Existiert kein Kontext mit diesem Namen, öffnet der Browser einen neuen mit diesem Namen.

Typische Einsatzfälle: ein Formular mit mehreren Buttons, bei dem z. B. „Vorschau“ in einem neuen Tab öffnet, „Speichern“ aber im aktuellen Fenster bleibt; oder das Absenden in ein verstecktes bzw. eingebettetes iframe, um die Antwort ohne Seitenwechsel anzuzeigen.

Die Eigenschaft wirkt nur, wenn der Button vom Typ submit ist (Standard bei <button> innerhalb eines Formulars). Bei type="button" oder type="reset" wird sie ignoriert.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des Attributs formtarget, z. B. "_blank" oder ein Fenster-/iframe-Name. Leerer String, wenn das Attribut nicht gesetzt ist. Beim Zuweisen wird das Attribut entsprechend gesetzt.

Beispiele

Wert auslesen

// HTML:
// <form action="/bericht" target="_self">
//   <button id="vorschau" formtarget="_blank">Vorschau</button>
// </form>
const btn = document.querySelector('#vorschau');
console.log(btn.formTarget);
console.log(btn.form.target);

_blank _self

Vorschau im neuen Tab, Speichern im aktuellen Fenster

const form = document.createElement('form');
form.action = '/artikel';
form.method = 'post';

const speichern = document.createElement('button');
speichern.textContent = 'Speichern';

const vorschau = document.createElement('button');
vorschau.textContent = 'Vorschau';
vorschau.formAction = '/artikel/vorschau';
vorschau.formTarget = '_blank'; // nur dieser Button öffnet neuen Tab

form.append(speichern, vorschau);
document.body.append(form);

console.log(vorschau.getAttribute('formtarget'));

_blank

Antwort in ein benanntes iframe laden

// HTML:
// <iframe name="ergebnis"></iframe>
// <form action="/suche"><input name="q"><button id="suchen">Suchen</button></form>
const suchen = document.querySelector('#suchen');
const iframe = document.querySelector('iframe[name="ergebnis"]');

// Ergebnis ohne Seitenwechsel im iframe anzeigen
suchen.formTarget = iframe.name;

iframe.addEventListener('load', () => {
  console.log('Suchergebnis geladen');
});

Suchergebnis geladen (nach dem Absenden)

// Wichtig · Fallstricke

Nur für Submit-Buttons: Bei type="button" oder type="reset" hat formTarget keine Wirkung.
Kein Einfluss auf form.submit(): Wird das Formular per form.submit() abgeschickt, gilt nur form.target. Nutze form.requestSubmit(button), damit formTarget (sowie formAction, formMethod) des Buttons berücksichtigt wird.
Groß-/Kleinschreibung: Schlüsselwörter wie _blank werden ohne Groß-/Kleinschreibung erkannt; Fensternamen dagegen exakt. Ein Tippfehler im Namen öffnet einen neuen Tab statt das iframe zu nutzen.
Sicherheit: Bei _blank erhalten moderne Browser implizit noopener-Verhalten für Formulare nicht in allen Fällen gleich; bei Zielen auf fremden Ursprüngen ggf. rel="noopener" am Formular setzen. Popup-Blocker können neue Fenster unterdrücken, wenn das Absenden nicht durch eine Nutzeraktion ausgelöst wurde.
Kompatibilität: In allen modernen Browsern unterstützt (seit HTML5); das Gegenstück existiert auch als HTMLInputElement.formTarget.

Siehe auch

HTMLButtonElement.form HTMLButtonElement.formAction HTMLButtonElement.formMethod HTMLButtonElement.command HTMLButtonElement.formEnctype