HtmlConceptBeginner · 3 min read

What is enctype in form in HTML and How to Use It

The enctype attribute in an HTML form specifies how the form data should be encoded when sent to the server. It controls the format of the data, such as plain text or file uploads, ensuring the server can understand the submitted information.

⚙️

How It Works

Think of the enctype attribute as the way you package a letter before sending it through the mail. Just like you choose an envelope or a box depending on what you want to send, enctype tells the browser how to package the form data before sending it to the server.

By default, form data is sent as simple text, but if you want to send files like images or documents, you need a special packaging method. The enctype attribute changes this packaging so the server can correctly receive and understand the data.

💻

Example

This example shows a form that lets users upload a file. Notice the enctype is set to multipart/form-data, which is required for file uploads.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Upload Form</title>
</head>
<body>
  <form action="/upload" method="POST" enctype="multipart/form-data">
    <label for="fileInput">Choose a file:</label>
    <input type="file" id="fileInput" name="userfile">
    <button type="submit">Upload</button>
  </form>
</body>
</html>

Output

A simple form with a file input and an Upload button. When submitted, it sends the file data properly to the server.

🎯

When to Use

Use enctype="multipart/form-data" when your form includes file uploads, like images or documents. This encoding lets the browser send files along with other form data.

If your form only sends text data, the default encoding application/x-www-form-urlencoded is enough.

Another encoding, text/plain, sends data as plain text but is rarely used because it doesn’t format data well for servers.

✅

Key Points

enctype controls how form data is packaged for sending.
Use multipart/form-data for file uploads.
Default is application/x-www-form-urlencoded for text data.
Choosing the right enctype ensures the server reads your data correctly.

✅

Key Takeaways

The enctype attribute sets how form data is encoded before sending to the server.

Use multipart/form-data when your form includes file uploads.

Default encoding application/x-www-form-urlencoded works for text-only forms.

Choosing the correct enctype ensures the server can process your form data properly.