← HTML & CSS

The form element

The <form> attribute that specifies the URL where the form data is sent when the user submits. Without it, data is sent to the current page URL.

Part of: HTML and CSS Journey — Module 26, 9-10 Digital Technologies: Interactive content with emerging tools — Module 4, QCE Digital Solutions Unit 3 — Interactions Between Users, Data and Digital Systems — Module 41

Understanding The form element in HTML & CSS

What it does: action="/register" tells the browser to send the form data to /register. Without action, data goes to the current page. The input and button are both inside the <form> element. Only controls inside the form are included in the submission. action holds the destination URL for the form submission. href is used on <a> links, not forms. POST sends data in the request body - safer for passwords and large data. GET appends it to the URL. HTML tag names must be lowercase. <FORM> is non-standard - use <form>. method="get" appends form values to the URL (e.g. /search?q=hello), making searches shareable and bookmarkable.

Common mistakes: HTML tag names must be lowercase. <FORM> should be written as <form>. Attributes must be written inside the opening tag, not on a separate line. The method attribute belongs in the <form> opening tag: <form action="/login" method="post">.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a class and your students practise it interactively.

🖨 Print worksheet + answer key Add The form element to a class →

This module's key terms are also in a printable crossword (Modules 21–30) and word search (Modules 21–41).

Take this worksheet further — free with Cloodit

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

Learning

Duo

Which attribute on <form> specifies where the data is sent?

actionhref

Matches

↓

Tag names must be lowercase - <FORM> and </FORM> should be <form> and </form>

Applying

Meanings

Term

action

Meaning

The <form> attribute that specifies the URL where the form data is sent when the user submits. Without it, data is sent to the current page URL.

Practice

Testing

Gaps

< action="/submit" method="post">

Check Answer

Spots

1<FORM action="/submit" method="post">

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

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.

Add to class →

Quick Questions

1. Which attribute on <form> specifies where the data is sent?

A. action ✓

B. href

action holds the destination URL for the form submission. href is used on <a> links, not forms.

2. What does method="post" do?

A. Appends data to the URL as query parameters

B. Sends data in the HTTP request body ✓

POST sends data in the request body - safer for passwords and large data. GET appends it to the URL.

3. True or false: forms can be nested inside other forms.

A. False ✓

B. True

HTML does not allow nested forms. All form controls should sit inside a single <form> element.

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

A. True

B. False ✓

HTML tag names must be lowercase. <FORM> is non-standard - use <form>.

5. Which method is most appropriate for a search form?

A. get ✓

B. post

GET appends the search query to the URL, making it bookmarkable and shareable. POST is used for data that should not appear in the URL.

Match the Pairs

<form action="/login" method="post"> <button>Login</button> </form> → A form that sends data to /login using POST - the button submits the form when clicked

<form action="/search" method="get"> <input type="text" name="q"> <button>Search</button> </form> → A search form that appends query data to the URL - method get makes the search bookmarkable

action specifies the URL where form data is sent on submission → <form action="/register" method="post"> <button>Register</button> </form>

All form controls must be inside <form> - inputs outside the form are not submitted → <form action="/send" method="post"> <input type="text" name="msg"> <button>Send</button> </form>

<FORM action="/go" method="post"> <button>Go</button> </FORM> → Tag names must be lowercase - <FORM> and </FORM> should be <form> and </form>

<form action=/submit method="post"> <button>Submit</button> </form> → Attribute values must be in double quotes - action=/submit should be action="/submit"

Key Term

action

The <form> attribute that specifies the URL where the form data is sent when the user submits. Without it, data is sent to the current page URL.

Fill in the Blanks

1. <form action="/submit" method="post"> <button>Send</button> </form>

Hint: Type the element name that creates a form container

2. <form action="/login" method="post"> <button>Login</button> </form>

Hint: Type the attribute that specifies where the form data is sent

3. <form action="/save" method="post"> <button>Save</button> </form>

Hint: Type the attribute that specifies how form data is sent to the server

4. <form action="/send" method="post"> <button>Submit</button> </form>

Hint: Type the method value that sends form data in the HTTP request body

5. <form action="/search" method="get"> <button>Search</button> </form>

Hint: Type the element name for the closing tag that ends the form

Spot the Error

Question 1

A <FORM action="/submit" method="post">

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

C <button>Submit</button>

D </form>

Line A — HTML tag names must be lowercase. <FORM> should be written as <form>.

Question 2

A <form action="/login">

B method="post"

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

D <button>Login</button>

E </form>

Line B — Attributes must be written inside the opening tag, not on a separate line. The method attribute belongs in the <form> opening tag: <form action="/login" method="post">.

Question 3

A <form action="/search" method="get">

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

C <button type=submit>Search</button>

D </form>

Line C — Attribute values must be in double quotes: type="submit", not type=submit without quotes.

Question 4

A <form action="/register">

B <input type="email" name="email">

C <input type="password" name="pass">

D </form>

E <button>Register</button>

Line D — The </form> closing tag appears before the button element. The button must be inside the form: move </form> after the button.

Question 5

A <form>

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

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

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

E <Button>Submit</Button>

F </form>

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

Student with a class code? Join your class →