This is a very common question of beginner developers, why do we use enctype='multipart/form-data' tag within the HTML form tag? Sometimes, we forget to mention enctype multipart into the HTML form to upload files, image form, etc.
in this article, we’ll explore the use of enctype="multipart/form-data" in HTML form. It’s essential for uploading files through HTML forms, and it indicates to the browser that the form data will include binary data in a multipart format.
HTML Form With enctype
The HTML Form tag has enctype attribute to define the form-data that should be encoded when submitting it to the server. The enctype attribute can be used only if method="post" in the HTML form. There are three options available to send encoded form data to the server.The default is application/x-www-form-urlencoded.
The Syntax Of Form Enctype:
<form enctype="value"></form>
Option 1: Application/x-www-form-urlencoded
This is a default encoding type of form data when submitting a form. This option encoded All characters before form-data sent to the server and attached at the end of the URL.
How to use application/x-www-form-urlencoded
var1=val1&var2=val2
When you use application/x-www-form-urlencoded, the body of the HTTP message sent to the server in a single extensive query string. It consists of name/value pairs, with ampersand (&) used to separate them, and symbol (=) used to distinguish between names and values.
Option 2: Enctype multipart Form data
The enctype='multipart/form-data' is a very important option to send data to the server, this will not encoded form-data before being sent to the server as like application/x-www-form-urlencoded.
It uses the MIME stream to send form-data from client to the server. This form-encoded option is needed when you are sending file data from client to server like file upload.
How to use enctype multipart form-data
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>upload file</title> </head> <body> <form action="https://localhost:8000" method="post" enctype="multipart/form-data"> <p><input type="text" name="text1" value="text"> <p><input type="file" name="file1"> <p><button type="submit">Submit</button> </form> </body> </html>
Please make sure the server-side script that handles the form data must be capable of parsing and processing this encoding format..
Option 3: text/plain With enctype Form
The text/plain helps to send the form data as plain text without any additional encoding. This encoding type is used when you want to ensure that the data remains in its original, unaltered format.
The encoding text/plain is converted Spaces into "+" symbols, but no special characters are encoded.
If a form field has multiple values, these values are separated by line breaks (\n) in the request body.
How to use text/plain with in Html Form Enctype
<form method="post" enctype="text/plain" action="file2.php"> <input name="name" value="sh002.global.temp.domains/~jstutori" /> <textarea name="desc">Hello! I am desc</textarea> <input type="submit"> </form>
When the form is submitted, the data will be sent to the server as plain text, with fields separated by line breaks.
Output:
name=js-tutorials.com desc=Hello! I am desc
Conclusion:
The enctype attribute in HTML forms is a very common attribute, that helps to determine how data is encoded and transmitted to the server. We have learned various data types and structures: “application/x-www-form-urlencoded” is ideal for standard text data, while “multipart/form-data” is essential for file uploads, enabling binary data transmission, and “text/plain” preserves data format.
