Understanding HTML Form Encoding: URL Encoded and Multipart Forms
Last Updated :
30 Jan, 2024
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 |
Represents a URL-encoded form. Default enctype for sending form data. |
multipart/form-data |
Represents a multipart form. Used for uploading files by the user. |
text/plain |
Represents a form introduced in HTML5 and used to send data without any encoding, preserving spaces. |
URL Encoded Forms:
URL Encoding is the process of converting a string into a valid URL format and the data that is submitted using this type of form encoding is URL encoded, as very clear from its name.
Example: This example illustrates the use of URL-encoded forms in an HTML document.
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>
|
Output:
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
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:
This form are basically used in contexts where the user needs files to be uploaded to the server. To convert the above form into a multipart form all you have to do is to change the enctype attribute of the form tag from application/x-www-form-urlencoded to multipart/form-data.
Example: This example illustrates the use of Multipart forms in an HTML document.
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>
|
Output:
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 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
It can be clearly seen from above in the query parameters and the form body that the spaces are replaced by ‘%20’.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...