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 use the formmethod attribute in HTML?
The formmethod attribute in HTML is used to override the default HTTP method specified in a form's method attribute. It is used specifically with <input> elements of type submit and image, allowing different submit buttons within the same form to use different HTTP methods (GET or POST).
Syntax
Following is the syntax for the formmethod attribute −
<input type="submit" formmethod="method" value="Submit">
Where method can be either "get" or "post".
Parameters
The formmethod attribute accepts the following values −
get − Appends form data to the URL as query parameters. Data is visible in the URL and limited in size.
post − Sends form data in the request body. Data is not visible in the URL and can handle larger amounts of data.
How It Works
When a form has a default method attribute set to one value (e.g., GET), individual submit buttons can override this behavior using the formmethod attribute. This allows multiple submission options within a single form, each handling data differently based on the specific action required.
Using formmethod with Submit Buttons
Following example demonstrates how to use the formmethod attribute with different submit buttons −
<!DOCTYPE html>
<html>
<head>
<title>HTML formmethod attribute</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Student Registration Form</h2>
<form action="/submit.php" method="get">
<label for="name">Student Name:</label><br>
<input type="text" id="name" name="name" style="margin: 5px 0; padding: 5px;"><br>
<label for="subject">Student Subject:</label><br>
<input type="text" id="subject" name="subject" style="margin: 5px 0; padding: 5px;"><br><br>
<input type="submit" value="Submit via GET" style="margin: 5px; padding: 8px 16px;">
<input type="submit" formmethod="post" formaction="/submit-post.php" value="Submit via POST" style="margin: 5px; padding: 8px 16px;">
</form>
</body>
</html>
In this example, the form's default method is GET, but the second submit button overrides this with POST method. The first button submits data as URL parameters, while the second sends data in the request body −
Student Registration Form Student Name: [text input field] Student Subject: [text input field] [Submit via GET] [Submit via POST]
Using formmethod with Image Buttons
The formmethod attribute also works with <input type="image"> elements −
<!DOCTYPE html>
<html>
<head>
<title>formmethod with Image Button</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Contact Form</h2>
<form action="/contact.php" method="get">
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" style="margin: 5px 0; padding: 5px;"><br>
<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="3" style="margin: 5px 0; padding: 5px;"></textarea><br><br>
<input type="submit" value="Send via GET" style="margin: 5px; padding: 8px 16px;">
<button type="submit" formmethod="post" style="margin: 5px; padding: 8px 16px;">Send via POST</button>
</form>
</body>
</html>
The form uses GET by default, but the button element with formmethod="post" will submit the form using POST method −
Contact Form Email: [email input field] Message: [textarea] [Send via GET] [Send via POST]
Comparison of GET vs POST Methods
Understanding when to use each method is important for proper form handling −
| GET Method | POST Method |
|---|---|
| Data appears in URL as query parameters | Data is sent in the request body (hidden) |
| Limited data size (URL length restrictions) | Can handle large amounts of data |
| Not suitable for sensitive information | Better for sensitive or private data |
| Can be bookmarked and cached | Cannot be bookmarked, not cached by default |
| Idempotent (safe for repeated requests) | Not idempotent (may modify server state) |
| Best for search forms, filters | Best for user registration, file uploads |
Browser Compatibility
The formmethod attribute is supported in HTML5 and works in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. It provides a standard way to handle multiple submission methods within a single form without requiring JavaScript.
Conclusion
The formmethod attribute allows individual submit buttons to override the form's default HTTP method, enabling flexible form submission options. Use GET for data retrieval and filtering, and POST for data modification and sensitive information. This attribute enhances user experience by providing context-appropriate submission methods within the same form.
236 Views
