Skip to content
Related Articles

Related Articles

Improve Article

Understanding HTML Form Encoding: URL Encoded and Multipart Forms

  • Last Updated : 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
  • 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 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’.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :