HTMLFormElement.target — Eigenschaft · JavaScript-Referenz

Signatur

HTMLFormElement.target

Beschreibung

Die Eigenschaft target des Interfaces HTMLFormElement gibt an, wo die Serverantwort nach dem Absenden eines Formulars angezeigt wird. Sie spiegelt direkt das HTML-Attribut <form target="…">. Wenn Sie die Eigenschaft ändern, ändert sich auch das Attribut und umgekehrt.

Gültige Werte sind die reservierten Schlüsselwörter _self (gleicher Kontext, Standard), _blank (neues Fenster bzw. neuer Tab), _parent (übergeordneter Kontext), _top (oberster Kontext) sowie der Name eines beliebigen Fensters oder <iframe name="…">. Ist das Attribut nicht gesetzt, liefert die Eigenschaft einen leeren String und der Browser verwendet das target eines vorhandenen <base>-Elements oder ansonsten _self.

Typische Einsatzgebiete sind: Formulare in einem neuen Tab öffnen (z. B. PDF-Export oder Druckvorschau), Formularantworten in ein verstecktes iframe umleiten (klassischer „AJAX-Ersatz“ für Datei-Uploads) oder das Ziel abhängig von der Benutzeraktion dynamisch umschalten. Einzelne Absende-Schaltflächen können das Ziel mit dem Attribut formtarget überschreiben.

Parameter

Name	Typ	Default	Beschreibung
$value	string	"" (Verhalten wie _self)	Beim Setzen: Schlüsselwort (`_self`, `_blank`, `_parent`, `_top`) oder Name eines Fensters/iframes. Der Wert wird nicht validiert.

Rückgabewert

Typ

string

Beschreibung

Der aktuelle Wert des target-Attributs; leerer String, wenn keines gesetzt ist.

Beispiele

Aktuelles Ziel auslesen

// <form id="suche" action="/suche" target="_blank">…</form>
const form = document.getElementById('suche');
console.log(form.target);
console.log(form.getAttribute('target'));

_blank _blank

PDF-Export in neuem Tab, normales Speichern im selben Tab

const form = document.querySelector('#bericht');
const exportBtn = document.querySelector('#export-pdf');

exportBtn.addEventListener('click', () => {
  form.action = '/bericht/pdf';
  form.target = '_blank'; // Antwort in neuem Tab öffnen
  form.submit();

  // Zurücksetzen für normales Absenden
  form.action = '/bericht/speichern';
  form.target = '_self';
});

Antwort in ein verstecktes iframe umleiten

const iframe = document.createElement('iframe');
iframe.name = 'upload-frame';
iframe.hidden = true;
document.body.append(iframe);

const form = document.querySelector('#upload');
form.target = iframe.name;

iframe.addEventListener('load', () => {
  // Nur bei gleicher Herkunft lesbar
  const text = iframe.contentDocument?.body.textContent;
  console.log('Server-Antwort:', text);
});

form.requestSubmit();

Server-Antwort: {"status":"ok"}

// Wichtig · Fallstricke

Leerer String ≠ „_self“: Ohne Attribut liefert form.target "". Das effektive Ziel kann dann von einem <base target="…"> im Dokument abhängen.
Unbekannte Namen: Gibt es kein Fenster und kein iframe mit dem angegebenen Namen, öffnet der Browser einen neuen Tab mit diesem Namen – ein häufiger Grund für „plötzlich neue Tabs“ bei Tippfehlern.
formtarget hat Vorrang: Ein formtarget-Attribut auf dem auslösenden <button> oder <input type="submit"> überschreibt form.target.
Sicherheit: Bei _blank setzen moderne Browser implizit noopener nur für Links. Bei Formularen können Sie mit rel="noopener" auf dem <form> (bzw. form.rel) verhindern, dass die Zielseite über window.opener auf Ihre Seite zugreift (Tabnabbing).
Pop-up-Blocker: form.submit() mit target="_blank" außerhalb einer Benutzeraktion (z. B. in einem Timer) wird oft blockiert.
Bei iframes einer fremden Herkunft ist die Antwort wegen der Same-Origin-Policy nicht lesbar; die Sandbox-Einstellungen (sandbox, allow-forms) können das Absenden zusätzlich verhindern.
Die Eigenschaft wird von allen Browsern seit jeher unterstützt.

Siehe auch

HTMLFormElement.name HTMLFormElement.rel HTMLFormElement.length HTMLFormElement.action HTMLFormElement.elements