<button>

Level 5 — Forms & User Input A clickable element used to submit forms or trigger JavaScript actions.

1. Prerequisites

• <form> — Buttons are the primary way to submit a form.
• Element vs. Tag — Unlike <input>, the <button> is NOT a void element; it has opening and closing tags.
• Nesting — Since buttons can contain nested tags like text, spans, or images.

2. Term Category

Form Element / Interactive Element (Universal Browser Support): <button> is a fundamental concept in this technology stack. Level 5 — Forms & User Input

3. Explanation

(1) Design Motivation — "Why did we design this?"

While the W3C did create an <input type="button"> and an <input type="submit">, they had a major limitation: because <input> is a void element, it cannot contain anything other than plain text. You couldn't put an image, an icon, or a formatted <strong> tag inside the button. To solve this, the W3C created the <button> element. It acts exactly like the older input versions, but because it has a closing </button> tag, you can nest other HTML elements inside of it! This allows for rich, highly stylized UI elements. Furthermore, if a <button> is placed inside a <form>, it defaults to acting as the submit trigger for that form.

(2) Reality Metaphor

Imagine the physical "Start" button on a microwave. The <button> element is the physical plastic square you push. The type attribute tells the microwave what pushing the button actually does (e.g., type="submit" starts cooking, type="reset" clears the timer).

(3) Code Examples

Short Snippet

<!-- Inside a form, this will submit the data -->
<button type="submit">Log In</button>

Fuller Example

<form action="/checkout">
  <!-- A button containing rich HTML (an image and bold text) -->
  <button type="submit">
    <img src="cart-icon.png" alt="">
    <strong>Checkout Now</strong>
  </button>
  
  <!-- A button that clears all the form data instead of submitting -->
  <button type="reset">Clear Form</button>
  
  <!-- A button that does nothing natively (used for JavaScript triggers) -->
  <button type="button" onclick="alert('Hello!')">Say Hello</button>
</form>

4. Common Mistakes & Pitfalls

Mistake 1: Forgetting the type attribute

The mistake: Creating a <button> without defining its type attribute.

Why it's wrong: The HTML specification states that if a button has no type attribute, it defaults to type="submit". If you place a "Cancel" or "Help" button inside a form and forget to add type="button", clicking that button will accidentally submit the form and refresh the page!

Incorrect:

<form>
  <input type="text" name="username">
  <!-- This will accidentally submit the form! -->
  <button onclick="showHelpModal()">Need Help?</button> 
  
  <button type="submit">Submit</button>
</form>

Fix:

<form>
  <input type="text" name="username">
  <!-- type="button" prevents it from submitting the form -->
  <button type="button" onclick="showHelpModal()">Need Help?</button>
  
  <button type="submit">Submit</button>
</form>

Mistake 2: Omitting the type Attribute on <button> Elements (Unexpected Form Submit Trap)

The mistake: Creating a general action button <button onclick="doStuff()">Action</button> inside a <form> without a type attribute.

Why it's wrong: The default type for <button> inside HTML forms is type="submit"! Clicking an un-typed button unexpectedly submits the form. Always specify type="button" for non-submitting action buttons.

Incorrect:

<form>
  <button onclick="toggleModal()">Cancel</button> <!-- ❌ Unexpectedly submits form! -->
</form>

Fix:

<form>
  <button type="button" onclick="toggleModal()">Cancel</button> <!-- Explicit non-submitting button -->
</form>

Mistake 3: Using <div onclick="..."> Instead of Real <button> Tags

The mistake: Creating clickable buttons using <div class="btn" onclick="save()">Save</div>.

Why it's wrong: <div> elements are invisible to screen readers as buttons and cannot receive keyboard focus (Tab key / Enter key). Use real <button> tags.

Incorrect:

<div class="button" onclick="submit()">Submit</div> <!-- ❌ Inaccessible! -->

Fix:

<button type="submit" class="button">Submit</button>

5. Practice Exercises

Exercise 1: Explicit Form Submit Button

Scenario: An author constructs a form submit button using <button type="submit">.

Requirements:

1. Use <button type="submit">.
2. Provide clear descriptive button text.
3. Include visual button styling class.

<form action="/register" method="post">
  <button type="submit" class="btn-submit">Create Account</button>
</form>

Exercise 2: Non-Submitting Script Action Button

Scenario: A UI developer creates a modal dialog toggle button using <button type="button"> to prevent form submission.

Requirements:

1. Use <button type="button">.
2. Attach click handler hook or ARIA expanded state.

<button type="button" class="btn-toggle" aria-expanded="false" aria-controls="menu-panel">
  Toggle Navigation Menu
</button>

Exercise 3: Accessible Icon-Only Button with Screen Reader Label

Scenario: Creates a close icon button with visually hidden text for screen readers.

Requirements:

1. Include <span class="sr-only"> inside <button type="button">.

<button type="button" class="close-btn" aria-label="Close Dialog">
  <svg aria-hidden="true" width="16" height="16"><use href="#icon-close"></use></svg>
  <span class="sr-only">Close Dialog</span>
</button>

6. Related Terms

• <form> — The element that the button usually submits.
• action & method Attributes — The parameters that govern form submission when type="submit" is pressed.
• <a> (Anchor / Link) — The navigation element that is often confused with a button.
• tabindex Attribute — Related concept: tabindex Attribute.

7. Key Takeaways

• The <button> tag creates a clickable UI element.
• Unlike <input type="submit">, you can nest HTML (like images and spans) inside a <button>.
• Inside a form, a button defaults to type="submit".
• Always explicitly declare the type attribute (submit, reset, or button) to prevent accidental form submissions.