**`<button>`** defaults to **`type="submit"`** when placed inside a `<form>` — meaning a plain `<button>Click</button>` with no explicit type will submit the enclosing form, which surprises many developers. Use `type="button"` for a button that should do nothing on its own except trigger JavaScript (e.g. via `onclick` or `addEventListener`), and `type="reset"` to clear the form back to its default values. Unlike `<input type="submit">`, a `<button>` can contain rich content — icons, nested `<span>`s, images — not just plain text.

1Understanding <button>

`<button>` defaults to `type="submit"` when placed inside a <form> — meaning a plain <button>Click</button> with no explicit type will submit the enclosing form, which surprises many developers. Use type="button" for a button that should do nothing on its own except trigger JavaScript (e.g. via onclick or addEventListener), and type="reset" to clear the form back to its default values. Unlike <input type="submit">, a <button> can contain rich content — icons, nested <span>s, images — not just plain text.

💡

Inside a form, always set an explicit type on every <button> — forgetting it on a button meant for a JS action (like 'Add another item') will accidentally submit the whole form when clicked.

editor.html

<form>
  <input type="text" name="item">
  <button type="button" onclick="addItem()">Add Item</button>
  <button type="submit">Save All</button>
</form>

localhost:3000

2Practical Example

Here is a real-world application of <button> showing how it is used in production HTML.

editor.html

<!-- A button with an icon and text, only possible with <button>, not <input> -->
<button type="submit">
  <span class="icon">✓</span> Confirm Order
</button>

localhost:3000

3Best Practices

Follow these guidelines when working with <button>:

1. Always set an explicit type (submit, reset, or button) on every <button>, never rely on the default

2. Use type="button" for anything driven purely by JavaScript, not form submission

3. Prefer <button> over <input type="submit"> when you need icons or richer content inside it

⚠️

Tip: Inside a form, always set an explicit type on every <button> — forgetting it on a button meant for a JS action (like 'Add another item') will accidentally submit the whole form when clicked.

editor.html

<form>
  <input type="text" name="item">
  <button type="button" onclick="addItem()">Add Item</button>
  <button type="submit">Save All</button>
</form>

localhost:3000

Examples

Example 01Basic Usage

<form>
  <input type="text" name="item">
  <button type="button" onclick="addItem()">Add Item</button>
  <button type="submit">Save All</button>
</form>

Example 02Advanced Example

<!-- A button with an icon and text, only possible with <button>, not <input> -->
<button type="submit">
  <span class="icon">✓</span> Confirm Order
</button>

Best Practices

Always set an explicit type (submit, reset, or button) on every
Use type="button" for anything driven purely by JavaScript, not form submission
Prefer

Interview Question

What happens if you forget to set type="button" on a <button> that's only meant to trigger a JavaScript action inside a form?▼

Hint: Think about the default type value when a button is inside a <form>.

A <button> with no explicit type defaults to type="submit" when it's inside a <form>. So a button meant only to run some JavaScript (like adding another row to a dynamic list) would instead submit — and likely reload or navigate away from — the entire form the moment it's clicked, which is a very common and confusing bug caused simply by omitting an explicit type="button".

Exercises

EasyPractice using <button> in a real scenario.

View Solution

<form>
  <input type="text" name="item">
  <button type="button" onclick="addItem()">Add Item</button>
  <button type="submit">Save All</button>
</form>

Frequently Asked Questions

What happens if you forget to set type="button" on a <button> that's only meant to trigger a JavaScript action inside a form?▼

Related Functions

form-tagSubmitReset