Buttons (button)

An HTML element that creates a clickable button. The type attribute controls its behaviour: submit, reset, or button.

Part of: HTML and CSS Journey — Module 30

What it does: The button here has no type, so it defaults to submit - clicking it will send the form. Always specify type to be safe. HTML tag names must be lowercase. <BUTTON> is non-standard - use <button>. type="button" creates a button that does nothing by default. It is typically used with JavaScript event handlers. 'none' is not a valid type value. All attribute values must be in double quotes. type=submit without quotes is invalid HTML.

Common mistakes: HTML tag names must be lowercase. <BUTTON> and </BUTTON> should be <button> and </button>. The type attribute value must be in double quotes: type="submit", not type=submit without quotes.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of Buttons (button) (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

What does type="submit" do on a button?

Sends the form data when clickedClears all form fields

Matches

↓

Tag names must be lowercase - <BUTTON> and </BUTTON> should be <button> and </button>

Applying

Meanings

Term

Meaning

An HTML element that creates a clickable button. The type attribute controls its behaviour: submit, reset, or button.

Practice

Testing

Gaps

< type="submit">Send</button>

Check Answer

Spots

1<BUTTON type="submit">Send</BUTTON>

2<input type="text" name="q">

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. What does type="submit" do on a button?

A. Sends the form data when clicked ✓

B. Clears all form fields

type="submit" triggers form submission. type="reset" clears the fields.

2. What does type="reset" do on a button?

A. Resets all form fields to their default values ✓

B. Submits the form

type="reset" returns all inputs to their initial state. It does not send the form data.

3. True or false: a <button> inside a form defaults to type="submit" if no type is specified.

A. True ✓

B. False

A button without a type attribute defaults to type="submit" inside a form, which can cause accidental submissions. Always specify the type.

4. True or false: <BUTTON> with capital letters is valid HTML.

A. False ✓

B. True

HTML tag names must be lowercase. <BUTTON> is non-standard - use <button>.

5. Which type value creates a button that performs no default form action?

A. button ✓

B. none

type="button" creates a button that does nothing by default. It is typically used with JavaScript event handlers. 'none' is not a valid type value.

Match the Pairs

<button type="submit">Login</button> → Submits the form when clicked - type="submit" sends the form data to the server

<button type="reset">Clear</button> → Resets all form fields to their initial values - type="reset" does not submit data

A <button> without a type defaults to type="submit" inside a form → <form> <input type="text" name="q"> <button>Search</button> </form>

type="button" creates a button with no default action - used with JavaScript → <button type="button">Help</button>

<BUTTON type="submit">Send</BUTTON> → Tag names must be lowercase - <BUTTON> and </BUTTON> should be <button> and </button>

<button type=submit>Send</button> → Attribute values must be in double quotes - type=submit should be type="submit"

Key Term

<button>

An HTML element that creates a clickable button. The type attribute controls its behaviour: submit, reset, or button.

Fill in the Blanks

1. <button type="submit">Send</button>

Hint: Type the element name that creates a clickable button

2. <button type="submit">Submit</button>

Hint: Type the type value that makes a button submit its form

3. <button type="reset">Clear</button>

Hint: Type the type value that resets all form fields to their default values

4. <button type="button">Go</button>

Hint: Type the element name for the closing tag of a button

5. <form> <button type="submit">Send</button> </form>

Hint: Type the element name used to create a clickable form button

Spot the Error

Question 1

A <BUTTON type="submit">Send</BUTTON>

B <input type="text" name="q">

C <button>Cancel</button>

Line A — HTML tag names must be lowercase. <BUTTON> and </BUTTON> should be <button> and </button>.

Question 2

A <form>

B <button type=submit>Send</button>

C <button type="reset">Clear</button>

D </form>

Line B — The type attribute value must be in double quotes: type="submit", not type=submit without quotes.

Question 3

A <form>

B <input type="text" name="q">

C <button type="submitt">Go</button>

D </form>

Line C — 'submitt' is a typo. The correct value is type="submit" (one t).

Question 4

A <form>

B <input type="text" name="q">

C <input type="email" name="e">

D <button>Search</button

E </form>

Line D — The button closing tag is missing its > angle bracket. Write: <button>Search</button>.

Question 5

A <form>

B <input type="text" name="a">

C <input type="text" name="b">

D <input type="text" name="c">

E <Button type="submit">Send</Button>

F </form>

Line E — HTML tag names must be lowercase. <Button> and </Button> should be <button> and </button>.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?