HTML formmethod Attribute

What You’ll Learn

The formmethod attribute is a useful HTML feature that lets developers specify the HTTP method used when submitting a form. Applied to <button> or <input type="submit"> elements, it overrides the method on the parent <form> for that one submission.

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.

For example, a single form might offer “Preview” via GET (data visible in the URL for a read-only view) and “Save” via POST (data sent securely in the request body).

📝 Syntax

Add formmethod to a submit button with either get or post:

<form action="/submit" method="post">
  <input type="text" name="data">
  <button type="submit" formmethod="get">Submit with GET</button>
  <button type="submit" formmethod="post">Submit with POST</button>
</form>

Syntax Rules

• Valid on submit controls: <button type="submit">, <input type="submit">, and <input type="image">.
• Accepted values: get and post (case-insensitive in HTML).
• Overrides the parent form’s method only for that button’s submission.
• Works with formaction and formenctype for full per-button submission control.

💎 Values

The formmethod attribute accepts the following values:

• get — Submits form data as URL query parameters. Generally used for retrieving or filtering data. Bookmarkable and cacheable.
• post — Submits form data in the HTTP request body. Commonly used for data that should not appear in the URL, such as passwords or large payloads.

<!-- GET: /search?q=html -->
<button type="submit" formmethod="get">Search</button>

<!-- POST: data in request body -->
<button type="submit" formmethod="post">Save</button>

Applicable Elements

Form method vs formmethod

GET vs POST

Examples Gallery

GET and POST buttons in one form, a preview-vs-save pattern, and dynamic formMethod with JavaScript.

<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>

<form action="/articles" method="post">
  <textarea name="body" required></textarea>

  <button type="submit" formmethod="get" formaction="/articles/preview">Preview</button>
  <button type="submit">Save</button>
</form>

<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>

♿ Accessibility

• Label buttons clearly — When multiple submit buttons use different methods, names like “Preview” and “Save” must explain the outcome.
• Warn about destructive POST actions — Users should understand which button changes data vs reads it.
• Do not hide method differences — GET submissions expose data in the URL; make that clear if sensitive fields are involved.
• Provide confirmation for irreversible actions — Even with correct method attributes, confirm deletes and major changes.

💡 Best Practices