by GET Method in HTML
GET Method in HTML is used primarily for retrieving data from a specified resource. When you use the GET method in an HTML form or through a hyperlink, the data you want to retrieve is appended to the URL as query parameters. This makes GET visible and bookmarkable, as the query strings appear directly in the web browser’s address bar. Typically, the GET method is used for actions that do not cause changes, such as searching or filtering data. It is simple and fast but has limitations on the amount of data that can be sent due to URL length constraints. It is also less secure for sensitive data, as the parameters are exposed in the URL.
Functions of GET Method in HTML:
-
Request Data:
GET is used to request data from a specified resource or server.
-
Retrieve Viewable Data:
It retrieves data that can be safely and idly viewed without causing any change on the server.
-
Bookmark Pages:
Pages accessed with GET can be bookmarked because the URL contains all necessary parameters.
-
Data in URL:
Data sent using GET is appended to the URL, encoded as name/value pairs.
-
Use in Caching:
Responses to GET requests are cacheable, improving the efficiency of browsing by storing the received data.
-
Idempotent Requests:
GET requests are meant to be idempotent, meaning multiple identical requests should result in the same response without side-effects.
-
History/Log Maintenance:
URLs with GET parameters can be stored in browser history and server logs, easily keeping a record of the transactions.
-
Limited Data Length:
The amount of data that can be sent in a GET request is limited to what can be included in the URL, which varies by browser but is typically less than 2048 characters.
Example of GET Method in HTML:
Here’s a simple example demonstrating how to use the GET method in an HTML form to submit user input and append the data to the URL:
<!DOCTYPE html>
<html>
<head>
<title>Sample GET Form</title>
</head>
<body>
<h1>User Information Form</h1>
<!– This form uses the GET method –>
<form action=”/submit_user_info” method=”get”>
<label for=”username”>Username:</label>
<input type=”text” id=”username” name=”username”><br><br>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email”><br><br>
<button type=”submit”>Submit</button>
</form>
</body>
</html>
Explanation
- Form Tag:
<form> element starts with the attribute method=”get” specifying that the GET method will be used when the form is submitted.
-
Action Attribute:
The action attribute in the form specifies the URL to which the form data should be sent. In this example, it’s /submit_user_info, which would be appended with the form data in the URL after submission.
-
Input Fields:
The form contains two input fields for username and email. Each input field has a name attribute, which identifies the data in the URL when the form is submitted.
-
Submit Button:
Pressing the submit button sends the form data to the specified URL using the GET method.
Resulting URL
After filling out this form with a username “exampleuser” and an email “user@example.com” and hitting submit, the browser would navigate to a URL like this:
http://www.yourwebsite.com/submit_user_info?username=exampleuser&email=user@example.com
POST Method in HTML
POST method in HTML is used to send data to a server to create/update a resource. Unlike the GET method, data sent via POST is part of the request body, not the URL, making it more secure and capable of sending large amounts of data. POST is commonly used for form submissions where the data includes sensitive or personal information, as it does not display this data in the URL. Additionally, because the data does not appear in the URL, POST requests cannot be bookmarked. This method is particularly suited for actions that result in changes on the server, such as uploading a file, updating a database, or submitting completed forms.
Functions of POST Method in HTML:
-
Data Submission:
Transmits data to a server to be processed. Data sent via POST is not visible in the URL, making it more secure for sensitive information.
-
Handling Form Data:
Commonly used to handle form submissions, such as user registrations, logins, and data entry forms.
-
Supports Large Data:
Suitable for large quantities of data as it does not have size limitations inherent in the URL line, unlike GET.
-
Secure Transactions:
More secure than GET because the submitted data is not stored in browser history or server logs in the clear.
-
Binary Data Handling:
Capable of submitting binary data, including files and images, alongside text.
-
No Data Cache:
Browsers do not cache data submitted through POST requests without explicit cache controls.
-
Modified Server State:
Generally used when the result of the request will change the state of the server, like updating a database.
- Bookmarking:
Results of POST requests are not bookmarkable, unlike GET requests.
Example of POST Method in HTML:
This example includes a basic form for user registration, which submits data such as username and password to a server-side script (submit.php) using the POST method. This method ensures that sensitive information is not visible in the URL.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>User Registration</title>
</head>
<body>
<h2>Register User</h2>
<form action=”submit.php” method=”POST”>
<label for=”username”>Username:</label><br>
<input type=”text” id=”username” name=”username” required><br>
<label for=”password”>Password:</label><br>
<input type=”password” id=”password” name=”password” required><br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
Explanation:
-
Form Tag:
The form element has an action attribute that points to submit.php, which is the server-side script that will process the form data.
-
Method Attribute:
method=”POST” attribute specifies that the form data should be sent as a POST request.
-
Input Fields:
The form includes username and password fields, where data is entered by the user. The type=”password” for the password input ensures that characters entered are obscured.
-
Submit Button:
The submit button is used to send the form data to the server.
Key differences between GET and POST Method in HTML
| Aspect | GET Method | POST Method |
| Data visibility | Data visible in URL | Data not visible in URL |
| Bookmarkability | Can bookmark with data | Cannot bookmark with data |
| Data size limitation | Limited (depends on browser) | No limit (depends on server) |
| Use case | Retrieval actions | Data submission/updates |
| Idempotence | Idempotent (safe) | Not idempotent |
| Caching | Can be cached | Typically not cached |
| Data type | Only ASCII characters | No restriction (binary safe) |
| History | Parameters saved in history | Parameters not saved in history |
| Sensitivity of data | Not suitable for sensitive data | Suitable for sensitive data |
| TCP/IP packet number | Fewer packets | More packets |
| Impact on server state | No effect | Can change server state |
| Accessibility by API | Easily accessed | Accessible via input stream |
| Encoding type | application/x-www-form-urlencoded | multipart/form-data or similar |
| Security | Less secure | More secure |
| Recommended for large data transfer | Not recommended | Recommended |
Key Similarities between GET and POST Method in HTML
-
Basic Function:
Both GET and POST are methods for HTTP requests aimed at submitting data to a server. They are part of the HTTP protocol used widely in web forms and API calls.
-
Part of HTTP Protocol:
As part of the HTTP standard, both methods are used to communicate between client and server over the web.
-
Can Carry Data:
Each method is capable of carrying request data to the server, although through different means (URL parameters for GET and message body for POST).
-
Usage in Forms:
Both methods can be specified in HTML forms to define how data should be sent to the server upon form submission.
-
Response Handling:
Both methods receive a response from the server after making a request, which can include status codes, data, or redirects, depending on the server’s response to the initial request.
-
Support Across Browsers:
All web browsers support GET and POST, making them universally applicable for web development.
-
Security Measures Required:
Both methods require proper security measures to be handled safely. While POST is generally more secure due to its non-visible data transfer, both are susceptible to various security risks like SQL injection, CSRF, and others without proper handling.
-
Can Trigger Server-side Actions:
Both GET and POST can be used to trigger server-side scripts, which then process the data sent by these methods and perform actions like database queries, page updates, or other operations based on the received data.
