button

Understand how the <button> element works, specifically why its default behavior inside forms can cause unexpected page reloads.

What it is

The <button> element represents a clickable button. Unlike <input type="submit">, which is strictly for submitting data, <button> is versatile and can trigger JavaScript actions, submit forms, or reset fields. The critical mental model to grasp is that every button has a type. If you do not explicitly define one, the browser assumes a specific default behavior based on context.

Why it matters

• Prevents accidental submissions: Knowing the default prevents users from unintentionally reloading the page when clicking UI elements like "Cancel" or "Next".
• Enables rich content: Buttons can contain HTML (icons, bold text), unlike input buttons.
• Accessibility: Properly typed buttons provide correct semantic meaning to screen readers.
• JavaScript control: Allows developers to intercept clicks without triggering native form submission logic.

Syntax or steps

A button requires an opening and closing tag. The most important attribute is type. Inside a <form>, if type is omitted, it defaults to "submit". Outside a form, it defaults to "button".

<button type="value">Label</button>

Valid values are:

• submit: Sends form data to the server.
• reset: Restores all form fields to their initial values.
• button: Does nothing by itself; used with JavaScript event listeners.

Example

This example demonstrates the "gotcha." The first button submits the form because no type is specified. The second button does nothing because its type is explicitly set to button.

<form action="/login" method="post">
  <label for="user">Username:</label>
  <input type="text" id="user" name="username">

  <!-- DANGER: This will submit the form automatically -->
  <button>Submit Login</button>

  <!-- SAFE: This will NOT submit the form -->
  <button type="button" onclick="alert('Clicked!')">Help</button>
</form>

Part-by-part explanation:

• <button>Submit Login</button>: Because this is inside a form and lacks a type attribute, the browser treats it as type="submit". Clicking it sends the username to /login.
• <button type="button"...>: Explicitly setting type="button" overrides the default. Clicking it triggers the JavaScript alert but leaves the form state unchanged.

Common mistakes

• Omitting type in forms: Developers often forget to add type="button" to non-submit actions (like modal close buttons) placed inside forms, causing unintended page reloads.
• Confusing <input> and <button>: <input type="button"> never submits a form by default. <button> always submits if inside a form and untyped. Choose carefully.
• Using disabled buttons for validation: A disabled button cannot be clicked, so users get no feedback on why they can't proceed. Use visual cues instead.

When to use it

Practice

Guided Exercise: Create a form with two buttons. One should say "Send" and actually submit the form. The other should say "Preview" and show an alert saying "Preview Mode" without submitting.

Challenge: Add a third button labeled "Clear" that resets the form fields using the native reset type.

Hint: Remember that type="reset" clears inputs back to their value attributes defined in HTML.

Quick check

Question: What happens if you click a <button> with no type attribute located inside a <form>?

Answer: It acts as a submit button and sends the form data to the server, potentially reloading the page.

Summary

The <button> element is powerful due to its ability to contain HTML and handle various actions. However, its default behavior of submitting forms when untyped is a frequent source of bugs. Always explicitly declare type="button" for interactive elements that should not send data.