HTML enctype Attribute
The HTML enctype attribute specifies how a form's data is encoded when it is submitted. It is used on the <form> element and is primarily relevant when the form uses method="post".
Syntax
The enctype attribute is placed on a <form> element and assigned one of its supported encoding types.
<form action="result.php" method="post" enctype="multipart/form-data">
...
</form>
If enctype is omitted or contains an invalid value, the default is application/x-www-form-urlencoded.
Attribute Values
The enctype attribute is an enumerated attribute with three supported values.
| Value | Description |
|---|---|
application/x-www-form-urlencoded |
The default encoding type. Form data is encoded as name-value pairs. |
multipart/form-data |
Encodes form data as separate parts and is required when a form submits files. |
text/plain |
Encodes form data as plain text. This format is primarily useful for debugging because it is ambiguous and not reliably interpreted by computers. |
The application/x-www-form-urlencoded Value
The application/x-www-form-urlencoded value is the default encoding type for form submission.
<form action="result.php" method="post" enctype="application/x-www-form-urlencoded">
<input type="text" name="first-name">
<button type="submit">Submit</button>
</form>
Form fields are serialized as name-value pairs using URL-encoded form data. Because this is the default value, it normally does not need to be written explicitly.
The multipart/form-data Value
The multipart/form-data value separates the submitted data into individual parts. Each part can contain its own information, making this encoding suitable for forms that include uploaded files.
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="photo">Choose a photo:</label>
<input type="file" id="photo" name="photo">
<button type="submit">Upload</button>
</form>
The browser generates the multipart boundary needed to separate the individual parts of the submitted data.
The text/plain Value
The text/plain value submits the form's name-value pairs in a human-readable plain-text format.
<form action="result.php" method="post" enctype="text/plain">
<input type="text" name="name" value="Alex">
<button type="submit">Submit</button>
</form>
The resulting data resembles plain lines of name=value pairs. Because the format is ambiguous and cannot reliably distinguish some characters in values from its own separators, it is generally unsuitable for normal application data processing.
File Uploads
Forms that allow users to upload files with <input type="file"> should use method="post" and enctype="multipart/form-data" so the selected files are transmitted as file data.
<form action="upload.php" method="post" enctype="multipart/form-data">
<label for="document">Select a file:</label>
<input type="file" id="document" name="document">
<button type="submit">Upload File</button>
</form>
Using the default application/x-www-form-urlencoded encoding does not transmit the contents of a selected file as a file upload.
enctype and formenctype
The enctype attribute establishes the form's encoding type. A submit button can use formenctype to override that setting for the submission initiated by that button.
<form action="result.php" method="post" enctype="application/x-www-form-urlencoded">
<input type="text" name="message">
<button type="submit">Submit Normally</button>
<button type="submit" formenctype="text/plain">Submit as Plain Text</button>
</form>
When the second button submits the form, its formenctype value is used instead of the form's enctype value.
Common Mistakes
Do not forget enctype="multipart/form-data" when a form needs to upload files. Without multipart encoding, the selected file's contents are not submitted as file data.
Do not manually add a multipart boundary to the enctype attribute. The browser generates the appropriate boundary when it constructs the request.
Do not assume text/plain is a simpler replacement for normal form encoding. Its format is ambiguous and is generally unsuitable for automated processing.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
The enctype attribute on the <form> element is widely supported in current core browsers.
Checking Browser Support
For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.
Try the enctype Attribute
The example uses multipart/form-data with a file upload control to demonstrate the encoding type required when submitting files.
Summary
The HTML enctype attribute specifies how a form's data is encoded when submitted. The default is application/x-www-form-urlencoded, multipart/form-data is used when submitting files, and text/plain provides a human-readable but ambiguous format. A submit button can override the form's encoding type with the formenctype attribute.
