</>
ValidateHTML

Button Missing the type Attribute

When a <button> has no type attribute, HTML defaults it to type="submit". Inside a <form>, clicking it submits the form. That is rarely what a button labelled "Show more" or "Add row" is meant to do, and the bug only appears once the button ends up inside a form, often long after it was written.

Find this error in your own code. Paste your HTML or enter a URL, free and instant.Open the validator
49.6%
of sites tested

How common is this error?

We ran this validator over the home page of the Tranco top 5,000 websites in August 2026. 1,316 of the 2,655 sites we could reach hit it. That makes it the 3rd most common HTML problem we found, across 15,026 occurrences. See the full study.

Most frequent wording: <button> is missing recommended "type" attribute

Why It Matters

This is the single most common cause of a page that reloads or navigates when a button is clicked. In React and other frameworks the symptom is confusing: the click handler runs, state updates, then the form submits and the component remounts, wiping the change. It was found on 53% of the sites measured in our Tranco sample.

Common Causes

  • A shared Button component that forwards props but never sets a default type, so every instance inherits submit.
  • A button written outside a form, working correctly, that is later moved inside one during a refactor.
  • Copying markup from a design system example that omitted the attribute for brevity.

Code Examples

Invalid
<form action="/search">
  <input name="q">
  <!-- Defaults to type="submit": this clears the field AND submits -->
  <button onclick="clearField()">Clear</button>
  <button>Search</button>
</form>
Valid
<form action="/search">
  <input name="q">
  <!-- Explicit: does nothing but run its handler -->
  <button type="button" onclick="clearField()">Clear</button>
  <button type="submit">Search</button>
</form>

How to Fix

  • 1Add type="button" to every button that runs JavaScript rather than submitting a form. This is the right default for most buttons in a component library.
  • 2Add type="submit" to the one button that is meant to submit. Being explicit documents the intent for the next reader.
  • 3Use type="reset" only when you genuinely want to clear every field to its initial value. It is rarely what users expect.
  • 4Set the type in your shared Button component so the whole codebase inherits the correct default instead of relying on each call site.

Frequently Asked Questions

Is a button without type invalid HTML?
No. The attribute is optional and the markup is valid; the browser applies the default of type="submit". It is flagged as a best-practice warning rather than an error, because the behaviour it produces is almost never the one intended.
Why does my React button reload the page?
Because it has no type and sits inside a form. The click handler runs, then the browser performs the default submit, which reloads the page and discards the state you just set. Adding type="button" fixes it, as does calling event.preventDefault().
Does the default differ between <button> and <input type="button">?
Yes. <input> requires an explicit type and does nothing by default beyond what that type says, while <button> silently defaults to submit. That difference is the whole reason this warning exists.

Check Your HTML Now

Our validator detects this error automatically and shows the exact line number.

Open HTML Validator

Related HTML Errors

Missing Form Labels

A missing form label makes inputs unusable for screen readers and hurts usability. Learn how to properly associate a label with every input the accessible way.

Incorrect Tag Nesting

Incorrect HTML nesting makes browsers silently rewrite your DOM. Learn the nesting rules and fix p inside p, div inside span, and other broken structures.

Duplicate ID Attributes

A duplicate id breaks JavaScript, anchor links, and screen reader navigation. Learn how to find and fix duplicate id attributes in your HTML the right way.

← View all HTML errors