Easy Examples of GET and POST Method in HTML

GET and POST Method in HTML Examples

HTML provides two commonly used methods for data transmission: GET and POST. So, in this article, we will see how to use the get and post method in HTML with examples.

What is the GET method?

It is primarily used to retrieve data from a server. When a user submits a form or clicks a link that employs the GET method, the data is appended to the URL as query parameters. These parameters are visible in the browser’s address bar, making them less secure for sensitive data.

What is the POST method?

It is designed for sending data to the server for processing or storage. Unlike the GET method, the data submitted through POST is not visible in the URL, enhancing security. POST requests are not cached by browsers and are recommended for operations that modify the server’s state.

GET vs POST method

GET Method POST Method
GET parameters are visible in the URL. POST data remains hidden in the request body.
GET has limitations on the amount of data that can be sent. POST allows larger payloads.
GET requests are typically cached by browsers. POST requests are not.
GET requests with sensitive data can appear in the browser’s history. POST requests are not visible.

 

Examples of GET and POST methods

GET method:

If we have used the get method in the form, then the values ​​given by the user will be displayed in the URL after submission. If we don’t use the ‘method‘ attribute on the form, it defaults to the value “get”. We should not take bulk values ​​through the get method. We should not take password-related information ​​through the get method because the password is one of the user’s private things, it will be public if we use the get method.

READ ALSO  2 Simple Methods to Extract Number from String in JavaScript

Example:

<form action="search.php" method="GET">
  <input type="text" name="query" placeholder="Enter your search query">
  <input type="submit" value="Search">
</form>

In this example, a search form is created where users can enter their queries. When the form is submitted, the GET method is used to send the query as a parameter in the URL. The server can then process the query and return relevant search results.

In the output below, after submitting “best laptops” in the search box, the output is displayed as “query=best+laptops”.
Output:

file:///C:/Users/ADMIN/Desktop/HTML/search.php?query=best+laptops

POST method

We should set the value of the form ‘method’ attribute to POST, if you don’t provide any value ‘GET’ method will work. We can take bulk values through this ‘POST’ method.POST method is slower than GET, so it is secure data.

Example:

<form action="register.php" method="POST">
  <input type="text" name="username" placeholder="Username">
  <input type="password" name="password" placeholder="Password">
  <input type="email" name="email" placeholder="Email">
  <input type="submit" value="Register">
</form>

In this example, a user registration form is created. When the user submits the form, the POST method is used to securely send the form data (username, password, and email) to the server. The server-side script, “register.php,” can then process the data and create a new user account.

You can check your submitted data information after registering by following this navigation, right click > inspect > network > register.php > payload.

 get and post method in html examples

Leave a Reply