HTML formenctype Attribute

What You’ll Learn

The formenctype attribute is an essential part of HTML forms, allowing developers to specify how form data should be encoded before it is sent to the server. Applied to submit buttons, it overrides the form’s default enctype for that one submission—crucial when file uploads need multipart/form-data.

Purpose of formenctype Attribute

The primary purpose of the formenctype attribute is to specify the encoding type for form data when it is submitted via a particular button. This encoding type determines how the data is packaged and sent to the server. Different encoding types suit different data—text fields, file uploads, or plain text.

While most forms set enctype once on the <form> element, formenctype lets one form offer multiple submit paths with different encoding requirements.

📝 Syntax

Add formenctype to a submit button with one of the supported MIME type values:

<form action="/upload" method="post">
  <input type="file" name="file">
  <input type="submit" value="Upload File" formenctype="multipart/form-data">
</form>

Syntax Rules

• Valid on submit controls: <button type="submit">, <input type="submit">, and <input type="image">.
• Overrides the parent form’s enctype only for that button’s submission.
• Only meaningful with method="post" (GET forms ignore enctype).
• Works alongside formaction and formmethod for full per-button control.

💎 Values

The formenctype attribute accepts several values to define different encoding types. The common values include:

• application/x-www-form-urlencoded — The default value. URL-encodes form data before sending. Suitable for standard text fields.
• multipart/form-data — Used when the form includes file uploads. Sends each field and file as a separate part for efficient binary transmission.
• text/plain — Sends data as plain text with spaces encoded as + characters. Rarely used; not ideal for structured or special-character data.

<!-- Default text encoding -->
<input type="submit" formenctype="application/x-www-form-urlencoded">

<!-- File upload encoding -->
<input type="submit" formenctype="multipart/form-data">

<!-- Plain text (uncommon) -->
<input type="submit" formenctype="text/plain">

Applicable Elements

Form enctype vs formenctype

Examples Gallery

File upload with multipart encoding, mixed encoding in one form, and toggling formenctype dynamically with JavaScript.

<form action="/upload" method="post">
  <label for="file">Choose a file:</label>
  <input type="file" id="file" name="file">

  <input type="submit" value="Upload File" formenctype="multipart/form-data">
</form>

<form action="/handler" method="post" enctype="multipart/form-data">
  <input type="text" name="title">
  <input type="file" name="attachment">

  <input type="submit" value="Upload with file">
  <input type="submit" value="Save text only"
         formenctype="application/x-www-form-urlencoded">
</form>

<form id="myForm" action="/upload" method="post">
  <label for="file">Choose a file:</label>
  <input type="file" id="file" name="file">

  <label>
    <input type="checkbox" id="toggleEnctype">
    Use <code>multipart/form-data</code>
  </label>

  <input type="submit" id="submitBtn" value="Upload File">
</form>

<script>
  const submitBtn = document.getElementById("submitBtn");
  const toggle = document.getElementById("toggleEnctype");

  toggle.addEventListener("change", () => {
    if (toggle.checked) {
      submitBtn.setAttribute("formenctype", "multipart/form-data");
    } else {
      submitBtn.removeAttribute("formenctype");
    }
  });
</script>

♿ Accessibility

• Label file inputs clearly — Users uploading files need to know what type and size of file is expected.
• Describe upload requirements in text — Do not rely on encoding attributes alone; explain accepted formats in plain language.
• Provide error feedback — If encoding or upload fails server-side, return clear messages users can understand.
• Keep submit buttons distinct — When multiple buttons use different encoding, label them so users know what each does.

💡 Best Practices