Understanding HTML Form Encoding: URL Encoded and Multipart Forms - GeeksforGeeks

08 Mar, 2021
HTML forms contain two encodings, the URL Encoded Forms and the multipart Forms. The encoding in an HTML form is determined by an attribute named ‘enctype‘. This attribute can have three values:
application/x-www-form-urlencoded: This value represents a URL (Uniform Resource Locator) encoded form. By default, it is assigned to the enctype attribute.
multipart/form-data: This value represents a multipart form. It is used to upload files by the user.
text/plain: This value represents a form that is newly introduced in the latest HTML5 which is used to send the data without any encoding.
URL Encoded Forms: The data that is submitted using this type of form encoding is URL encoded, as very clear from its name.
Example:
HTML
<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>URL Encoded Forms</title>  </head>  <body>    <form      action="/urlencoded?firstname=Geeks&lastname=forGeeks"      method="POST"      enctype="application/x-www-form-urlencoded">      <input type="text" name="username" value="GeeksforGeeks" />      <input type="text" name="password" value="GFG@123" />      <input type="submit" value="Submit" />    </form>  </body></html>
The above form is submitted to the server using the POST request, suggesting that it’s a body and the body in this form is URL encoded. It is created by an extended string of (name, value) pairs. Each pair of these strings are separated by a &(ampersand) sign and the name is separated by an = (equals) sign from the ‘value’.
For the above form, the (name, value) pairs are as follows.username=GeeksforGeeks&password=GFG@123
For the above form, the (name, value) pairs are as follows.
username=GeeksforGeeks&password=GFG@123
Some parameters in the query that are passed in the URL action are as follows./urlencoded?firstname=Geeks&lastname=forGeeks
Some parameters in the query that are passed in the URL action are as follows.
/urlencoded?firstname=Geeks&lastname=forGeeks
It is clearly visible that the URL encoded body and the query parameters look similar. In fact, they are similar.
Multipart Forms: These types of forms are used when the user uploads some files on the server.
Example:
HTML
<!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <title>Multipart Forms</title>  </head>  <body>    <form      action="/multipart?firstname=Geeks for&lastname=Geeks"      method="POST"      enctype="multipart/form-data">      <input type="text" name="username" value="Geeks for Geeks" />      <input type="text" name="password" value="GFG@123" />      <input type="submit" value="Submit" />    </form>  </body></html>
In the above form, some spaces are introduced in the username value and the action value in the form is changed to ‘multipart/form-data‘ to use the functionality of multipart forms.
For the above form, the (name, value) pairs are as followsusername=Geeks%20for%20Geeks&password=GFG@123
For the above form, the (name, value) pairs are as follows
username=Geeks%20for%20Geeks&password=GFG@123
Some parameters in the query that are passed in the URL action are as follows./multipart?firstname=Geeks%20for%20&lastname=Geeks
Some parameters in the query that are passed in the URL action are as follows.
/multipart?firstname=Geeks%20for%20&lastname=Geeks
It can be clearly seen from above in the query parameters and the form body that the spaces are replaced by ‘%20’.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Picked
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
REST API (Introduction)
Design a web page using HTML and CSS
Form validation using jQuery
How to place text on image using HTML and CSS?
How to auto-resize an image to fit a div container using CSS?
Top 10 Front End Developer Skills That You Need in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Convert a string to an integer in JavaScript