Buttons (button)

Name:

Date:

Class:

Quick Questions

Shade in the A or B circle for each question.

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

A Clears all form fields

B Sends the form data when clicked

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

A Resets all form fields to their default values

B Submits the form

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

A True

B False

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

A False

B True

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

A none

B button

Match the Pairs

Draw a line connecting each item on the left to its match on the right.

Left column		Right column
1<button type="submit">Login</button>		A<button type="button">Help</button>
2<button type="reset">Clear</button>		B<form> <input type="text" name="q"> <button>Search</button> </form>
3A <button> without a type defaults to type="submit" inside a form		CSubmits the form when clicked - type="submit" sends the form data to the server
4type="button" creates a button with no default action - used with JavaScript		DResets all form fields to their initial values - type="reset" does not submit data
5<BUTTON type="submit">Send</BUTTON>		ETag names must be lowercase - <BUTTON> and </BUTTON> should be <button> and </button>
6<button type=submit>Send</button>		FAttribute values must be in double quotes - type=submit should be type="submit"

Definitions

Fill in the Blanks

Complete each line of code by filling in the missing parts.

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

<button type="______">Submit</button>

<button type="_____">Clear</button>

<button type="button">Go</______)

Spot the Error

Shade in the letter of the line that contains an error.

Question 1

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

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

C <button>Cancel</button>

Question 2

A <form>

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

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

D </form>

Question 3

A <form>

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

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

D </form>

Question 4

A <form>

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

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

D <button>Search</button

E </form>

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>

Answer Key

Buttons (button)

Section A: Quick Questions

B — Sends the form data when clicked

A — Resets all form fields to their default values

A — True

A — False

B — button

Section B: 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"

Section C: Definitions

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

Section D: Fill in the Blanks

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

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

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

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

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

Section E: Spot the Error

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

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

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

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

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