GET and POST Method in HTML with Examples

Here’s everything you need to know about GET and POST Method in HTML and some typical Examples.
GET and POST Method

Hello guys! In this article, I’m going to explain to you what “Get and POST Method means in HTML with some examples. In HTML, the GET and POST methods are the two main ways to send data from a web form to a server. They work as part of the HTTP protocol, which handles data exchange between clients (like web browsers) and servers.

The HTTP methods declare which action is to be carried out on the data that is submitted to the server. The methods attribute form element which specifies how the data is sent to the server. HTTP Protocol provides several methods, and the HTML Form element is able to use two methods to send user data:

1. Get Method

The Get Method is used to request data and resources from a server. With GET, the data you send is included in the URL itself.

For Example:

<form method="get" action="www.lenance.com.ng/search">
  <input type="search" name="location" placeholder="Search.." />
  <input type="submit" value="Go" />
</form>

When we submit the above form by entering Nigeria in the input field, the request sent to the server will be www.lenance.com.ng/search/?location=Nigeria

As you can see, Form data is appended to the URL as a query string, meaning it appears in the address bar. The HTTP GET method adds the query string at the end of the URL to send data to the server. The query string is in the form of key-value pair followed by ? symbol.

From the URL, the server can parse the user-submitted value where: key - location and value - California

Another typical example is if you submit a form by entering John’s age to lenance.com.ng/form, the data might look like this in the URL: lenance.com.ng/form?name=John&age=30.

The GET Method is best for retrieving data without making changes on the server. It’s often used for search queries or filter parameters.

Note: If there is more than one query, the query string will be separated by a & symbol.

Limitations

Data is visible in the URL, so it’s not suitable for sensitive information. Another thing is that there’s limited data capacity (typically around 2,048 characters) due to URL length restrictions.

2. POST Method

The POST Method, or HTTP POST Method, is used to send data to a server to create or update resources. With POST, the data is included in the body of the request, not in the URL.

For Example:

<form method="post" action="www.lenance.com.ng/user">
    <label for="firstname">First name:</label>
    <input type="text" name="firstname" /><br />
    <label for="lastname">Last name:</label>
    <input type="text" name="lastname" /><br />
    <input type="submit" />
</form>

When the Form is submitted, it will add the user input data to the body of the request sent to the server. The request would look like this:

POST /user HTTP/2.0
Host: www.lenance.com.ng
Content-Type: application/x-www-form-urlencoded
Content-Length: 33
firstname=Robin&lastname=Williams

The amazing part of the HTTP POST Method is that Form data is sent in a hidden format that doesn’t appear in the URL. This makes POST more secure for transferring sensitive information. Meanwhile, the sent data can be checked using special tools like the browsers' dev tools.

Limitations

In a situations where data changes need to happen on the server, like submitting a registration form, logging in, or uploading files, POST Method is takes the lead.

However, do understand that POST Method can’t be bookmarked or shared because the data isn’t in the URL. It may also take longer than GET Method due to extra processing by the server.

The Bottom Line

GET Method vs POST Method

Aspect GET POST
Data Visibility Data is displayed in the URL. Data is hidden from the URL.
Bookmarking Can be bookmarked. Cannot be bookmarked.
Caching Can be stored in cache. Cannot be stored in cache.
Character Limit Limited to 2048 characters. No specific character limit.
Allowed Characters Only allows ASCII characters. Supports all character types.

Choosing Between GET and POST?

In general, use GET for retrieving data or for non-sensitive information, especially when you need to share or bookmark the link, and use POST for sending sensitive data, making changes, or uploading large amounts of data.

About the author

Temmy Samuel
Founded Mainwave Digital Media, Temmy Samuel is a financial advisor and journalist, blending financial expertise with storytelling skills to simplify complex financial topics for readers and clients alike. Learn More About Temmy Samuel

Post a Comment