HTMLInputElement.formEnctype — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.formEnctype

Beschreibung

Die Eigenschaft formEnctype spiegelt das HTML-Attribut formenctype eines <input>-Elements wider. Sie gilt nur für Absende-Elemente, also <input type="submit"> und <input type="image">. Wird das Formular über ein solches Element abgeschickt, überschreibt ihr Wert das enctype-Attribut des zugehörigen <form>-Elements.

Gültige Werte sind:

application/x-www-form-urlencoded – Standard; Schlüssel-Wert-Paare, URL-kodiert.
multipart/form-data – nötig für Datei-Uploads (<input type="file">).
text/plain – unkodierter Klartext, vor allem zum Debuggen gedacht.

Typischer Einsatz: Ein Formular hat mehrere Absende-Buttons, von denen nur einer Dateien mitschicken soll – etwa „Nur Text speichern“ und „Mit Anhang hochladen“. Statt zweier Formulare legt man pro Button den passenden Kodierungstyp fest.

Die Eigenschaft ist auf bekannte Werte beschränkt: Fehlt das Attribut, liefert der Getter einen leeren String (dann gilt das enctype des Formulars). Ein ungültiger Wert wird als application/x-www-form-urlencoded gelesen.

Parameter

Name	Typ	Default	Beschreibung
$value	string	""	Beim Setzen: einer der Werte `application/x-www-form-urlencoded`, `multipart/form-data` oder `text/plain`. Setzt das Attribut `formenctype`.

Rückgabewert

Typ

string

Beschreibung

Den aktuellen Kodierungstyp des Buttons. Leerer String, wenn das Attribut fehlt; application/x-www-form-urlencoded, wenn ein ungültiger Wert gesetzt ist.

Beispiele

Wert auslesen und Standardverhalten prüfen

// HTML:
// <form action="/save" method="post">
//   <input type="submit" id="plain" value="Speichern">
//   <input type="submit" id="upload" value="Hochladen" formenctype="multipart/form-data">
// </form>
const plain = document.querySelector('#plain');
const upload = document.querySelector('#upload');

console.log(JSON.stringify(plain.formEnctype));
console.log(upload.formEnctype);

// Tatsächlich wirksamen Typ ermitteln
const effective = (btn) => btn.formEnctype || btn.form.enctype;
console.log(effective(plain));

"" multipart/form-data application/x-www-form-urlencoded

Kodierung dynamisch umschalten, sobald eine Datei gewählt wird

// HTML:
// <form action="/ticket" method="post">
//   <textarea name="text"></textarea>
//   <input type="file" name="anhang" id="anhang">
//   <input type="submit" id="senden" value="Absenden">
// </form>
const fileInput = document.querySelector('#anhang');
const submitBtn = document.querySelector('#senden');

fileInput.addEventListener('change', () => {
  submitBtn.formEnctype = fileInput.files.length > 0
    ? 'multipart/form-data'
    : 'application/x-www-form-urlencoded';
  console.log('Kodierung:', submitBtn.formEnctype);
});

Kodierung: multipart/form-data

Ungültige Werte werden normalisiert

const btn = document.createElement('input');
btn.type = 'submit';

btn.formEnctype = 'application/json'; // nicht erlaubt
console.log(btn.getAttribute('formenctype'));
console.log(btn.formEnctype);

application/json application/x-www-form-urlencoded

Programmatisch mit einem bestimmten Button absenden

const form = document.querySelector('form');
const uploadBtn = document.querySelector('#upload');

// requestSubmit() berücksichtigt formEnctype, formAction usw. des Submitters
form.requestSubmit(uploadBtn);

// form.submit() dagegen ignoriert den Button und nutzt form.enctype

// Wichtig · Fallstricke

Nur bei POST wirksam: Bei method="get" (bzw. formMethod="get") werden die Daten immer URL-kodiert an die URL gehängt – formEnctype hat dann keinen Effekt.
Nur für Absende-Elemente: Bei anderen type-Werten (z. B. text) wird die Eigenschaft ignoriert.
Kein JSON: application/json ist kein gültiger Wert. Für JSON-Übertragung das Absenden per submit-Event abfangen und fetch() verwenden.
form.submit() berücksichtigt keinen Submitter und damit kein formEnctype; form.requestSubmit(button) hingegen schon.
Bei fetch() mit einem FormData-Objekt wird ohnehin immer multipart/form-data gesendet – formEnctype spielt dort keine Rolle.
text/plain ist nicht eindeutig dekodierbar und sollte nicht produktiv eingesetzt werden.
Das Gegenstück für Buttons ist HTMLButtonElement.formEnctype. Wird in allen modernen Browsern unterstützt.

Siehe auch

HTMLInputElement.formAction HTMLInputElement.formMethod HTMLInputElement.form HTMLInputElement.formTarget HTMLInputElement.type