HTMLInputElement.formTarget — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.formTarget

Beschreibung

Die Eigenschaft formTarget spiegelt das HTML-Attribut formtarget eines <input>-Elements wider. Sie wirkt nur bei Absende-Elementen, also bei type="submit" und type="image". Wird das Formular über genau diesen Button abgeschickt, überschreibt der Wert das target-Attribut des zugehörigen <form>-Elements.

Gültige Werte sind die üblichen Browsing-Context-Schlüsselwörter:

_self: aktueller Browsing-Kontext (Standard)
_blank: neuer, unbenannter Tab bzw. neues Fenster
_parent: übergeordneter Kontext (bei iframes), sonst wie _self
_top: oberster Kontext, sonst wie _self
ein beliebiger Name, z. B. der name eines <iframe> oder eines mit window.open() geöffneten Fensters

Praktisch ist das, wenn ein Formular mehrere Aktionen anbietet, z. B. „Speichern“ im aktuellen Tab und „Vorschau“ in einem neuen Tab oder einem eingebetteten iframe, ohne dafür ein zweites Formular zu brauchen. Ist das Attribut nicht gesetzt, liefert die Eigenschaft einen leeren String, und dann gilt das target des Formulars.

Rückgabewert

Typ

string

Beschreibung

Der Name des Browsing-Kontexts bzw. ein Schlüsselwort wie _blank. Leerer String, wenn das Attribut formtarget fehlt. Beim Setzen wird das Attribut aktualisiert.

Beispiele

Wert auslesen

// HTML: <form action="/save"><input type="submit" id="preview" formtarget="_blank" value="Vorschau"></form>
const previewBtn = document.getElementById('preview');
console.log(previewBtn.formTarget);
console.log(previewBtn.getAttribute('formtarget'));

_blank _blank

Vorschau-Button in einen neuen Tab umleiten

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

const saveBtn = document.createElement('input');
saveBtn.type = 'submit';
saveBtn.value = 'Speichern';

const previewBtn = document.createElement('input');
previewBtn.type = 'submit';
previewBtn.value = 'Vorschau';
previewBtn.formAction = '/artikel/vorschau';
previewBtn.formTarget = '_blank'; // nur dieser Button öffnet einen neuen Tab

form.append(saveBtn, previewBtn);
document.body.append(form);

console.log(saveBtn.formTarget === '');
console.log(previewBtn.outerHTML);

true <input type="submit" value="Vorschau" formaction="/artikel/vorschau" formtarget="_blank">

Antwort in einem eingebetteten iframe anzeigen

// HTML:
// <iframe name="ergebnis"></iframe>
// <form action="/suche"><input name="q"><input type="submit" id="go" value="Suchen"></form>
const goBtn = document.getElementById('go');
const inlineToggle = document.createElement('input');
inlineToggle.type = 'checkbox';
document.body.append(inlineToggle);

// Je nach Checkbox im iframe oder in der ganzen Seite anzeigen
inlineToggle.addEventListener('change', () => {
  goBtn.formTarget = inlineToggle.checked ? 'ergebnis' : '_self';
  console.log('Ziel:', goBtn.formTarget);
});

Ziel: ergebnis

// Wichtig · Fallstricke

Die Eigenschaft wirkt nur bei type="submit" und type="image". Bei anderen Typen lässt sie sich zwar setzen, beeinflusst das Absenden aber nicht.
Bei form.submit() wird formTarget ignoriert, weil dort kein Absende-Button beteiligt ist. form.requestSubmit(button) berücksichtigt den Wert dagegen.
Der Browser prüft den Wert nicht. Gibt es keinen Kontext mit einem unbekannten Namen, öffnet er einen neuen Tab mit genau diesem Namen.
Sicherheit: Bei _blank setzen moderne Browser für Formular-Ziele standardmäßig noopener-Verhalten. In älteren Browsern konnte die Zielseite über window.opener auf die Ausgangsseite zugreifen. Pop-up-Blocker können neue Fenster blockieren, wenn das Absenden nicht durch eine Nutzeraktion ausgelöst wurde.
Ein iframe mit sandbox-Attribut ohne allow-forms nimmt keine Formularübermittlung an.
Kompatibilität: Die Eigenschaft wird seit vielen Jahren in allen gängigen Browsern unterstützt. Das Gegenstück für Buttons ist HTMLButtonElement.formTarget.

Siehe auch

HTMLButtonElement.formTarget HTMLInputElement.form HTMLInputElement.formAction HTMLInputElement.formMethod HTMLInputElement.capture