Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Difference Between GET and POST Method in HTML
In HTML forms, the GET and POST methods determine how data is sent from the client to the server. The GET method appends form data to the URL as query parameters, while the POST method sends data in the request body. Understanding their differences is crucial for proper form handling and web security.
Syntax
Following is the syntax for using the GET method in HTML forms −
<form action="submit.php" method="get"> <!-- form elements --> </form>
Following is the syntax for using the POST method in HTML forms −
<form action="submit.php" method="post"> <!-- form elements --> </form>
GET Method
The GET method is primarily designed for retrieving data from the server. When a form uses GET, the form data is appended to the URL as query string parameters, making it visible in the browser's address bar.
Key characteristics of the GET method −
Parameters are placed in the URL as query strings
Main purpose is to retrieve or fetch data from the server
Results can be bookmarked since data is in the URL
Less secure as data is visible in the URL
Limited to ASCII characters only
URL length limitation of approximately 2048 characters
Data can be cached by browsers and proxy servers
Commonly used by search engines for queries
Idempotent − multiple identical requests have the same effect
Example − GET Method Form
<!DOCTYPE html>
<html>
<head>
<title>GET Method Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Search Form (GET Method)</h2>
<form action="/search.php" method="get">
<label for="query">Search Query:</label>
<input type="text" id="query" name="q" placeholder="Enter search term">
<br><br>
<label for="category">Category:</label>
<select id="category" name="category">
<option value="web">Web</option>
<option value="images">Images</option>
<option value="videos">Videos</option>
</select>
<br><br>
<input type="submit" value="Search">
</form>
<p><strong>Note:</strong> When submitted, the URL will look like: <br>
<code>/search.php?q=tutorials&category=web</code></p>
</body>
</html>
When this form is submitted with "tutorials" as the search term, the resulting URL becomes −
/search.php?q=tutorials&category=web
POST Method
The POST method is designed for sending data to the server to create or update resources. Form data is sent in the request body, making it invisible in the URL and more suitable for sensitive information.
Key characteristics of the POST method −
Parameters are sent in the request body, not in the URL
Main purpose is to submit data that modifies server state
Results cannot be bookmarked as data is not in the URL
More secure since data is not visible in the URL
Supports all character encodings including binary data
No practical limit on data size (server-dependent)
Data is not cached by default
Used for form submissions, file uploads, and data modifications
Not idempotent − multiple requests may have different effects
Example − POST Method Form
<!DOCTYPE html>
<html>
<head>
<title>POST Method Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>User Registration (POST Method)</h2>
<form action="/register.php" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>
<label for="bio">Bio:</label>
<textarea id="bio" name="bio" rows="4" cols="30" placeholder="Tell us about yourself"></textarea>
<br><br>
<input type="submit" value="Register">
</form>
<p><strong>Note:</strong> Form data is sent securely in the request body, not visible in the URL.</p>
</body>
</html>
When this form is submitted, the URL remains clean and the sensitive data is transmitted securely in the request body.
Example − File Upload with POST
POST method is essential for file uploads, which cannot be done with GET −
<!DOCTYPE html>
<html>
<head>
<title>File Upload Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>File Upload Form</h2>
<form action="/upload.php" method="post" enctype="multipart/form-data">
<label for="file">Choose file:</label>
<input type="file" id="file" name="uploadfile">
<br><br>
<label for="description">File Description:</label>
<input type="text" id="description" name="description">
<br><br>
<input type="submit" value="Upload File">
</form>
</body>
</html>
Note the enctype="multipart/form-data" attribute, which is required for file uploads and only works with the POST method.
Key Differences Between GET and POST
Following table summarizes the main differences between GET and POST methods −
| Aspect | GET Method | POST Method |
|---|---|---|
| Data Location | Appended to URL as query string | Sent in the request body |
| Visibility | Data visible in URL, browser history | Data hidden from URL |
| Security | Less secure, data exposed | More secure for sensitive data |
| Data Size Limit | Limited (~2048 characters) | No practical limit (server-dependent) |
| Data Type | ASCII characters only | Binary data, all character encodings |
| Caching | Can be cached by browsers | Not cached by default |
| Bookmarking | Results can be bookmarked | Cannot bookmark POST requests |
| Idempotent | Yes (same result for multiple requests) | No (may have side effects) |
| Primary Use | Retrieving/fetching data | Submitting/modifying data |
| File Upload | Not supported | Supported with multipart encoding |
When to Use Each Method
Use GET when:
Requesting data from the server (search queries, filtering)
The operation is idempotent (safe to repeat)
You want users to be able to bookmark the results
Data is not sensitive and can be visible in URLs
Use POST when:
Submitting data that changes server state (user registration, orders)
Handling sensitive information (passwords, personal data)
Uploading files or sending large amounts of data
The operation has side effects or modifies data
Conclusion
GET and POST methods serve different purposes in web forms. GET is ideal for data retrieval operations where parameters can be visible in the URL, while POST is essential for data submission, especially when handling sensitive information or large datasets. Choose the appropriate method based on the nature of your form and security requirements.
5K+ Views
