LESSON 19

Buttons

Learning objective: Create buttons and understand their different types.

Understand

Buttons trigger actions on a page.

The <button> element has three type values: submit (sends a form), reset (clears a form), and button (does nothing until JavaScript is attached). Choosing the correct type prevents surprising behaviour, like a button accidentally submitting a form.

Analogy: Button types are like clearly marked switches: one submits, one resets, one is wired up later.

See It in Action

The three button types:

<button type="submit">Save</button>
<button type="reset">Clear</button>
<button type="button">Do something</button>
How it works: submit sends the surrounding form, reset empties it, and button is neutral — ready for JavaScript to control later.

Try It Yourself

  1. Add a submit button inside a form.
  2. Add a reset button and test it clears fields.
  3. Add a type='button' button.

Quick Quiz

Which button type does nothing until JavaScript is added?

Challenge

Add all three button types to a form and describe what each does.

Success condition: Your form has a submit, reset, and neutral button behaving correctly.