HTML enctype Attribute

What You’ll Learn

The enctype attribute tells the browser how to encode form data in the request body when a form is submitted with method="post". Use the default for text fields, switch to multipart/form-data for file uploads, and understand when text/plain applies.

Purpose of enctype

The primary purpose of the enctype attribute is to define how the browser packages form field names and values before sending them to the server. Different data types need different encodings: simple text fields work with URL encoding, while binary files need multipart encoding.

Choosing the wrong enctype is a common cause of broken file uploads. If you include <input type="file"> but forget enctype="multipart/form-data", the server may receive corrupted or empty file data.

📝 Syntax

Add enctype to the opening <form> tag:

<form action="/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="photo">
  <button type="submit">Upload</button>
</form>

Syntax Rules

• Only valid on <form> elements.
• Three standard values: URL-encoded (default), multipart, and text/plain.
• Omit enctype on text-only POST forms; the default works.
• Always set multipart/form-data when the form includes file inputs.

💎 Values

The enctype attribute accepts three MIME type values:

• application/x-www-form-urlencoded — Default. Encodes fields as name=value pairs joined by &, with special characters percent-encoded.
• multipart/form-data — Required for file uploads. Sends each field as a separate part, including binary file content.
• text/plain — Rare. Sends unencoded plain text lines. Not recommended for production forms.

<!-- Default (text fields) -->
<form method="post" action="/contact">...</form>

<!-- File upload -->
<form method="post" action="/upload" enctype="multipart/form-data">...</form>

<!-- Plain text (debug only) -->
<form method="post" enctype="text/plain">...</form>

Applicable Elements

Encoding Types Compared

Examples Gallery

Default URL-encoded forms, multipart file uploads, dynamic enctype switching, and the rare text/plain value.

<form method="post" action="/submit">
  <input type="text" name="name">
</form>

<form method="post" action="/upload" enctype="multipart/form-data">
  <input type="file" name="file">
</form>

<form id="dynamicForm" method="post">
  <input type="file" id="file" name="file">
</form>

<script>
  fileInput.addEventListener("change", () => {
    form.enctype = fileInput.files.length
      ? "multipart/form-data"
      : "application/x-www-form-urlencoded";
  });
</script>

<form method="post" enctype="text/plain">
  <input type="text" name="message" value="Hello">
</form>

♿ Accessibility

• Label file inputs clearly — Users need to know what file type and size you accept before uploading.
• Announce upload progress — Large multipart uploads should expose status to screen reader users.
• Describe errors in plain language — If encoding or upload fails, explain what went wrong and how to fix it.
• Do not rely on enctype alone — Server-side validation of file type and size is still required.

💡 Best Practices