📝 Phase 8 · Forms🟢 BeginnerMODULE 34

Buttons

⏱️ 12 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress95%

🎯 What you'll learn: The three button types — submit, reset, button — and why <button> is usually the better choice over <input type="button">.

Section 1

The submit Button

A button with type="submit" triggers the form's submission. It's the default type for <button> inside a form, so if you forget to set type, clicking it will submit the form — a common source of bugs.

submit-button.html

HTML

<button type="submit">Create Account</button>

⚠️

Watch out for the default

Any <button> inside a <form> defaults to type="submit" unless you say otherwise — a "Cancel" or "Toggle" button without an explicit type will accidentally submit the form.

Section 2

reset & button Types

type="reset" clears all form fields back to their default values. type="button" does nothing on its own — it's meant to be paired with JavaScript for custom actions.

button-types.html

HTML

<button type="reset">Clear Form</button>
<button type="button" onclick="togglePreview()">Preview</button>

Type	What it does
submit	Submits the form (default inside a form)
reset	Clears all fields back to their initial values
button	Does nothing by itself — used for custom JS behavior

Section 3

<button> vs <input type="button">

Both work, but <button> is generally preferred — it can contain HTML (icons, nested spans), while <input> can only show plain text via its value.

button-vs-input.html

HTML

<!-- Preferred: can hold markup -->
<button type="submit">🚀 Launch</button>

<!-- Older style: text only, via value -->
<input type="submit" value="Launch">

🧩 Knowledge Check — Lesson 34

5 questions to test your button knowledge.

1. What is the default type of a <button> inside a form?

2. What does type="reset" do?

3. What does type="button" do on its own?

4. Why is <button> generally preferred over <input type="button">?

5. Why should a "Cancel" or "Toggle" button always have an explicit type set?

💪

Coding Challenge — Lesson 34

Apply what you learned · Beginner Level

Challenge: Build a Form's Action Row

Build 3 buttons: a submit button reading "Save Changes", a reset button reading "Clear Form", and a plain button (type="button") reading "Cancel" with no default form-submitting behavior.

💡 Show hints if you're stuck

Every button here needs an explicit type attribute — don't rely on the default.

Finished this lesson?

Mark it complete to track your progress.

Module 34 of 62Phase 8 — Forms

Buttons

The submit Button

reset & button Types

<button> vs <input type="button">

Lesson 34 Complete!