HTML formmethod Attribute

Posted in HTML Tutorial

Updated on Oct 29, 2024

By Mari Selvan

👁️ 53 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The formmethod attribute is a useful feature in HTML that allows developers to specify the HTTP method that should be used when submitting a form. This attribute can be applied to form elements like <button> and <input type="submit"> to override the method specified in the <form> tag.

Understanding how to use the formmethod attribute can help you manage form submission behaviors more effectively.

🎯 Purpose of formmethod

The formmethod attribute is designed to give developers control over the HTTP method used to submit a form on a per-button basis. This is particularly useful when you have multiple submit buttons in a form and want each to trigger a different type of request.

💎 Values

The formmethod attribute accepts the following values:

GET: Submits the form data as URL parameters. This method is generally used for retrieving data.
POST: Submits the form data within the body of the request. This method is commonly used for submitting data that should not be displayed in the URL.

📄 Implementation Example:

Here's a simple example demonstrating how to use the formmethod attribute in an HTML form:

index.html

Copied

<form action="/submit" method="POST">
  <label for="data">Enter Data:</label>
  <input type="text" id="data" name="data">

  <button type="submit" formmethod="GET">Submit with GET</button>
  <button type="submit" formmethod="POST">Submit with POST</button>
</form>

🧠 How it Works

In this example, clicking the "Submit with GET" button will submit the form using the GET method, while clicking the "Submit with POST" button will submit the form using the POST method, regardless of the method specified in the <form> tag.

🔄 Dynamic Values with JavaScript

You can also dynamically set the formmethod attribute using JavaScript. This allows you to change the form submission method based on certain conditions or user interactions. Here's an example:

index.html

Copied

<form action="/submit" method="POST" id="dynamicForm">
  <label for="dynamicData">Enter Data:</label>
  <input type="text" id="dynamicData" name="dynamicData">

  <button type="button" onclick="setFormMethod('GET')">Set Method to GET</button>
  <button type="button" onclick="setFormMethod('POST')">Set Method to POST</button>
  <button type="submit" id="submitButton">Submit</button>
</form>

<script>
  function setFormMethod(method) {
    document.getElementById("submitButton").formMethod = method;
  }
</script>

🧠 How it Works

In this script, clicking the "Set Method to GET" button will set the form submission method to GET, and clicking the "Set Method to POST" button will set it to POST. The submit button will then submit the form using the dynamically set method.

🏆 Best Practices

Use the formmethod attribute to control form submission methods for different buttons within the same form.
For forms that require different handling methods, leveraging formmethod can simplify your form logic and improve maintainability.
Always ensure that your form handling on the server side is capable of processing requests sent via both GET and POST methods if you allow both.

🎉 Conclusion

The formmethod attribute is a powerful tool for managing form submission behaviors in HTML. By using this attribute, you can specify different HTTP methods for form submissions on a per-button basis, enhancing the flexibility and functionality of your forms.

Additionally, dynamic control with JavaScript adds further customization capabilities.