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
How to specify the HTTP method to use when sending form-data in HTML?
The method attribute in HTML forms specifies the HTTP method to use when sending form data to the server. This attribute determines how the browser packages and transmits the form data when the user submits the form.
Syntax
Following is the syntax for the method attribute −
<form action="URL" method="value"> <!-- form elements --> </form>
The value can be either get or post, with get being the default if not specified.
HTTP Methods
HTML forms support two primary HTTP methods −
GET Method
The GET method appends form data to the URL as query parameters. It is suitable for retrieving data and when form data is not sensitive. The data is visible in the browser's address bar and has length limitations.
POST Method
The POST method sends form data in the request body, making it invisible in the URL. It is ideal for sensitive data, large amounts of data, and operations that modify server-side resources.
Using GET Method
Example
Following example demonstrates a form using the GET method −
<!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 Term:</label>
<input type="text" id="query" name="query" value="HTML tutorials">
<br><br>
<label for="category">Category:</label>
<select id="category" name="category">
<option value="web">Web Development</option>
<option value="mobile">Mobile Development</option>
</select>
<br><br>
<input type="submit" value="Search">
</form>
</body>
</html>
When submitted, the form data appears in the URL as query parameters −
URL becomes: /search.php?query=HTML+tutorials&category=web
Using POST Method
Example
Following example shows a form using the POST method for user registration −
<!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="course">Select Course:</label>
<select id="course" name="course">
<option value="HTML" selected>HTML</option>
<option value="CSS">CSS</option>
<option value="JavaScript">JavaScript</option>
</select>
<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
With the POST method, form data is sent in the request body and does not appear in the URL, keeping sensitive information like passwords secure.
Example − File Upload with POST
Following example demonstrates file upload, which requires the POST method −
<!DOCTYPE html>
<html>
<head>
<title>File Upload Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Upload Document</h2>
<form action="/upload.php" method="post" enctype="multipart/form-data">
<label for="document">Select file:</label>
<input type="file" id="document" name="document" accept=".pdf,.doc,.docx">
<br><br>
<label for="description">Description:</label>
<textarea id="description" name="description" rows="4" cols="50"></textarea>
<br><br>
<input type="submit" value="Upload File">
</form>
</body>
</html>
Note − File uploads require method="post" and enctype="multipart/form-data" to handle binary file data correctly.
Comparison of GET and POST Methods
Following table compares the key differences between GET and POST methods −
| Feature | GET Method | POST Method |
|---|---|---|
| Data Location | Appended to URL as query string | Sent in HTTP request body |
| Data Visibility | Visible in browser address bar | Hidden from user |
| Data Size Limit | Limited by URL length (~2048 characters) | No practical limit |
| Security | Less secure, data exposed in logs | More secure for sensitive data |
| Bookmarking | Can be bookmarked and cached | Cannot be bookmarked |
| File Upload | Not supported | Supported with enctype="multipart/form-data" |
| Browser History | Parameters remain in history | Data not stored in history |
When to Use Each Method
Use GET when:
Requesting data from the server (searches, filters)
Data is not sensitive
Users might want to bookmark the result
Data size is small
Use POST when:
Submitting sensitive information (passwords, personal data)
Uploading files
Sending large amounts of data
Modifying data on the server
Conclusion
The method attribute determines how form data is transmitted to the server. Use GET for simple data retrieval and searches, and POST for sensitive data, file uploads, or when modifying server resources. Choose the appropriate method based on your security requirements and data handling needs.
301 Views
