HTMLFormElement.encoding — Eigenschaft · JavaScript-Referenz

Signatur

HTMLFormElement.encoding

Beschreibung

HTMLFormElement.encoding ist ein alternativer Name für HTMLFormElement.enctype. Beide Eigenschaften spiegeln das HTML-Attribut enctype des <form>-Elements wider. Sie legen fest, wie die Formulardaten beim Absenden mit method="post" codiert werden.

Gültige Werte sind:

application/x-www-form-urlencoded – Standardwert, Schlüssel-Wert-Paare URL-codiert
multipart/form-data – nötig für Datei-Uploads über <input type="file">
text/plain – unverschlüsselter Klartext (nur zum Debuggen sinnvoll)

Ungültige oder fehlende Werte werden beim Lesen auf application/x-www-form-urlencoded normalisiert. Wenn du einen Wert schreibst, änderst du das Attribut enctype direkt. Das Lesen über form.getAttribute('enctype') liefert deshalb danach den neuen Wert.

Die Eigenschaft gibt es vor allem aus Gründen der Abwärtskompatibilität. In neuem Code solltest du enctype verwenden, weil der Name dort mit dem HTML-Attribut übereinstimmt.

Rückgabewert

Typ

string

Beschreibung

Der normalisierte MIME-Typ der Formularcodierung: application/x-www-form-urlencoded, multipart/form-data oder text/plain. Die Eigenschaft ist beschreibbar.

Beispiele

Codierung auslesen und mit enctype vergleichen

const form = document.createElement('form');
console.log(form.encoding);

form.setAttribute('enctype', 'multipart/form-data');
console.log(form.encoding);
console.log(form.encoding === form.enctype);

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

Beim Hinzufügen eines Datei-Uploads auf multipart umschalten

const form = document.querySelector('#profil-form');
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.name = 'avatar';
form.append(fileInput);

// Ohne multipart würde nur der Dateiname übertragen
if (form.encoding !== 'multipart/form-data') {
  form.encoding = 'multipart/form-data';
}
console.log(form.getAttribute('enctype'));

multipart/form-data

Normalisierung ungültiger Werte

const form = document.createElement('form');
form.encoding = 'application/json';
console.log(form.getAttribute('enctype'));
console.log(form.encoding);

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

// Wichtig · Fallstricke

Alias: encoding und enctype verhalten sich identisch. Bevorzuge enctype, da der Name dem HTML-Attribut entspricht.
Überschreibung durch Buttons: Ein Absende-Button mit dem Attribut formenctype überschreibt den Wert des Formulars. form.encoding zeigt diese Überschreibung nicht an.
Nur bei POST relevant: Bei method="get" werden die Daten immer URL-codiert an die Adresse angehängt, egal welcher Wert gesetzt ist.
Kein JSON: application/json ist kein gültiger Wert. Für JSON-Übertragung verwende fetch() mit JSON.stringify().
fetch mit FormData: Bei fetch(url, { body: new FormData(form) }) wird die Eigenschaft ignoriert. Es wird immer multipart/form-data gesendet.
Browser-Kompatibilität: Wird von allen gängigen Browsern seit Langem unterstützt.

Siehe auch

HTMLFormElement.enctype HTMLFormElement.method HTMLFormElement.action HTMLFormElement.submit() HTMLFormElement HTMLFormElement.length