Open In App

Explain the concept of URL Encoding & Describe the need for encoding in HTML

Improve
Improve
Like Article
Like
Save
Share
Report

The URL (Uniform Resource Locator) is used to identify an internet resource on the WWW (World Wide Web). The below example demonstrates a URL.

https://www.en.com:443/path/filename?r=1#fragment

This URL contains:

  • A protocol or scheme (https://)
  • A domain prefix(sub-domain) (www.)
  • A domain (en)
  • A top-level domain (.com)
  • A port (:443)
  • A filepath (/path)
  • A filename (filename)
  • A query string (?)
  • A parameters (r=1)
  • A fragment identifier (#fragment)

URL Encoding: When a request is made using the POST method then the data needs to be encoded that forms in some way. The encoding of URL refers to the sending of URLs in encoded form on the Internet and that can be done using ASCII character set. The URL needs conversion if it does not contain data in ASCII character set. So, URLs are formatted in such a manner that can be sent over an Internet. If URL contains spaces then it is to be replaced with (+) symbol or with %20 which is ASCII character set for space.

The encoding of URL input by your browser relies on the character-set of your page. UTF-8 is the default character-set of HTML5.

Need of encoding in HTML Form

The need for encoding arises because of the security concerns while processing the form input.

The encoding method of HTML form data is specified using ENCTYPE attribute of <form> tag. The ENCTYPE attribute specifies the method of encoding for the form data. There are two values to specify the encoding method-

  • application/x-www-form-urlencoded: It is the default value. If no value is specified for ENCTYPE attribute then it takes this value for the HTML form. The encoding process is performed before data is sent to the server as spaces are converted to (+) symbol and non-alphanumeric characters or special characters are converted to hexadecimal (0-9, A-F) values.

    Syntax:

    <form action="login.php" method="post" 
          enctype="application/x-www-form-urlencoded">
    </form>
  • multipart/form-data: It is another way of encoding the HTML form. It is specifically used when file uploading is required in HTML form. It sends the form data to a server in multiple parts because of the large size of the file.

    Syntax:

    <form action="login.php" method="post" 
          enctype="multipart/form-data">
    </form>

The last value of ENCTYPE attribute is text/plain which is not recommended as data is not encoded in this type.

Example: With ENCTYPE=”application/x-www-form-urlencoded”.

HTML




<!DOCTYPE html>
<html>
  
<body>
    <form action="login.php" method="POST" 
          enctype="application/x-www-form-urlencoded">
        <h2>URL Encoded Forms</h2>
        Username: <input type="text" 
                         name="username" 
                         value="Geeks for Geeks @" />
        <br><br>
        Password: <input type="text"
                         name="password" 
                         value="gfg" />
        <br><br>
        <input type="submit" value="Submit" />
    </form>
</body>
  
</html>


Output :

file:///C:/Users/Dell/Downloads/geek%20articles/post.html?name=GEEKS+FOR+GEEKS+%40+&password=GFG&submit=Submit

Example: With ENCTYPE=”multipart/form-data”

HTML




<!DOCTYPE html>
<html>
  
<body>
    <form action="login.php" method="POST" 
          enctype="multipart/form-data">
        <h2>URL Encoded Forms</h2>
        Username: <input type="text" name="username" />
        <br><br>
        Password: <input type="text" name="password" />
        <br><br>
        <p>Browse your file</p>
  
        <input type="file" name="upload"><br><br>
        <input type="submit" value="Submit" />
    </form>
</body>
  
</html>


Output: The server will process the request and displays the result with the boundary parameter of multipart/form-data. Here, the parts are delimited with a boundary delimiter “–“, and the value of the “boundary” parameter. The field gets some subheaders before its data like form-data; the field name, the filename, followed by the data.

Data is read by the server until the next boundary string. The browser needs to select a boundary that will not be displayed in any of the fields, this is the reason too that the boundary may vary between requests.



Last Updated : 02 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads