HTML Form Not Submitting (tested)

A form that silently refuses to submit — no console error, no network request — is almost always a button problem, not a JavaScript problem. We reproduced the two real causes in headless Chromium: the <button> default-type gotcha, and a submit button placed outside its <form> element.

1. Reproduced: a bare <button> submits by default — many people assume the opposite

<form action="/submitted-a" method="get">
  <input name="x" value="1">
  <button>Go</button>
</form>

Clicking that button navigated the page to /submitted-a?x=1. We confirmed it in headless Chromium: a <button> with no type attribute defaults to type="submit" per the HTML spec, full stop. There's no framework-neutral case where a plain <button> inside a <form> defaults to anything else.

2. Reproduced: the actual bug — someone adds type="button" out of habit

<form action="/submitted-b" method="get">
  <input name="x" value="1">
  <button type="button">Go</button>
</form>

Same markup, one attribute added. We clicked it in the same test: the page stayed on the form page — no navigation, no submission, no error. This is the actual real-world cause behind most "my form won't submit, no console error" reports: a developer (often out of muscle memory from a JS framework, a CSS reset, or copy-pasted code where the button also had an onClick handler) explicitly set type="button", which tells the browser "this button does nothing form-related, ever." It silently disables the one control meant to submit the form, and because that's working exactly as specified, the browser has nothing to warn you about.

Fix: remove the type="button" attribute (or change it to type="submit") on the control that's supposed to submit the form. Only use type="button" on controls that are genuinely not supposed to submit — e.g. a button wired to its own JS handler that calls form.requestSubmit() itself.

3. Reproduced: a submit button outside the <form> does nothing

<form id="fc" action="/submitted-c" method="get"><input name="x" value="1"></form>
<button type="submit">Go</button>

This button is visually next to the form but is not a descendant of it. Clicking it: no navigation, no submission. The button has no form owner, so type="submit" has nothing to submit.

4. Reproduced: the fix — the form="id" attribute

<form id="fd" action="/submitted-d" method="get"><input name="x" value="1"></form>
<button type="submit" form="fd">Go</button>

Identical layout, one added attribute. Clicking it navigated to /submitted-d?x=1, confirmed. The form="fd" attribute explicitly associates a button (or input, select, etc.) with a form by ID, regardless of where it sits in the DOM — this is the standard, spec-defined way to put submit controls outside a <form> (common in modal dialogs, sticky footers, or multi-column layouts) and have them still work.

5. Checklist

If your form submits fine on click but not when the user presses Enter, that's a different, spec-defined rule — see HTML Form Not Submitting on Enter Key.

Frequently asked questions

Why does my submit button do nothing, with no console error?

We reproduced the two most common causes. First: the button has type="button" instead of the default type="submit" — often added out of habit — which tells the browser never to submit on click; removing that attribute fixed it in our test. Second: the button is not a DOM descendant of the <form> element, so it has no form to submit; adding form="theFormId" to the button fixed that case.

Does a <button> default to type="submit" or type="button"?

We confirmed type="submit" is the default for any <button> inside a <form>, per the HTML spec — clicking a type-less button navigated to the form's action URL in our test. There is no standard case where it defaults to type="button"; if a button isn't submitting, something (a reset, a framework, or an explicit attribute) set type="button" on it.

Can a submit button outside the <form> tag still work?

Yes — we tested this directly. A button outside the <form> element with no association did nothing on click. The same button with a form="theFormId" attribute, pointing at the form's id, submitted it correctly, regardless of where the button sits in the page layout.

Why did my form stop submitting after I added an onClick handler to the button?

Not measured here directly, but it follows from case 2: many onClick handlers are paired with an explicit type="button" (common in React/Vue boilerplate) to stop the native submit so the handler can run custom logic instead. If you want both the handler and a real submission, keep type="submit" and call event.preventDefault() only when you need to stop it, or call form.requestSubmit() from the handler.

Is there a console warning when type="button" blocks a submit?

No. We confirmed no error, warning, or network request appears — the browser treats type="button" exactly as specified, so there's nothing to warn about. This is why the bug is easy to miss: everything looks like it's wired up correctly in the markup.

Written with AI assistance. Measured on 2026-10-03 with headless Chromium 153.0.8010.12 (Playwright) on a real Linux box. Each case is a real HTML form submitted with a real click or Enter keypress; submission was confirmed by checking whether the page actually navigated to the form's action URL, not by inspecting markup. PlainHeaders is our extension; HTML is free.