What is the default type for a button in a form?

Inside a form, a button defaults to type='submit'. Set type explicitly to avoid accidental submissions.

When should I use input type='submit' instead of button?

Use button for most modern forms because it can contain richer content. input type='submit' is still valid for simple submit controls.

Can a form have multiple submit buttons?

Yes. Each submit button can have its own name and value, so the backend can tell which action was chosen.

Should I disable the submit button after click?

You can disable it while an AJAX request is in progress, but keep an accessible status message so users know what is happening.

HTML Button in Forms: Submit and UX Guide

Buttons look simple, but they control the most important moment in a form: submission. A confusing button can cause accidental submissions, duplicate submissions, or no submission at all.

The key is to be explicit. Use the correct button type, write action-specific labels, provide loading feedback for JavaScript submissions, and keep the form usable without JavaScript when possible.

Basic submit button

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3

4
  <label for="email">Email</label>
5
  <input type="email" id="email" name="email" required />
6

7
  <button type="submit">Subscribe</button>
8
</form>

Always include type="submit" on submit buttons. It documents the behavior and avoids surprises when buttons are moved around later.

Button types

Type	Behavior
`submit`	Submits the form
`button`	Does nothing by default, useful for JavaScript actions
`reset`	Resets all fields to their initial values

Inside a form, <button> defaults to submit. That means this button submits the form even though it may look like a secondary action:

1
<button>Preview</button>

Make non-submit actions explicit:

1
<button type="button">Preview</button>

Use clear action labels

Button labels should describe the result.

Weak label	Better label
Submit	Send message
Continue	Continue to payment
OK	Save preferences
Click here	Download quote

For forms, the best labels usually start with a verb: send, save, create, request, subscribe, download, upload.

Multiple submit buttons

Forms can include more than one submit action. Give each button a name and value so the backend can see which one was clicked.

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3

4
  <label for="email">Email</label>
5
  <input type="email" id="email" name="email" required />
6

7
  <button type="submit" name="intent" value="save_draft">Save draft</button>
8
  <button type="submit" name="intent" value="send_request">Send request</button>
9
</form>

If the visitor clicks “Send request”, the backend receives intent=send_request.

Prevent duplicate AJAX submissions

For JavaScript-enhanced forms, disable the submit button while the request is in progress and expose status text with aria-live.

1
<form id="contactForm" action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <input type="email" name="email" required />
4
  <textarea name="message" required></textarea>
5
  <button type="submit" id="submitButton">Send message</button>
6
  <p id="formStatus" aria-live="polite"></p>
7
</form>
8

9
<script>
10
  const form = document.getElementById("contactForm");
11
  const button = document.getElementById("submitButton");
12
  const status = document.getElementById("formStatus");
13

14
  form.addEventListener("submit", async (event) => {
15
    event.preventDefault();
16
    button.disabled = true;
17
    status.textContent = "Sending...";
18

19
    try {
20
      const response = await fetch(form.action, {
21
        method: "POST",
22
        body: new FormData(form),
23
      });
24

25
      status.textContent = response.ok ? "Message sent." : "The message could not be sent.";
26
    } finally {
27
      button.disabled = false;
28
    }
29
  });
30
</script>

Do this only when JavaScript owns the submission. A regular HTML form does not need this code.

Style disabled buttons accessibly

Disabled buttons should look disabled, but the text still needs enough contrast to be readable.

1
button {
2
  border: 0;
3
  border-radius: 8px;
4
  padding: 12px 16px;
5
  background: #059669;
6
  color: white;
7
  font-weight: 700;
8
}
9

10
button:disabled {
11
  cursor: not-allowed;
12
  opacity: 0.65;
13
}

Avoid hiding the button or changing its label to only a spinner. If you use an icon or spinner, keep text available for screen readers.

Complete backend-ready form

1
<form action="https://api.formsfort.com/submit" method="POST">
2
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY" />
3
  <input type="hidden" name="subject" value="New demo request" />
4

5
  <label for="email">Work email</label>
6
  <input type="email" id="email" name="email" autocomplete="email" required />
7

8
  <label for="message">What should we help with?</label>
9
  <textarea id="message" name="message" rows="5" required></textarea>
10

11
  <input type="checkbox" name="botcheck" style="display:none" />
12

13
  <button type="submit">Request demo</button>
14
</form>

This form works on static hosting, has an explicit submit action, and sends clear field names to the backend.

Use this with the HTML input fields guide, HTML textarea guide, and HTML form validation guide.

HTML buttons in forms: submit behavior, types, and UX

Basic submit button

Button types

Use clear action labels

Multiple submit buttons

Prevent duplicate AJAX submissions

Style disabled buttons accessibly

Complete backend-ready form

Frequently asked questions

Ready to add forms to your static site?

Basic submit button

Button types

Use clear action labels

Multiple submit buttons

Prevent duplicate AJAX submissions

Style disabled buttons accessibly

Complete backend-ready form

Related guides

Frequently asked questions

Ready to add forms to your static site?